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>

Roy Li - MSFT · Accepted Answer · 2022-01-18 05:38:27Z

0

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);
    }

answered Jan 18, 2022 at 5:38

Roy Li - MSFT

8,6991 gold badge10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Laxmi Over a year ago

It requires changes in code behind. Isn't there any way to do it using Style? I need to also keep that color if that item is selected.

Roy Li - MSFT Over a year ago

@Laxmi No, because the TextBlock does not have a style.

Laxmi Over a year ago

Then how can I change foreground color of textblock when that item is selected like you suggest for pointhover. is there any way to do that using code behind ?

Roy Li - MSFT Over a year ago

@Laxmi I have to say that since there is no selected event or status for TextBlock, you still need to add states. Then in the selected event, find the selected and call the VisualStateManager.GoToState()

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related