Silverlight ListBox Items
The Silverlight ListBox control is a pretty flexible control. Even though the out-of-the-box ListBox control isn't anything special necessarily, the control does give you a lot of power due to the nature of Silverlight and the ability to override control templates. Let's begin by looking at the markup:
<ListBox>
<ListBox.Items>
<ListBoxItem Content="First static item" />
<ListBoxItem>
<ListBoxItem.Template>
<ControlTemplate>
<TextBox Text="Second static item" />
</ControlTemplate>
</ListBoxItem.Template>
</ListBoxItem>
<ListBoxItem>
<ListBoxItem.ContentTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="Third" />
<TextBlock Text="static item" />
</StackPanel>
</DataTemplate>
</ListBoxItem.ContentTemplate>
</ListBoxItem>
<ListBoxItem Template="{StaticResource ListBoxTemplateItem}" />
</ListBox.Items>
</ListBox>
This may look like a jumbled mess, and it may not be the best example, but let's break down the various types of items added to the list. First, content can be added directly to a list box item as:
<ListBoxItem Content="First static item" />
This type of list box item supports the full features of the list box, such as automatic mouseover styles, selection support via clicking, etc. All of those features are built-in to the ListBox element and ListBoxItem element (depending on the feature). The next list box item renders a custom template, using a TextBox control:
<ListBoxItem>
<ListBoxItem.Template>
<ControlTemplate>
<TextBox Text="Second static item" />
</ControlTemplate>
</ListBoxItem.Template>
</ListBoxItem>
The template property takes a ControlTemplate object. This control template overrides the default features of a ListBoxItem, but that doesn't matter necesarily. The TextBox provides any responsiveness that this item would need, such as updating the text, selecting the text, etc. It doesn't support selection styles on mouse over and other listbox features, because the template was overridden.
However, the third option does have full ListBoxItem support (mouse over styles, etc.):
<ListBoxItem>
<ListBoxItem.ContentTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="Third" />
<TextBlock Text="static item" />
</StackPanel>
</DataTemplate>
</ListBoxItem.ContentTemplate>
</ListBoxItem>
The ContentTemplate can be used to provide custom content instead; this content renders a stack panel for the third item, which doesn't override any features, unlike the fourth option, which overrides the template also. However, it renders inline text, and because of that, no features are supported except of the underlying TextBlock. This template is supplied using the StaticResource attribute:
<ListBoxItem Template="{StaticResource ListBoxTemplateItem}" />
This means a resource has to exist in the UserControl or Application class, or any other resource alternative (such as control resources). In this example, the template exists in teh user control's list of resources. The ListBoxTemplateItem has to refer to an object with an x:Key designation, as shown below.
<UserControl.Resources>
<ControlTemplate x:Key="ListBoxTemplateItem">
<Border BorderBrush="Beige" BorderThickness="1">
<TextBlock Margin="20" Text="My templated content via resources" />
</Border>
</ControlTemplate>
</UserControl.Resources>
At runtime, this template replaces the template of the list item. You can view a screenshot of the results here: http://www.flickr.com/photos/36885451@N06/3493195440/