Customizing ListBoxItem template in ListBox

ItemContainerStyle is the style that is applied to the dataitems.  In the figure below we see the default style that comes with the listbox on the left and style that is customized on the right.

Here are the steps

1. Get the default style for the ListBoxItem from generic.xaml using reflector or from the sdk

2. Remove all the UI/Shape elements except the ContentPresenter and the storyboard(s) where they are referenced.

3.change the contents of the Grid in the template to the following

<Grid Margin=”5″
      Background=”{TemplateBinding Background}”>  
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width=”20″ />
        <ColumnDefinition Width=”*” />
    </Grid.ColumnDefinitions>

    <Ellipse  Width=”20″
              Height=”20″
              Grid.Column=”0″
              Stroke=”Black”
              IsHitTestVisible=”False”>
        <Ellipse.Fill>
            <SolidColorBrush x:Name=”SelectedVisual”
                             Color=”Beige” />
        </Ellipse.Fill>
    </Ellipse>
    <Border Margin=”2″
            Grid.Column=”1″
            x:Name=”border”
            CornerRadius=”5″
            BorderThickness=”1″>
        <Border.BorderBrush>
            <SolidColorBrush Color=”Transparent”
                             x:Name=”borderBrush”></SolidColorBrush>
        </Border.BorderBrush>
        <ContentPresenter Margin=”2″
                          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}” />
    </Border>
</Grid>

4 Add some storyboards to change the color of the BorderBrush and the ellipse and we are done

<vsm:VisualStateManager.VisualStateGroups>
    <vsm:VisualStateGroup x:Name=”CommonStates”>
        <vsm:VisualState x:Name=”Normal” />
        <vsm:VisualState x:Name=”MouseOver”>
          <Storyboard>
                <ColorAnimation Storyboard.TargetName=”SelectedVisual”
                                Storyboard.TargetProperty=”Color”
                                To=”Yellow” />
            </Storyboard>
        </vsm:VisualState>
    </vsm:VisualStateGroup>
    <vsm:VisualStateGroup x:Name=”SelectionStates”>
        <vsm:VisualState x:Name=”Unselected”>
            <Storyboard>
                <ColorAnimation Storyboard.TargetName=”SelectedVisual”
                                Storyboard.TargetProperty=”Color”
                                To=”Beige” />
            </Storyboard>
        </vsm:VisualState>
        <vsm:VisualState x:Name=”Selected”>
            <Storyboard>
                <ColorAnimation Storyboard.TargetName=”SelectedVisual”
                                Storyboard.TargetProperty=”Color”
                                To=”Green” />
            </Storyboard>
        </vsm:VisualState>
    </vsm:VisualStateGroup>
    <vsm:VisualStateGroup x:Name=”FocusStates”>
        <vsm:VisualState x:Name=”Focused”>
            <Storyboard>
                <ColorAnimation Storyboard.TargetName=”borderBrush”
                                Storyboard.TargetProperty=”Color”
                                To=”Black” />
            </Storyboard>
        </vsm:VisualState>
        <vsm:VisualState x:Name=”Unfocused”>
            <Storyboard>
                <Storyboard>
                    <ColorAnimation Storyboard.TargetName=”borderBrush”
                                    Storyboard.TargetProperty=”Color”
                                    To=”Transparent” />
                </Storyboard>
            </Storyboard>
        </vsm:VisualState>
    </vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>

you can download the source here