Change template of list item in WinRT app based on selection state

Question

I try to change the display of a ListViewItem in a WinRT app based on whether the item is selected. In WPF, I would have used a style trigger, but this is not available in WinRT. So after searching the web for some time, I think I must use the visual state manager. As I understand, the ListView has a visual state group "SelectionStates" which holds the states I am interested in. So I came up with the following ItemContainerStyle that I apply on my ListView:

        <Style x:Key="itemContainerStyle" TargetType="SelectorItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="SelectorItem">
                    <Grid>
                        <TextBlock x:Name="textBlock" Text="{Binding}" Visibility="Visible" />
                        <TextBox x:Name="textBox" Text="{Binding Path=Name, Mode=TwoWay}" Visibility="Collapsed" />

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected" />

                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="textBox" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="textBlock" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

The normal items show up as expected (so I assume that my style is applied), but the selection stuff does not work at all. Why? I assume that the states are triggered automatically, isn't it? So how do I fix it?

Note: I use "SelectorItem" as target type because I want to use the same style on a grid view, too. Is that a problem? Changing it to "ListViewItem" did not solve my problem though...

Thanks in advance, Christoph

Farhan Ghumra Farhan Ghumra · Accepted Answer · 2013-06-22T20:03:26

You need to use (UIElement.Visibility) as value of DiscreteObjectKeyFrame's Value property.

<VisualState x:Name="Selected">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="textBox" Storyboard.TargetProperty="(UIElement.Visibility)">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(UIElement.Visibility)">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

Change template of list item in WinRT app based on selection state

2 Answers