How to change the Foreground Color of ListView Selected Item

demas

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ý

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to change the Foreground Color of ListView Selected Item

From Dev

How to change selected listview item color

From Dev

How do I change the color of a selected item on a ListView?

From Dev

Android ListView. How to change background color of manually selected item

From Dev

How to change color of the selected ListView item [WP8.1]

From Dev

How to change Highlight color of the selected ListView item in UWP (Windows 10)

From Dev

how to change color of list item when it is selected in listview?

From Dev

Change background color and font color of selected item in listview

From Dev

How to change style of Selected ListView Item in UWP

From Dev

How to change style of Selected ListView Item in UWP

From Dev

In a WinJS Windows 8 app, how can I change the highlight color of the selected item in a listview?

From Dev

How can I change default background color of a selected ListView item in Android?

From Dev

xamarin forms: Couldn't change the background color of selected item on ListView

From Dev

Change color of ListView Selected Item and also change different color to non selected Items

From Dev

How to change the text color of a ListView item?

From Dev

How change color of specific item of listview?

From Dev

How to change Listbox item color from selected Item(object)?

From Dev

How to set ListView selected item alternet text color in android

From Dev

How to color selected item of ListView on android at onListItemClick method

From Dev

How to change listview item text color and image color from handler

From Dev

Change imageview for selected item in listview

From Dev

Listview change appearance for selected item

From Dev

NavigationView(Change Color of Selected Item)

From Dev

How can I change automatically the selected item in a ListView?

From Dev

How to change default selected focused background color in ListView in UWP?

From Dev

How to change color of icon of selected item in material drawer?

From Dev

Android - how to change the background color of the selected item in a dropdown

From Dev

How can I change the color of the selected item in a menu?

From Dev

How to Change the list selected item color in the navidgation drawer?

Related Related

  1. 1

    How to change the Foreground Color of ListView Selected Item

  2. 2

    How to change selected listview item color

  3. 3

    How do I change the color of a selected item on a ListView?

  4. 4

    Android ListView. How to change background color of manually selected item

  5. 5

    How to change color of the selected ListView item [WP8.1]

  6. 6

    How to change Highlight color of the selected ListView item in UWP (Windows 10)

  7. 7

    how to change color of list item when it is selected in listview?

  8. 8

    Change background color and font color of selected item in listview

  9. 9

    How to change style of Selected ListView Item in UWP

  10. 10

    How to change style of Selected ListView Item in UWP

  11. 11

    In a WinJS Windows 8 app, how can I change the highlight color of the selected item in a listview?

  12. 12

    How can I change default background color of a selected ListView item in Android?

  13. 13

    xamarin forms: Couldn't change the background color of selected item on ListView

  14. 14

    Change color of ListView Selected Item and also change different color to non selected Items

  15. 15

    How to change the text color of a ListView item?

  16. 16

    How change color of specific item of listview?

  17. 17

    How to change Listbox item color from selected Item(object)?

  18. 18

    How to set ListView selected item alternet text color in android

  19. 19

    How to color selected item of ListView on android at onListItemClick method

  20. 20

    How to change listview item text color and image color from handler

  21. 21

    Change imageview for selected item in listview

  22. 22

    Listview change appearance for selected item

  23. 23

    NavigationView(Change Color of Selected Item)

  24. 24

    How can I change automatically the selected item in a ListView?

  25. 25

    How to change default selected focused background color in ListView in UWP?

  26. 26

    How to change color of icon of selected item in material drawer?

  27. 27

    Android - how to change the background color of the selected item in a dropdown

  28. 28

    How can I change the color of the selected item in a menu?

  29. 29

    How to Change the list selected item color in the navidgation drawer?

HotTag

Archive