I want to do a small customization on my ListBox controls in the way that selected items look. The default style is to make the selected item highlighted blue and surround it with a dashed border. I have customized my ListBox a bit already, but I cannot
figure out how to create my own style for the selected items. Here is what I got so far:
You should change the template of the ListBoxItem. I have copied below the default template of the ListBoxItem. To change the appearance of the selected item, tweak the storyboard within the
'Selected' VisualState.
davidpni
Member
66 Points
82 Posts
Customizing ListBox and ListBoxItem
Jun 20, 2008 03:21 PM | LINK
I want to do a small customization on my ListBox controls in the way that selected items look. The default style is to make the selected item highlighted blue and surround it with a dashed border. I have customized my ListBox a bit already, but I cannot figure out how to create my own style for the selected items. Here is what I got so far:
<Style x:Key="HorizontalListBox" TargetType="ListBox">
<Setter Property="Template">
...some xaml...
</Setter>
<Setter Property="ItemsPanel">
...some xaml...
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<Border BorderThickness="1">
<ContentPresenter Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
FontWeight="Bold"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
Any suggestions?
Jim Mangaly
Contributor
2646 Points
383 Posts
Re: Customizing ListBox and ListBoxItem
Jun 23, 2008 05:36 AM | LINK
You should change the template of the ListBoxItem. I have copied below the default template of the ListBoxItem. To change the appearance of the selected item, tweak the storyboard within the 'Selected' VisualState.
<Style TargetType="ListBoxItem" >
<Setter Property="IsEnabled" Value="true" />
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Cursor" Value="Arrow" />
<Setter Property="TextAlignment" Value="Left" />
<Setter Property="TextWrapping" Value="NoWrap" />
<!-- Cannot currently parse FontFamily type in XAML so it's being set in code -->
<!-- <Setter Property="FontFamily" Value="Trebuchet MS" /> -->
<Setter Property="FontSize" Value="12" />
<Setter Property="Background" Value="White" />
<Setter Property="Padding" Value="2,0,0,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
<vsm:VisualStateGroup x:Name="CommonStates" >
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HoverOverlay" Storyboard.TargetProperty="Opacity" To=".75" Duration="0" />
<ColorAnimation Storyboard.TargetName="fillStop0Hover" Storyboard.TargetProperty="Color" To="#FFF9FAFA" Duration="0" />
<ColorAnimation Storyboard.TargetName="fillStop1Hover" Storyboard.TargetProperty="Color" To="#FFD6DFE7" Duration="0" />
<ColorAnimation Storyboard.TargetName="fillStop2Hover" Storyboard.TargetProperty="Color" To="#FFD3E4F5" Duration="0" />
<ColorAnimation Storyboard.TargetName="strokeStop0Hover" Storyboard.TargetProperty="Color" To="#00000000" Duration="0" />
<ColorAnimation Storyboard.TargetName="strokeStop1Hover" Storyboard.TargetProperty="Color" To="#00000000" Duration="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="SelectionStates" >
<vsm:VisualState x:Name="Unselected" />
<vsm:VisualState x:Name="Selected">
<Storyboard>
<ColorAnimation Storyboard.TargetName="fillStop0" Storyboard.TargetProperty="Color" To="#FFD9EFFF" Duration="0" />
<ColorAnimation Storyboard.TargetName="fillStop1" Storyboard.TargetProperty="Color" To="#FFBDD2E6" Duration="0" />
<ColorAnimation Storyboard.TargetName="fillStop2" Storyboard.TargetProperty="Color" To="#FFA1B6CD" Duration="0" />
<ColorAnimation Storyboard.TargetName="strokeStop0" Storyboard.TargetProperty="Color" To="#FF77B9EB" Duration="0" />
<ColorAnimation Storyboard.TargetName="strokeStop1" Storyboard.TargetProperty="Color" To="#FF4887CD" Duration="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates" >
<vsm:VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Rectangle IsHitTestVisible="False">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.316111,0.0165521" EndPoint="0.316111,0.724833">
<GradientStop x:Name="fillStop0" Color="#00000000" Offset="0" />
<GradientStop x:Name="fillStop1" Color="#00000000" Offset="0.682203" />
<GradientStop x:Name="fillStop2" Color="#00000000" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0.318122,0.0360108" EndPoint="0.318122,0.715784">
<GradientStop x:Name="strokeStop0" Color="#00000000" Offset="0" />
<GradientStop x:Name="strokeStop1" Color="#00000000" Offset="1" />
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="HoverOverlay" IsHitTestVisible="False" Opacity="0" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.316111,0.0165521" EndPoint="0.316111,0.724833">
<GradientStop x:Name="fillStop0Hover" Color="#00000000" Offset="0" />
<GradientStop x:Name="fillStop1Hover" Color="#00000000" Offset="0.682203" />
<GradientStop x:Name="fillStop2Hover" Color="#00000000" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0.318122,0.0360108" EndPoint="0.318122,0.715784">
<GradientStop x:Name="strokeStop0Hover" Color="#00000000" Offset="0" />
<GradientStop x:Name="strokeStop1Hover" Color="#00000000" Offset="1" />
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="FocusVisual" Stroke="Black" StrokeDashArray="1,2" Visibility="Collapsed" IsHitTestVisible="False" />
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Left" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" TextAlignment="{TemplateBinding TextAlignment}" TextDecorations="{TemplateBinding TextDecorations}" TextWrapping="{TemplateBinding TextWrapping}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
<Line Stretch="Fill" Grid.Row="1" X1="0" X2="1" Y1="0" Y2="0" StrokeThickness="1" Stroke="#FFA4A4A4" IsHitTestVisible="False" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Jim (http://jimmangaly.blogspot.com/)
Please MARK the replies as answers if they answered your question
idragoev
Member
10 Points
12 Posts
Re: Customizing ListBox and ListBoxItem
Jun 24, 2008 02:47 PM | LINK
Hi,
An example how to customize ListBox and ListBox item you can find here,
www.SilverlightShow.net