Search code examples
gridviewwindows-store-appsvisualstatemanager

Windows Store App - Gridview background color for selected items


I've been googling all over for an answer to my question but none of the forums were able to provide an answer. I simply want to change the background color of items in a gridview after it has been selected. I have a Style definition in my App.xaml and I linked it to my ItemContainerStyle like this:

<GridView x:Name="gvwTests" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top"
    Width="998" Height="567" Margin="10,51,0,0" Padding="5,0,5,0"
    Background="#FF768E9C"
    ItemTemplate="{StaticResource testTemplate}"
    Style="{StaticResource PAGridViewStyle}" ItemContainerStyle="{StaticResource PAGridViewItemStyle}"
    IsDoubleTapEnabled="False" IsRightTapEnabled="False" SelectionMode="Multiple" SelectionChanged="GvwTests_SelectionChanged">
</GridView>

I generated a copy of the default style:

<Style x:Key="PAGridViewItemStyle" TargetType="GridViewItem">
    <Setter Property="Background" Value="#0077FF" />
    <Setter Property="Margin" Value="0 0 5 5"/>
    <Setter Property="Padding" Value="20 40 40 40" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewItem">
                <Border x:Name="OuterContainer">
                    ...
                    <VisualStateManager.VisualStateGroups>
                        ...
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Selecting">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="SelectionBackground"
                                                Storyboard.TargetProperty="Opacity"
                                                Duration="0"
                                                To="1" />
                                    <DoubleAnimation Storyboard.TargetName="SelectedBorder"
                                                Storyboard.TargetProperty="Opacity"
                                                Duration="0"
                                                To="1" />
                                    <DoubleAnimation Storyboard.TargetName="SelectingGlyph"
                                                Storyboard.TargetProperty="Opacity"
                                                Duration="0"
                                                To="1" />
                                    <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
                                                Storyboard.TargetProperty="Opacity"
                                                Duration="0"
                                                To="1" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
                                                            Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ColorAnimation Storyboard.TargetName="SelectionBackground"
                                                    Storyboard.TargetProperty="Color"
                                                    Duration="0:0:1"
                                                    From="Red" To="Beige" />
                                </Storyboard>
                            </VisualState>
                            ...
                        </VisualStateGroup>
                        ...
                    </VisualStateManager.VisualStateGroups>
                    ...
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I am no expert at this so I can't get the color to change when and item has been clicked or tapped.

How should I do this or what am I doing wrong?


Solution

  • Background color is easier to change in App.xaml as override:

    <Application.Resources>
      <ResourceDictionary>
        <SolidColorBrush x:Key="ListViewItemSelectedPointerOverBackgroundThemeBrush" Color="#56c2ff" />
        <SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderThemeBrush" Color="#56c2ff" />
        <SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="#56c2ff" />
        ...