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

Advertisements

2 thoughts on “Customizing ListBoxItem template in ListBox

  1. Hi Lee!

    Can you tell me what version of Silverlight did you use?

    I can find an HorizontalContentAlignment property in ContentPresenter, for example.

    Thanks!

    1. Hi,
      May be version 2. but you could replace ContentPresenter with ContentControl. it would have the same effect.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s