How to customize the ListPicker selected item

published on: 2/24/2011 | Views: N/A | Tags: WP7Toolkit Styling UI ListPicker

by WindowsPhoneGeek

In this quick tip I am going to demonstrate how to customize the Selected visual state of the ListPickerItem.

NOTE: 

Question: How to customize the Selected State of the ListPickerItem?

Answer:

All you need to do is just to make some changes into the ListPickerItem Selected VisualState (note that you will need the full style with the ControlTemplate and VisualStates).

Here is how the final result should looks like:

And here the sample code in which we have modified the Selected and Unselected visual states:

<Style TargetType="toolkit:ListPickerItem" x:Key="style">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="Padding" Value="8 6"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="toolkit:ListPickerItem">
                <Grid x:Name="grid" Background="{TemplateBinding Background}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetName="ContentContainer"
                                    Storyboard.TargetProperty="Foreground"
                                    Duration="0">
                                        <DiscreteObjectKeyFrame  KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <SolidColorBrush Color="Red"/>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetName="ContentContainer"
                                    Storyboard.TargetProperty="Foreground"
                                    Duration="0">
                                        <DiscreteObjectKeyFrame
                                        Value="{StaticResource PhoneAccentBrush}"
                                        KeyTime="0"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetName="grid"
                                    Storyboard.TargetProperty="Background"
                                    Duration="0">
                                        <DiscreteObjectKeyFrame  KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <SolidColorBrush Color="Orange"/>
                                        </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentControl
                    x:Name="ContentContainer"
                    Content="{TemplateBinding Content}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    Foreground="{TemplateBinding Foreground}"
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    Margin="{TemplateBinding Padding}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<toolkit:ListPicker >
    <toolkit:ListPickerItem Content="Item1" Style="{StaticResource style}"/>
    <toolkit:ListPickerItem Content="Item1" Style="{StaticResource style}"/>
    <toolkit:ListPickerItem Content="Item1" Style="{StaticResource style}"/>
</toolkit:ListPicker>

I hope that the tip was helpful.

You can download the full source code here.

Here are two more helpful articles related to the ListPicker styling and customization:

• Customizing ListPicker for WP7 - Part1
• Customizing ListPicker for WP7 - Part2 

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'How to customize the ListPicker selected item'

Title Your Name

Comment