How to customize the WP7 ListBox Selected Item | Part2: Visual States

published on: 5/2/2011 | Views: N/A | Tags: ListBox Styling UI

by WindowsPhoneGeek

This is the second post from the "How to customize the WP7 ListBox Selected Item"  series of two articles in which I talk about how to customize the ListBox Selected Item by modifying the ListBoxItem ControlTemplate as well as by changing the animations inside the Selected Visual State.

• How to customize the WP7 ListBox Selected Item | Part1: Control Template
• How to customize the WP7 ListBox Selected Item | Part2: Visual States

Modifying the Selected ListBoxItem Visual States

The next step in customizing the ListBox SelectedItem is to add some changes inside the Selected VisualState. We will just change the foreground to White and will add an additional animation to simulate a highlighted effect(we will use YellowGreen color).

In a similar way you can customize the ListBoxItemStyle in various ways. Here is how the full Style should look like:

<phone:PhoneApplicationPage.Resources>
    <local:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
    <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="ContentContainer"
                                Storyboard.TargetProperty="Foreground"
                                Duration="0">
                                            <DiscreteObjectKeyFrame  KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="border"
                                Storyboard.TargetProperty="Background"
                                Duration="0">
                                            <DiscreteObjectKeyFrame  KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="YellowGreen"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <StackPanel x:Name="border" Orientation="Horizontal">
                            <CheckBox x:Name="checkBox" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, 
Path=IsSelected, Mode=TwoWay}" DataContext="{TemplateBinding IsSelected}" Visibility="{Binding Converter={StaticResource BooleanToVisibilityConverter}}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                        <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

Here is how we can apply the newly created ListBoxItem Style:

Data Bound ListBox

We will create a sample databound ListBox and will set the newly created style through its ItemContainerStyle property. We will also enable the SelectionMode="Multiple":

<ListBox x:Name="databoundListBox" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" SelectionMode="Multiple"/>

  this.databoundListBox.ItemsSource = new List<string> {"Item1","Item2","Item3" };

ListBox populated with ListBoxItems

We will populate the ListBox with ListBoxItems and will set the newly created style through the items Style property:

<ListBox>
    <ListBoxItem Content="ListBox Item1" Style="{StaticResource ListBoxItemStyle1}"/>
    <ListBoxItem Content="ListBox Item2"  Style="{StaticResource ListBoxItemStyle1}"/>
    <ListBoxItem Content="ListBox Item3" Style="{StaticResource ListBoxItemStyle1}"/>
</ListBox>

Here is the demo video to see the new selection behavior in action:

I hope that the series was helpful. You can download the full source code here:

Here are some more  www.windowsphonegeek.com articles related to the ListBox Styling and customization:

• Animating ListBox SelectedItem with flipping effect in WP7
• WP7 ListBox: answers to popular questions
• Implementing a WP7 Checked ListBox in different ways
• Working with WP7 ListBox SelectedItem
• Using Perspective Transforms inside ListBox ItemTemplate

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'How to customize the WP7 ListBox Selected Item | Part2: Visual States'

Title Your Name

Comment