UWP中Button.ContentTemplate内VisualStateManager不生效问题求助

你当前的代码无法触发TextBlock前景色变更的核心原因是：PointerOver 视觉状态定义在Button内部内容的Grid中，Button作为父控件会优先捕获指针输入事件，导致内部Grid的PointerOver状态不会被触发，因此对应的Setter不生效。

方案1：修改Button控件模板（推荐） #

将前景色的变更逻辑统一放到Button的视觉状态中管理，利用依赖属性的继承特性自动传递给内部的TextBlock：

1. 修改ButtonTemplate，新增默认状态和悬停状态下ContentPresenter的Foreground设置
2. 删除内容DataTemplate中TextBlock硬编码的Foreground="Yellow"属性，以及冗余的内部Grid视觉状态代码

修改后的代码示例：

<ControlTemplate x:Key="ButtonTemplate" TargetType="ContentControl">
    <Grid Background="Transparent" x:Name="Mini">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <!-- 默认状态下设置内容前景色为黄色 -->
                    <VisualState.Setters>
                        <Setter Target="MiniContent.Foreground" Value="Yellow" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Target="Mini.Background" Value="Red" />
                        <!-- 悬停时设置内容前景色为绿色 -->
                        <Setter Target="MiniContent.Foreground" Value="Green" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <ContentPresenter x:Name="MiniContent" />
    </Grid>
</ControlTemplate>

<DataTemplate x:Key="ListItemTemplate" x:DataType="local:DataModel">
    <Button Template="{StaticResource ButtonTemplate}">
        <Button.ContentTemplate>
            <DataTemplate x:DataType="local:DataModel">
                <UserControl>
                    <Grid>
                        <TextBlock
                            Text="{x:Bind DisplayName, Mode=OneWay}"/>
                        <Image
                            Width="16"
                            Source="{x:Bind ImageBitmap, Mode=OneWay}"/>
                    </Grid>
                </UserControl>
            </DataTemplate>
        </Button.ContentTemplate>
    </Button>
</DataTemplate>

<ItemsControl
ItemTemplate="{StaticResource ListItemTemplate}"
ItemsSource="{x:Bind DataModelVector, Mode=OneWay}" />

方案2：使用数据触发器绑定父Button状态 #

如果不需要修改现有Button模板，可以直接在TextBlock的样式中添加触发器，监听父Button的IsPointerOver属性实现状态变更：

<TextBlock
    Text="{x:Bind DisplayName, Mode=OneWay}">
    <TextBlock.Style>
        <Style TargetType="TextBlock">
            <Setter Property="Foreground" Value="Yellow" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsPointerOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True">
                    <Setter Property="Foreground" Value="Green" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>

使用该方案同样需要删除原来内部Grid中定义的VisualStateManager相关冗余代码。

内容的提问来源于stack exchange，提问作者aditya