Customizing ListBox and ListBoxItem

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:

Any suggestions?

Re: Customizing ListBox and ListBoxItem

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" />


<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

Re: Customizing ListBox and ListBoxItem

Hi,

An example how to customize ListBox and ListBox item you can find here,

Programming with .NET - General

Customizing ListBox and ListBoxItem

Re: Customizing ListBox and ListBoxItem

Re: Customizing ListBox and ListBoxItem