Customizing the Default ListBoxItem UI
<UserControl x:Class='SilverlightApplication3.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'
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
<UserControl.Resources>
<DataTemplate x:Key="dtProductInfo">
<StackPanel>
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="$" Margin="0,0,2,0" />
<TextBlock Grid.Row="1" Text="{Binding ListPrice}"/>
<Ellipse Height="15" Width="15" Fill="{Binding InventoryLevelBrush}" Margin="0,0,2,0" />
<TextBlock Text="{Binding InventoryLevelMessage}" />
</StackPanel>
</DataTemplate>
<ControlTemplate x:Key="ctCustomListBoxItem" TargetType="ListBoxItem">
<Grid Background="{TemplateBinding Background}"
Margin="{TemplateBinding Margin}">
<Grid.RowDefinitions>
<RowDefinition Height="0.225*" MinHeight="20"/>
<RowDefinition Height="0.775*"/>
</Grid.RowDefinitions>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition
GeneratedDuration="00:00:00.0500000" To="MouseOver"/>
<vsm:VisualTransition
GeneratedDuration="00:00:00.0500000" From="MouseOver"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Normal">
<Storyboard/>
</vsm:VisualState>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.0010000"
Storyboard.TargetName="BottomBorder"
Storyboard.TargetProperty=
"(Border.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF68A3DE"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="SelectionStates">
<vsm:VisualState x:Name="Unselected">
<Storyboard/>
</vsm:VisualState>
<vsm:VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.0010000"
Storyboard.TargetName="TopBorder"
Storyboard.TargetProperty=
"(Border.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFF2D00"/>
</ColorAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.0010000"
Storyboard.TargetName="SelectionIndicator"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<vsm:Visibility>Visible</vsm:Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.0010000"
Storyboard.TargetName="TopBorder"
Storyboard.TargetProperty=
"(Border.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFF2D00"/>
</ColorAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.0010000"
Storyboard.TargetName="SelectionIndicator"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<vsm:Visibility>Visible</vsm:Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Unfocused">
<Storyboard/>
</vsm:VisualState>
<vsm:VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Duration="00:00:00.0010000"
Storyboard.TargetName="FocusRect"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<vsm:Visibility>Visible</vsm:Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border x:Name="TopBorder">
<Grid x:Name="SelectionIndicator">
</Grid>
</Border>
<Border>
<Grid>
<ContentPresenter HorizontalAlignment="Left"
Margin="3,3,3,3"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"/>
<Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" Width="Auto"
x:Name="FocusRect" Visibility="Collapsed"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
<Style x:Key="styleCustomListBoxItem" TargetType="ListBoxItem">
<Setter Property="Template"
Value="{StaticResource ctCustomListBoxItem}"/>
<Setter Property="Margin" Value="3,5,3,5" />
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White" Height="Auto" Margin="20,20">
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<ListBox x:Name="lbxStandard" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="0,0,25,0"
ItemTemplate="{StaticResource dtProductInfo}" />
<ListBox x:Name="lbxCustom"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ItemTemplate="{StaticResource dtProductInfo}"
ItemContainerStyle="{StaticResource styleCustomListBoxItem}"/>
</StackPanel>
</Grid>
</UserControl>
Related examples in the same category
