Using Customized ListBox in Silverlight
This article explains you how to create and use a Customized ListBox control from the Listbox controls available in Silverlight 3.0. This article explains how to add a new item in the ListBox along with a delete icon and once user clicks on the delete icons, delete that item from the list.
I will start with the basic List Box and explain the customized ListBox on the Go.
<ListBox> </ListBox>
We can also provide the Width and Height for the ListBox control and the code snippet looks as below/
<ListBox x:Name="MyListBox" Width="300" Height="200"> </ListBox>
A ListBox control can have a collection of ListBoxItem as it's elements . The following XAML code shows how to add elements to the ListBox.
<ListBox x:Name="MyListBox" Width="300" Height="200">
<ListBoxItem Content="Silverlight 3"></ListBoxItem>
<ListBoxItem Content="Expression Blend 3"></ListBoxItem>
<ListBoxItem Content="Deep Zoom"></ListBoxItem>
<ListBoxItem Content="Sketch Flow"></ListBoxItem>
</ListBox>
We can also format ListBox Items with Foreground, Background, FontFamily, FontSize, FontWeight attributes of ListBoxItem, which represents the background color, foreground color, font, font size, font style respectively of the item. The folllowing code snippet show how it is happening in XAML code.
<UserControl x:Class="CustomListBox.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<ListBox x:Name="MyListBox" Width="300" Height="200" Grid.Row="1" Grid.Column="1">
<ListBoxItem Background="BurlyWood" Foreground="Red" Content="Silverlight 3"
FontFamily="Verdana" FontSize="14" FontWeight="Bold"></ListBoxItem>
<ListBoxItem Background="BlanchedAlmond" Foreground="GreenYellow"
Content="Expression Blend 3"
FontFamily="Georgia" FontSize="14" FontWeight="Bold"></ListBoxItem>
<ListBoxItem Background="Chocolate" Foreground="White" Content="Deep Zoom"
FontFamily="Georgia" FontSize="14" FontWeight="Bold"> </ListBoxItem>
<ListBoxItem Background="DeepPink" Foreground="RosyBrown" Content="Sketch Flow"
FontFamily="Georgia" FontSize="14" FontWeight="Bold"></ListBoxItem>
</ListBox>
</Grid>
</UserControl>
The Output screen looks as below
We can also display another control/controls as a ListBoxItem. Here we have the explanation of using a TextBlock and an Image Control. The short snap of code looks like this/
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Item One"></TextBlock>
<Image Source="close.png"></Image>
</StackPanel>
</ListBoxItem>
In the above code we have a StackPanel as element to the ListBox which inturn contain two another controls viz. TextBlock and Image. See the XAML code below.
<UserControl x:Class="CustomListBox.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="300"/>
<RowDefinition Height="200"/>
</Grid.RowDefinitions>
<ListBox x:Name="MyListBox" Width="300" Height="200" Grid.Row="1" Grid.Column="1">
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Item One" FontFamily="Georgia" FontSize="14" FontWeight="Bold"></TextBlock>
<Image Source="cancel.png" Margin=" 6,0,0,0"></Image>
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Item Two" FontFamily="Georgia" FontSize="14" FontWeight="Bold"></TextBlock>
<Image Source="cancel.png" Margin=" 6,0,0,0"></Image>
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Item Three" FontFamily="Georgia" FontSize="14" FontWeight="Bold"></TextBlock>
<Image Source="cancel.png" Margin=" 6,0,0,0"></Image>
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Item Four" FontFamily="Georgia" FontSize="14" FontWeight="Bold"></TextBlock>
<Image Source="cancel.png" Margin=" 6,0,0,0"></Image>
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Item Five" FontFamily="Georgia" FontSize="14" FontWeight="Bold"></TextBlock>
<Image Source="cancel.png" Margin=" 6,0,0,0"></Image>
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Item Six" FontFamily="Georgia" FontSize="14" FontWeight="Bold"></TextBlock>
<Image Source="cancel.png" Margin=" 6,0,0,0"></Image>
</StackPanel>
</ListBoxItem>
</ListBox>
</Grid>
</UserControl>
The screen looks like this
Action Item - Create a Customized List Box at runtime which item name and a cross icon. Clicking on the cross icon has to delete the item from the list.
To make this happen we need to do the same above procedure with some more code addition. Here most of the work happens in code behind. Our initial screen looks as below and Clicking on the Add element button will add new items in the list box and the click on cross icon will delete that particular item from the list.
As and when user clicks on the Add Button, a new item is getting added to the list. The code behind code for adding item to ListBox is as below.
private void btnAdd_Click(object sender, RoutedEventArgs e)
{
int index = MyListBox.Items.Count;
//stack panel creation
StackPanel stk = new StackPanel();
stk.Name = "stack" + index.ToString();
stk.Orientation = Orientation.Horizontal;
// TextBlock creation
TextBlock txt = new TextBlock();
txt.Name = "txt" + index.ToString();
txt.Text = "Item Element -> " + index.ToString();
//Image creation
Image img = new Image();
img.Name = "img" + index.ToString();
img.Margin = new Thickness(6, 0, 0, 0);
img.Source = new BitmapImage(new Uri("cancel.png", UriKind.RelativeOrAbsolute));
//Add child elements to stack panel
stk.Children.Add(txt);
stk.Children.Add(img);
//Add to the Listitem collection
MyListBox.Items.Add(stk);
}
Screen shot after adding some elements to the list.
Now we need to wire up an event to the cross icon to delete that element from the list item. We wire up "MouseLeftButtonUp" to the cross icon image control and add the functionality to delete the element. Here is the full source code.
XAML Code :
<UserControl x:Class="CustomListBox.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="300"/>
<RowDefinition Height="200"/>
</Grid.RowDefinitions>
<ListBox x:Name="MyListBox" Width="300" Height="200" Grid.Row="1" Grid.Column="1">
</ListBox>
<Button x:Name="btnAdd"
Grid.Row="2" Grid.Column="1"
Width="85" Height="35"
Content="Add Element"
Click="btnAdd_Click"/>
</Grid>
</UserControl>
C Sharp Code :
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media.Imaging;
namespace CustomListBox
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void btnAdd_Click(object sender, RoutedEventArgs e)
{
int index = MyListBox.Items.Count;
//stack panel creation
StackPanel stk = new StackPanel();
stk.Name = "stack" + index.ToString();
stk.Orientation = Orientation.Horizontal;
// TextBlock creation
TextBlock txt = new TextBlock();
txt.Name = "txt" + index.ToString();
txt.Text = "Item Element -> " + index.ToString();
//Image creation
Image img = new Image();
img.Name = "img" + index.ToString();
img.Margin = new Thickness(6, 0, 0, 0);
img.Source = new BitmapImage(new Uri("cancel.png", UriKind.RelativeOrAbsolute));
img.MouseLeftButtonUp += new MouseButtonEventHandler(img_MouseLeftButtonUp);
//Add child elements to stack panel
stk.Children.Add(txt);
stk.Children.Add(img);
//Add to the Listitem collection
MyListBox.Items.Add(stk);
}
void img_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
MyListBox.Items.Remove(MyListBox.Items[MyListBox.SelectedIndex]);
}
}
}
The running Code:
Now when user clicks on the Add Element button, a new element is added to the Collection, which is a combination of Text and Image and when you click on any cross image, that corresponding item will get deleted from the list.
