我們如何在與不同前景 colors 的兩個文本塊綁定的列表視圖中更改點 hover 的前景色？

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 中更改前景色，只能應用一個前景。

用戶控制代碼如下：

          <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 時，go 變為這些狀態。

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