Fun With Silverlight ListBox
We start with the basic listbox in silverlight. The Xaml Code is as below. This is very basic behavior of ListBox. As element gets added, scrollbar will get added automatically. This is the default behavior of the list box. And this does not have any fun in that :).
<UserControl x:Class="FunWithListBox.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="400" d:DesignHeight="300">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="150"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<ListBox x:Name="MyListBox"
Grid.Row="0"
Width ="100"
Height="100"></ListBox>
<Button x:Name="btn"
Grid.Row="1"
Width="100"
Height="30"
Content="Add Element"
Click="btn_Click"
/>
<Button x:Name="btnclear"
Grid.Row="2"
Width="100"
Height="30"
Content="Clear"
Click="btnclear_Click"
/>
</Grid>
</UserControl>
And the Code behind as follows.
using System.Windows;
using System.Windows.Controls;
namespace FunWithListBox
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void btn_Click(object sender, RoutedEventArgs e)
{
MyListBox.Items.Add("Item: " + MyListBox.Items.Count.ToString());
}
private void btnclear_Click(object sender, RoutedEventArgs e)
{
MyListBox.Items.Clear();
}
}
}
You may get suprise why did I put this screeshot here. But you know - a picture is worth a thousand words
We are moving on, As you know above illustration is the default behavior of ListBox. So How do we make this as a Horizontal Listbox.
Some manipulation in the XAML Code with get us that behavior. And the modifed XAML code is below.
<UserControl x:Class="FunWithListBox.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="400" d:DesignHeight="300">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="150"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<ListBox x:Name="MyListBox"
Grid.Row="0"
Width ="300"
Height="100">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
<Button x:Name="btn"
Grid.Row="1"
Width="100"
Height="30"
Content="Add Element"
Click="btn_Click"
/>
<Button x:Name="btnclear"
Grid.Row="2"
Width="100"
Height="30"
Content="Clear"
Click="btnclear_Click"
/>
</Grid>
</UserControl>
There is no change in the code behind. As the elements gets added, Horizontal Scrollbar gets added and the screenshot looks as below.
How do we get Images added in the similar way. Here we go. I am refering one of old article here for that. Again there is no change in the XAML. Only we have code behind changes and the C# code is below.
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
namespace FunWithListBox
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void btn_Click(object sender, RoutedEventArgs e)
{
//Image creation
Image img = new Image();
img.Margin = new Thickness(6, 0, 0, 0);
img.Source = new BitmapImage(new Uri("image.png", UriKind.RelativeOrAbsolute));
//Add to the Listitem collection
MyListBox.Items.Add(img);
}
private void btnclear_Click(object sender, RoutedEventArgs e)
{
MyListBox.Items.Clear();
}
}
}
Here we created an Image control at runtime and added to the ListBox list collection. No major code changes. And the screen is below.
Now I want to have the above functionaliy with a delete option. Here again there is no XAML change.
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
namespace FunWithListBox
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void btn_Click(object sender, RoutedEventArgs e)
{
//stack panel creation
StackPanel stk = new StackPanel();
stk.Orientation = Orientation.Horizontal;
//Image creation
Image img = new Image();
img.Margin = new Thickness(6, 0, 0, 0);
img.Source = new BitmapImage(new Uri("image.png", UriKind.RelativeOrAbsolute));
Image img1 = new Image();
img1.Margin = new Thickness(6, 0, 0, 0);
img1.Source = new BitmapImage(new Uri("remove.png", UriKind.RelativeOrAbsolute));
img1.MouseLeftButtonUp += new System.Windows.Input.MouseButtonEventHandler(img1_MouseLeftButtonUp);
//Add child elements to stack panel
stk.Children.Add(img);
stk.Children.Add(img1);
//Add to the Listitem collection
MyListBox.Items.Add(stk);
}
void img1_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
MyListBox.Items.Remove(MyListBox.Items[MyListBox.SelectedIndex]);
}
private void btnclear_Click(object sender, RoutedEventArgs e)
{
MyListBox.Items.Clear();
}
}
}
We have wired up an event to the remove image to delete that item alone from the list box collection. And this is the working Code.
Reference Articles
