How do I set a different background colour on item click of ListView for metro/WinRT app?

Question

I have tried for about half an hour myself through both Expression Blend 5 Beta and Visual Studio 11 Beta but cannot figure out what should be a fairly trivial task on how to apply a different background colour when you click on a ListView item over the standard navy green with the tick which appears to ship standard on WinRT apps with Windows 8 Consumer Preview.

I believe I would need a <VisualStateManager/> declaration inside my XAML inside the <DataTemplate/> of my ListView (the same as what I did on a Button control), but cannot work out a way to get the "States" tab functioning in Blend to start recording these actions, and furthermore I am not sure what name to call the VisualState after I eventually work out how to do this.

For instance, customising the Pressed visual state for a Button was fairly easy after I right clicked and edited it's control template I could then access the "States" tab in Blend and start recording my Pressed, Disabled, PointerOver actions etc, but doesn't seem to be that easy with ListView's or possibly other controls?

Due to both Blend 5 and VS 11 being Beta, it makes it difficult to know what could just be an uncoded feature in the UI of Blend, or simply me doing things wrong! So I appreciate any help anyone could provide. Thanks

Answer 1

The selection state should be part of the ItemContainerStyle - either in form of a visual state or a trigger, but ItemContainerStyle does not seem to be exposed in the designer view, so it is hard to modify it, but you can just add a ListViewItem to your XAML and the designer will happily tell you what its style and template is so you can change it.

You can modify the style in your GridView or ListView by setting

ItemContainerStyle="{StaticResource ListViewItemStyle1}"

And adding these resources to an active resource dictionary (eg. Page.Resources):

