Building a ListBox with custom content in Silverlight 4.0
Let's take the same data that displayed poker starting hands from the previous exercise and see what type of cool Listbox you can build with it.
1. Start out by creating a new Silverlight applicatoin called ListBoxCustom and allow VS to create a hosting web site.
2. You will use the same class that you build in the earlier DataGrid exercise. Right-click the Silverlight project, choose Add existing Item, and browe to StartingHands.cs to add that class to the project.
3. When you add the existing StartingHands.cs class, it is in a different namespace than your current project. you can reference that namespace by adding a using statement at the top of your silverlight application, or you can just change the namespace, as follows:
namespace ListBoxCustom
{
public class StartingHands
{
public string Nickname { get; set; }
public string Notes { get; set; }
public string Card1 { get; set; }
public string Card2 { get; set; }
...
}
}
4. Next, you need to define the ListBox's ItemTemplate. The ItemTemplate will contain a horizontal-oriented StackPanel including the grid to display the two cards. It will also include a nested vertical-oriented StackPanel that will contain two TextBlock controls to display the Nickname and Notes data. here is the code:
<ListBox Margin="10" x:Name="list">
<ListBox.ItemTemplate>
<DataTemplate>
<!--<StackPanel Margin="5" Orientation="Vertical">
<TextBlock FontSize="17" FontWeight="Bold" Text="{Binding Nickname}" />
<StackPanel Margin="5,0,0,0" Orientation="Horizontal">
<TextBlock Text="Age: " />
<TextBlock Text="{Binding Age}" />
<TextBlock Text=", Male: " />
<TextBlock Text="{Binding Male}" />
</StackPanel>
</StackPanel>-->
<StackPanel Margin="5" Orientation="Horizontal">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Margin="2" CornerRadius="4" BorderBrush="Black" BorderThickness="1" />
<Rectangle Margin="4" Fill="White" Grid.Column="0" Width="20" />
<Border Margin="2" CornerRadius="4" BorderBrush="Black" BorderThickness="1" Grid.Column="1" />
<Rectangle Margin="4" Fill="White" Grid.Column="1" Width="20" />
<TextBlock Text="{Binding Card1}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="0" />
<TextBlock Text="{Binding Card2}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1" />
</Grid>
<StackPanel Grid.Column="2" Orientation="Vertical">
<TextBlock Text="{Binding Nickname}" FontWeight="Bold" />
<TextBlock Text="{Binding Notes}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
5. The only thing left to do is to wire up the ListBox to the data source. To do this, navigate to the page.xmal.cs code behind, and add an event handler for the Page Load event. Then, within that Loaded event handler, add the following code to set the ListBox's ItemsSource to the return value form the StartingHands.GetHands() method, as you did earlier in the DataGrid example.
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
this.list.ItemsSource = StartingHands.GetHands();
}
6. Run the application. If all goes well, you will see the listbox example.
