Bullets For Silverlight ListBox

Here is what the output looks like:












While answering a query on silverlight forum, I thought of writing this blog.

Quoting the question as:
How do I add Bullet Points in SilverLight 4.0?
I tried the <ul> </ul> HTML code and it doesn't work. Is there a special code in SilverLight for Bullet Points?

Here is what you can try:

Xaml Code:

<ListBox x:Name="lbMyBullet" VerticalAlignment="Stretch" Margin="5,2,2,2" Height="150" HorizontalAlignment="Stretch" Width="240">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="images/small-arrowblue.png" VerticalAlignment="Center" Height="9" Width="7"></Image>
<TextBlock x:Name="myBulletText" Margin="5,2,0,0" VerticalAlignment="Top" Text="{Binding Path=Name}" ToolTipService.ToolTip="{Binding Path=Name}"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

In Code Behind:
 
public class Employee
{
public int ID { get; set; }
public string Name { get; set; }
}

ObservableCollection employee = new ObservableCollection();
employee.Add(new Employee() { ID = 1, Name = "Nimish"});
employee.Add(new Employee() { ID = 2, Name = "Vikas"});
employee.Add(new Employee() { ID = 3, Name = "Pooja"});
employee.Add(new Employee() { ID = 4, Name = "Maya"});
employee.Add(new Employee() { ID = 5, Name = "Kiran"});
employee.Add(new Employee() { ID = 6, Name = "Pragati"});
employee.Add(new Employee() { ID = 7, Name = "Lalit"});
employee.Add(new Employee() { ID = 8, Name = "Neha"});
employee.Add(new Employee() { ID = 9, Name = "Sachin"});
employee.Add(new Employee() { ID = 10, Name = "Ishita"});

lbMyBullet.ItemsSource = employee;

You have to just change the image path.

Happy coding :)

1 comment: