CODEWITHSUNDEEP
c#xamlwindows-phone-8.1controltemplatelistboxitem
binncheol
binncheol

Reputation: 1453

ListBox Selected Item Style for Windows Phone 8.1

I have a simple listbox and I would like to change the Style so that when an item is selected, the border of the item changes colour.

Currently my ListBox and style is defined as:

<ListBox x:Name="DaysList" HorizontalContentAlignment="Stretch" Background="Transparent" Height="300" Grid.Row="1" >
            <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                    <Setter Property="FontSize" Value="30" />
                    <Setter Property="HorizontalAlignment" Value="Center" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Border x:Name="LayoutRoot" BorderThickness="3" BorderBrush="Black" >
                                <ContentControl x:Name="ContentContainer" 
                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"  
                                    Margin="{TemplateBinding Padding}" 
                                    Content="{TemplateBinding Content}" 
                                    ContentTemplate="{TemplateBinding ContentTemplate}" 
                                    Foreground="{TemplateBinding Foreground}" />
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Pink"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Normal">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="MouseOver" />
                                        <VisualState x:Name="Disabled"/>                                             
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualState x:Name="Unselected"/>
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="LayoutRoot">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>                                    
                            </Border>

                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>                
        </ListBox.ItemContainerStyle>                
        </ListBox>

The Pressed and Normal Visual States are working as expected, but the Selected state isn't. Am I missing a step somewhere?

Upvotes: 2

Views: 2813

Answers (1)

Chubosaurus Software
Chubosaurus Software

Reputation: 8161

It doesn't work because the State you're looking for is: SelectedUnfocused

<VisualStateGroup x:Name="SelectionStates">
    <VisualState x:Name="SelectedUnfocused">
        <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="LayoutRoot">
                <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </VisualState>
</VisualStateGroup>

After you implement the code you will realize you didn't handle the Unselected case correctly: So set it back to green when it gets Unselected

<VisualState x:Name="Unselected">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="BorderBrush">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

Upvotes: 2

Related Questions