Metro App Change ListView Selected Item Content Foreground

Question

I have a ListView and modified it's DataTemplate with 2 TextBlocks.

The first TextBlock contains a Heading, the second a Sub-Heading.

I style the 2 TextBlocks with different colours.

Here's an example of the ListViewItem in Normal view.

Here's an example of the ListViewItem in Selected view.

So my question is how do I change the Foreground colours of the TextBlocks in Selected views? Hoping to do this in the xaml. I've tried setting different brushes, which work for items that haven't explicitly been styled.

Not sure how to handle this scenario.

Answer 1

You can use visual states.

<ListView>
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <TextBlock x:Name="txtOne" Grid.Row="0" Foreground="Green"/>
                <TextBlock x:Name="txtTwo" Grid.Row="1" Foreground="Gray"/>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="SelectionStates">
                        <VisualState x:Name="Unselected"/>
                        <VisualState x:Name="Selected">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="txtOne" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="txtTwo" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Yellow"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Answer 2

You don't need to play with the visual state.

In your ResourceDictionary, set a value for these brushes "ListBoxItemSelectedBackgroundThemeBrush", "ListBoxItemSelectedPointerOverBackgroundThemeBrush", "ListBoxFocusBackgroundThemeBrush". It will override the default brushes of your application.

Example:

    <!-- Overrides default ListBox brushes -->
<SolidColorBrush x:Key="ListBoxItemSelectedBackgroundThemeBrush" Color="{StaticResource GreenColor}" />
<SolidColorBrush x:Key="ListBoxItemSelectedPointerOverBackgroundThemeBrush" Color="{StaticResource LightGreenColor}" />
<SolidColorBrush x:Key="ListBoxFocusBackgroundThemeBrush" Color="Transparent" />

Here is a usefull link when developping in WinRt, which references the brushes name, for the default controls of winRt.

WinRt default brushes names and values

Answer 3

Thanks to some researching and thinking out of the box, found a suitable solution that works:

Metro App ListView SelectedItem Selected VisualState

I can see this being handy for a couple of other scenarios as well.