How can we change the foreground color on point hover in a listview binded with two textblock of the different foreground colors?

Question

I am using this style

        <Style x:Key="ListViewItemContainerStyle"
           TargetType="ListViewItem">
        <Setter Property="FontFamily"
                Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize"
                Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="Background"
                Value="{ThemeResource ListViewItemBackground}" />
        <Setter Property="Foreground"
                Value="{ThemeResource ListViewItemForeground}" />
        <Setter Property="TabNavigation"
                Value="Local" />
        <Setter Property="IsHoldingEnabled"
                Value="True" />
        <Setter Property="Padding"
                Value="0,0,12,0" />
        <Setter Property="HorizontalContentAlignment"
                Value="Left" />
        <Setter Property="VerticalContentAlignment"
                Value="Center" />
        <Setter Property="MinWidth"
                Value="{ThemeResource ListViewItemMinWidth}" />
        <Setter Property="MinHeight"
                Value="{ThemeResource ListViewItemMinHeight}" />
        <Setter Property="AllowDrop"
                Value="False" />
        <Setter Property="UseSystemFocusVisuals"
                Value="{StaticResource UseSystemFocusVisuals}" />
        <Setter Property="FocusVisualMargin"
                Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <ListViewItemPresenter x:Name="Root"
                                           CheckBrush="{ThemeResource ListViewItemCheckBrush}"
                                           ContentMargin="{TemplateBinding Padding}"
                                           CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
                                           ContentTransitions="{TemplateBinding ContentTransitions}"
                                           CheckMode="{ThemeResource ListViewItemCheckMode}"
                                           DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                                           DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                                           DragBackground="{ThemeResource ListViewItemDragBackground}"
                                           DragForeground="{ThemeResource ListViewItemDragForeground}"
                                           FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
                                           FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                                           FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
                                           HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                           Control.IsTemplateFocusTarget="True"
                                           PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
                                           PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
                                           PointerOverForeground="{StaticResource ListViewSelectedFGColor}"
                                           PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
                                           RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"
                                           ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                                           RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}"
                                           RevealBackground="{ThemeResource ListViewItemRevealBackground}"
                                           SelectedForeground="{StaticResource ListViewSelectedFGColor}"
                                           SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
                                           SelectedPointerOverBackground="{StaticResource ListViewSelectedBGColor }"
                                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <VisualState.Setters>
                                        <Setter Target="Root.Foreground"
                                                Value="{Binding PrimaryTextColor}"/>
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Target="Root.RevealBackground"
                                                Value="{StaticResource ListViewSelectedBGColor}" />
                                        <Setter Target="Root.RevealBorderBrush"
                                                Value="{StaticResource ListViewSelectedBGColor}" />
                                        <Setter Target="Root.Foreground"
                                                Value="{StaticResource ListViewSelectedFGColor}"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)"
                                                Value="PointerOver" />
                                        <Setter Target="Root.RevealBackground"
                                                Value="{StaticResource ListViewSelectedBGColor}" />
                                        <Setter Target="Root.Foreground"
                                                Value="{StaticResource ListViewSelectedFGColor}"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PointerOverSelected">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)"
                                                Value="PointerOver" />
                                        <Setter Target="Root.RevealBackground"
                                                Value="{StaticResource ListViewSelectedBGColor}" />
                                        <Setter Target="Root.RevealBorderBrush"
                                                Value="{StaticResource ListViewSelectedBGColor}" />
                                        <Setter Target="Root.Foreground"
                                                Value="{StaticResource ListViewSelectedFGColor}"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PointerOverPressed">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)"
                                                Value="Pressed" />
                                        <Setter Target="Root.RevealBorderBrush"
                                                Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)"
                                                Value="Pressed" />
                                        <Setter Target="Root.RevealBackground"
                                                Value="{StaticResource ListViewSelectedBGColor}" />
                                        <Setter Target="Root.Foreground"
                                                Value="{StaticResource ListViewSelectedFGColor}"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PressedSelected">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)"
                                                Value="Pressed" />
                                        <Setter Target="Root.RevealBackground"
                                                Value="{StaticResource ListViewSelectedBGColor}" />
                                        <Setter Target="Root.Foreground"
                                                Value="{StaticResource ListViewSelectedFGColor}"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="DisabledStates">
                                <VisualState x:Name="Enabled" />
                                <VisualState x:Name="Disabled">
                                    <VisualState.Setters>
                                        <Setter Target="Root.RevealBorderThickness"
                                                Value="0" />
                                        <Setter Target="Root.Foreground"
                                                Value="{Binding PrimaryTextColor}"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </ListViewItemPresenter>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

ItemSource of this listview is binded to a usercontrol which has two textblocks. Now I need to set two different foreground color for these textblocks but i can't do this using this style. Only one foreground can be applied by setting foreground color in Normal VisualState and changing it in PointerOver VisualState.

UserControl code is below :

          <TextBlock Text="{x:Bind ViewModel.Name,Mode=TwoWay}"
                            FontSize="12"
                            x:Uid="UserNameFGColor"
                            Grid.Row="0"
                            TextTrimming="CharacterEllipsis"
                            TextAlignment="Left"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Left">
                </TextBlock>

                <TextBlock Grid.Row="1"
                            HorizontalAlignment="Left"
                            TextAlignment="Left"
                            x:Name="CustomStatusFGColor"
                            Text="{x:Bind ViewModel.CustomStatus,Mode=TwoWay}"
                            FontSize="11" Width="180">
                </TextBlock>

and ListView code is this

                    <ListView ItemContainerStyle="{StaticResource ListViewItemContainerStyle}"
                          Grid.Row="1"
                          Margin="0,5,0,20"
                          CanDragItems="True"
                          AllowDrop="True"
                          CanReorderItems="True"
                          ItemClick="{x:Bind ViewModel.OpenPinnedChatListItemClick}">                        
                </ListView>


      

Answer 1

You could create two VisualState in the usercontrol where you placed the two TextBlock. And go to these states when pointer enters or exits the TextBlock.

Xaml:

    <Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="ValueStates">
            <VisualState x:Name="NoChange">
                <Storyboard>
                    <ColorAnimation To="Black"
                                Storyboard.TargetName="MyTextBlock" 
                                Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"/>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Change">
                <Storyboard>
                    <ColorAnimation To="Red"
                                Storyboard.TargetName="MyTextBlock" 
                                Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"/>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <TextBlock Text="Yes" x:Name="MyTextBlock" Foreground="Black" PointerEntered="MyTextBlock_PointerEntered" PointerExited="MyTextBlock_PointerExited"/>
</Grid>

Code-behind:

 private void MyTextBlock_PointerEntered(object sender, PointerRoutedEventArgs e)
    {
        bool result = VisualStateManager.GoToState(this, "Change", false);
    }

    private void MyTextBlock_PointerExited(object sender, PointerRoutedEventArgs e)
    {
        bool result = VisualStateManager.GoToState(this, "NoChange", false);
    }