<SolidColorBrush x:Key="ListViewItemHighlightBrush2" Color="Pink" />
<SolidColorBrush x:Key="ListViewItemCheckHintGlyphBrush2" Color="Red" />
<SolidColorBrush x:Key="ListViewItemPointerOverBrush2" Color="Purple" />
<SolidColorBrush x:Key="ListViewItemCheckGlyphBrush2" Color="Yellow" />
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderBrush2" Color="Orange" />
<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
    <Setter Property="FontFamily" Value="{StaticResource ContentFontFamily}" />
    <Setter Property="FontSize" Value="{StaticResource ContentFontSize}" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="TabNavigation" Value="Local" />
    <Setter Property="IsHoldingEnabled" Value="True" />
    <Setter Property="Margin" Value="0,0,18,0" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <Border x:Name="OuterContainer">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PointerOverBorder" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectionBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedPointerOverBorderBrush2}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="SelectedBorder">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedPointerOverBorderBrush2}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectedEarmark">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedPointerOverBorderBrush2}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <TapDownThemeAnimation TargetName="ContentContainer" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="{StaticResource ListViewItemDisabledOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                            <VisualState x:Name="PointerFocused" />
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionHintStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.65" To="NoSelectionHint" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="VerticalSelectionHint">
                                <Storyboard>
                                    <SwipeHintThemeAnimation ToHorizontalOffset="0" TargetName="SelectionBackground" ToVerticalOffset="25" />
                                    <SwipeHintThemeAnimation ToHorizontalOffset="0" TargetName="ContentBorder" ToVerticalOffset="25" />
                                    <SwipeHintThemeAnimation ToHorizontalOffset="0" TargetName="SelectedCheckMark" ToVerticalOffset="25" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyph" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="HorizontalSelectionHint">
                                <Storyboard>
                                    <SwipeHintThemeAnimation ToHorizontalOffset="-25" TargetName="SelectionBackground" ToVerticalOffset="0" />
                                    <SwipeHintThemeAnimation ToHorizontalOffset="-25" TargetName="ContentBorder" ToVerticalOffset="0" />
                                    <SwipeHintThemeAnimation ToHorizontalOffset="-25" TargetName="SelectedCheckMark" ToVerticalOffset="0" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyph" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="NoSelectionHint" />
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Selecting">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectingGlyph" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyphBorder" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unselecting">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyphBorder" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unselected">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyphBorder" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedUnfocused">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="DragStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.650" To="NotDragging" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="NotDragging" />
                            <VisualState x:Name="Dragging">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="{StaticResource ListViewItemDragOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="InnerDragContent" />
                                    <DragItemThemeAnimation TargetName="InnerDragContent" />
                                    <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />
                                    <FadeOutThemeAnimation TargetName="SelectedBorder" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="DraggingTarget">
                                <Storyboard>
                                    <DropTargetItemThemeAnimation TargetName="OuterContainer" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MultipleDraggingPrimary">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MultiArrangeOverlayBackground" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MultiArrangeOverlayText" />
                                    <DoubleAnimation Duration="0" To="{StaticResource ListViewItemDragOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="InnerDragContent" />
                                    <FadeInThemeAnimation TargetName="MultiArrangeOverlayBackground" />
                                    <FadeInThemeAnimation TargetName="MultiArrangeOverlayText" />
                                    <DragItemThemeAnimation TargetName="InnerDragContent" />
                                    <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />
                                    <FadeOutThemeAnimation TargetName="SelectedBorder" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MultipleDraggingSecondary">
                                <Storyboard>
                                    <FadeOutThemeAnimation TargetName="ContentContainer" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ReorderHintStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.650" To="NoReorderHint" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="NoReorderHint" />
                            <VisualState x:Name="BottomReorderHint">
                                <Storyboard>
                                    <DragOverThemeAnimation Direction="Bottom" ToOffset="{StaticResource ListViewItemReorderHintOffset}" TargetName="ReorderHintContent" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="TopReorderHint">
                                <Storyboard>
                                    <DragOverThemeAnimation Direction="Top" ToOffset="{StaticResource ListViewItemReorderHintOffset}" TargetName="ReorderHintContent" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="RightReorderHint">
                                <Storyboard>
                                    <DragOverThemeAnimation Direction="Right" ToOffset="{StaticResource ListViewItemReorderHintOffset}" TargetName="ReorderHintContent" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="LeftReorderHint">
                                <Storyboard>
                                    <DragOverThemeAnimation Direction="Left" ToOffset="{StaticResource ListViewItemReorderHintOffset}" TargetName="ReorderHintContent" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="DataVirtualizationStates">
                            <VisualState x:Name="DataAvailable" />
                            <VisualState x:Name="DataPlaceholder">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PlaceholderTextBlock">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PlaceholderRect">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="ReorderHintContent" Background="Transparent">
                        <Path x:Name="SelectingGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemHighlightBrush2}" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15" />
                        <Border x:Name="ContentContainer">
                            <Grid x:Name="InnerDragContent">
                                <Border x:Name="HintGlyphBorder" HorizontalAlignment="Right" Height="40" Margin="4" Opacity="0" VerticalAlignment="Top" Width="40">
                                    <Path x:Name="HintGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckHintGlyphBrush2}" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15" />
                                </Border>
                                <Rectangle x:Name="PointerOverBorder" Fill="{StaticResource ListViewItemPointerOverBrush2}" IsHitTestVisible="False" Margin="1" Opacity="0" />
                                <Rectangle x:Name="FocusVisual" IsHitTestVisible="False" Opacity="0" Stroke="{StaticResource ListViewItemKeyboardFocusBrush}" StrokeThickness="2" />
                                <Rectangle x:Name="SelectionBackground" Fill="{StaticResource ListViewItemHighlightBrush2}" Margin="4" Opacity="0" />
                                <Border x:Name="ContentBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="4">
                                    <Grid>
                                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                        <TextBlock x:Name="PlaceholderTextBlock" Foreground="{x:Null}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Opacity="0" Text="Xg" />
                                        <Rectangle x:Name="PlaceholderRect" Fill="{StaticResource ListViewItemPlaceholderRectBrush}" IsHitTestVisible="False" Visibility="Collapsed" />
                                        <Rectangle x:Name="SelectedBorder" IsHitTestVisible="False" Opacity="0" Stroke="{StaticResource ListViewItemHighlightBrush2}" StrokeThickness="{StaticResource ListViewItemSelectedBorderThickness}" />
                                    </Grid>
                                </Border>
                                <Border x:Name="SelectedCheckMarkOuter" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="4" Padding="{TemplateBinding BorderThickness}" VerticalAlignment="Top">
                                    <Grid x:Name="SelectedCheckMark" Height="40" Opacity="0" Width="40">
                                        <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{StaticResource ListViewItemHighlightBrush2}" Stretch="Fill" />
                                        <Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckGlyphBrush2}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Stretch="Fill" VerticalAlignment="Top" Width="15" />
                                    </Grid>
                                </Border>
                                <Rectangle x:Name="MultiArrangeOverlayBackground" Fill="{StaticResource ListViewItemDragBackgroundBrush}" IsHitTestVisible="False" Margin="4" Opacity="0" />
                                <TextBlock x:Name="MultiArrangeOverlayText" HorizontalAlignment="Left" IsHitTestVisible="False" Margin="4" Opacity="0" TextWrapping="Wrap" Text="{Binding TemplateSettings.DragItemsCount, RelativeSource={RelativeSource Mode=TemplatedParent}}" VerticalAlignment="Top">
                                    <TextBlock.Style>
                                        <Style TargetType="TextBlock">
                                            <Setter Property="Foreground" Value="White" />
                                            <Setter Property="FontSize" Value="56" />
                                            <Setter Property="FontFamily" Value="{StaticResource ContentFontFamily}" />
                                            <Setter Property="FontWeight" Value="Light" />
                                            <Setter Property="HorizontalAlignment" Value="Left" />
                                            <Setter Property="VerticalAlignment" Value="Bottom" />
                                            <Setter Property="Margin" Value="12,0,0,0" />
                                            <Setter Property="TextWrapping" Value="Wrap" />
                                            <Setter Property="TextTrimming" Value="WordEllipsis" />
                                        </Style>
                                    </TextBlock.Style>
                                </TextBlock>
                            </Grid>
                        </Border>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>