如何在单独的视觉状态组中处理冲突的视觉状态设置器？

Question

假设我在 XAML ResourceDictionary（无代码隐藏）中定义了一个 RadioButton 样式：

<Style x:Key="ExampleRadioButtonStyle"
       TargetType="RadioButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <Grid x:Name="Root">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    ???
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <VisualState.Setters>
                                    <Setter Target="Content.Fill" Value="White" />
                                    <Setter Target="Content.Stroke" Value="Blue" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Unchecked">
                                <VisualState.Setters>
                                    <Setter Target="Content.Fill" Value="Transparent" />
                                    <Setter Target="Content.Stroke" Value="Black" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Ellipse x:Name="Content" 
                             StrokeThickness="5"/>
                </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

现在我想在 CommonStates.CurrentState 为 时更改 Content.Stroke 属性 PointerOver 指向：

青色当 CheckStates.CurrentState 为 Checked
Gray 当 CheckStates.CurrentState 为 Unchecked

实现该目标的最佳方法是什么？

请注意，这只是一个简化的例子，准备展示我的问题，实际上这个问题要复杂得多（例如，我需要处理所有 CommonStates），所以我寻找一个不错的解决方案，而不是一个简单的解决方法，只处理鼠标悬停行为。

Answer 1

根据你提供的代码，我们无法直接从中获取RadioButton的选中状态PointerOver.You可以按照原生样式，创建两个Ellipse，一个用于选中状态，一个用于unselected.Use 检查状态开关显示或 hideEllipse.Then 设置行程 PointerOver.For 示例：

<Ellipse x:Name="Content" Fill="{StaticResource RadioButtonOuterEllipseFill}" Height="20" StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" Stroke="{ThemeResource RadioButtonOuterEllipseStroke}" UseLayoutRounding="False" Width="20"/>
<Ellipse x:Name="CheckedContent" Fill="{ThemeResource RadioButtonOuterEllipseCheckedFill}" Height="20" Opacity="0" StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" Stroke="{ThemeResource RadioButtonOuterEllipseCheckedStroke}" UseLayoutRounding="False" Width="20"/>

当CheckStates.CurrentState为Checked时，可以显示CheckedContent和隐藏Content，UnChecked则相反。

<VisualStateGroup x:Name="CheckStates">
    <VisualState x:Name="Checked">
        <VisualState.Setters>
            <Setter Target="Content.Opacity" Value="0"></Setter>
            <Setter Target="CheckedContent.Opacity" Value="1"></Setter>
            <Setter Target="CheckedContent.Fill" Value="White" />
            <Setter Target="CheckedContent.Stroke" Value="Blue" />
        </VisualState.Setters>
    </VisualState>
    ......                                    
</VisualStateGroup>

然后你可以在PointerOver中为不同的状态设置描边。

<VisualState x:Name="PointerOver">
    <VisualState.Setters>
        <Setter Target="Content.Stroke" Value="Gray"></Setter>
        <Setter Target="CheckedContent.Stroke" Value="Cyan"></Setter>
    </VisualState.Setters>
</VisualState>

如何在单独的视觉状态组中处理冲突的视觉状态设置器？

How to handle conflicting Visual State Setters in separate Visual State Groups?

c#

xaml

uwp

uwp-xaml