在绑定了两个不同前景颜色的文本块的列表视图中，如何更改点悬停时的前景颜色

Question

我使用的是这种风格的

<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绑定到一个具有两个文本块的用户控件。现在我需要为这些文本块设置两种不同的前景色，但我不能使用这种风格。通过在Normal VisualState中设置前景颜色，只能应用一个前景并在PointerOver VisualState中对其进行更改。

UserControl代码如下：

<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>

ListView代码就是这个

<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

您可以在放置两个TextBlock的用户控件中创建两个VisualState。当指针进入或退出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>

代码背后：

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