How to change the Foreground Color of ListView Selected Item

Question

I have a ListView where I am changing the foreground color of selected item:

<ListView ItemsSource="{Binding Levels}" 
                          x:Name="LvLevels" SelectionChanged="LvLevels_SelectionChanged">

    <ListView.ItemContainerStyle>
       <Style TargetType="ListViewItem">
          <Setter Property="Template">
              <Setter.Value>
                 <ControlTemplate TargetType="ListViewItem">
                    <Grid>                                               
                      <VisualStateManager.VisualStateGroups>
                         <VisualStateGroup x:Name="CommonStates">
                             <VisualState x:Name="Normal"/>
                         </VisualStateGroup>
                         <VisualStateGroup x:Name="SelectionStates">
                              <VisualState x:Name="Unselected">
                                 <Storyboard>
                                   <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Red"/>                                                                
                                 </Storyboard>
                              </VisualState>
                              <VisualState x:Name="SelectedUnfocused">
                                 <Storyboard>
                                   <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#16C8E0"/>
                                 </Storyboard>
                               </VisualState>
                             </VisualStateGroup>
                          </VisualStateManager.VisualStateGroups>
                          <Border x:Name="myback" Background="Transparent">
                            <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                          </Border>
                        </Grid>
                      </ControlTemplate>
                   </Setter.Value>
                 </Setter>
               </Style>
            </ListView.ItemContainerStyle>

    <ListView.ItemTemplate>
       <DataTemplate>
           <Grid>
              <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto" />
                 <ColumnDefinition Width="*" />
              </Grid.ColumnDefinitions>

              <Image Grid.Column="0" Source="../Assets/icons/uno.png"
                     Margin="10 0 0 0"/>
              <TextBlock x:Name="tblock" Text="{Binding}" Grid.Column="1" FontSize="30" />                      
          </Grid>
       </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

How can I change the foreground color of TextBlock of selected item in my case ?

I have tried to use:

<ColorAnimation Duration="0" Storyboard.TargetName="tblock" 
   Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" 
   To="White"/>

but got the exception:

Exception = {"No installed components were detected.\r\n\r\nCannot resolve TargetName tblock."}

Jan Hamrský Jan Hamrský · Accepted Answer · 2015-05-16T08:58:39

You are getting the exception because style for ListViewItem cannot know about the structure/elements in its item template.
The easiest way is to redefine the ListViewItem container style. You need to specify also VisualState for "Selected" state within "SelectionStates". There you can animate foreground property of some element (ContentPresenter does not have it, so I used ContentControl).

        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="contentControl" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" To="GreenYellow"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unselected">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Red"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedUnfocused">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#16C8E0"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="myback" Background="Transparent">
                                    <ContentControl x:Name="contentControl" Foreground="{TemplateBinding Foreground}" Content="{TemplateBinding Content}"  ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.ItemContainerStyle>

How to change the Foreground Color of ListView Selected Item

1 Answers