Windows Store App - Gridview background color for selected items

1.3k views Asked by At

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?

2

There are 2 answers

3
crea7or On BEST ANSWER

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" />
    ...
1
Reynier Booysen On

Found a blog by Mike Taulty here that might help. You use Blend to change all the "inaccessible" styles. If you look at the XAML Blend generates it is actually makes more sense.