AppBarToggleButton 第三种状态的 UWP 编辑样式

Question

AppBarToggleButton 有一个名为“IsThreeState”的属性，它可以绑定一个可为 null 的布尔值属性 bool? 就像复选框和切换按钮有 IsIndeterminate 属性一样。

我在为“generic.xaml”借用基本样式后编辑 AppBarToggleButton 的样式，但当 IsChecked="{x:Null }" 没有名为“IsThreeState”或类似名称的视觉状态，这与 togglebutton 和 checkbox 不同，它们具有专门用于“不确定”的视觉状态。如何编辑第三种状态的样式？

Answer 1

How can I edit the style for this third state?

您的描述是正确的，AppBarToggleButton没有这种不确定的视觉状态。所以我们不能为这第三个状态编辑样式。但是当 AppBarToggleButton 变成第三状态时，我们可以得到状态名称。我们可以监听 CurrentStateChanging for VisualStateGroup` 并打印当前状态名称。

private void AppBarToggleButton_Loaded(object sender, RoutedEventArgs e)
{

    IList<VisualStateGroup> list = VisualStateManager.GetVisualStateGroups(VisualTreeHelper.GetChild(sender as AppBarToggleButton, 0) as FrameworkElement);
    foreach (var v in list)
        if (v.Name == "CommonStates")
        {

            v.CurrentStateChanging += StateGroup1_CurrentStateChanging;

        }

}
private void StateGroup1_CurrentStateChanging(object sender, VisualStateChangedEventArgs e)
{
    Debug.WriteLine($"{e.OldState.Name}-{e.NewState.Name}");
}

我们可以找到第三个状态的匹配视觉状态是 CheckedPointerOver，我们可以为这个第三个状态编辑它。不幸的是，它只适用于点击行为，它不会响应IsChecked="{x:Null}"。

<VisualState x:Name="CheckedPointerOver">
    <VisualState.Setters>
        <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
        <Setter Target="ContentRoot.BorderBrush" Value="{ThemeResource AppBarToggleButtonRevealBorderBrushCheckedPointerOver}" />
        <Setter Target="Content.Foreground" Value="Yellow" />
        <Setter Target="TextLabel.Foreground" Value="Red" />
        <Setter Target="OverflowCheckGlyph.Foreground" Value="{ThemeResource AppBarToggleButtonCheckGlyphForegroundCheckedPointerOver}" />
        <Setter Target="AccentOverlayBackground.Fill" Value="{ThemeResource AppBarToggleButtonRevealBackgroundHighLightOverlayCheckedPointerOver}" />
        <Setter Target="CheckedHighlightBackground.Fill" Value="Orange" />
        <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarToggleButtonOverflowLabelForegroundCheckedPointerOver}" />
        <Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarToggleButtonKeyboardAcceleratorTextForegroundCheckedPointerOver}" />
        <Setter Target="CheckedHighlightBackground.Opacity" Value="1" />
        <Setter Target="OverflowCheckGlyph.Opacity" Value="1" />
    </VisualState.Setters>
</VisualState>

所以我们建议您使用 ToggleButton 代替 AppBarToggleButton。

AppBarToggleButton 第三种状态的 UWP 编辑样式

UWP Editing Style for 3rd state of AppBarToggleButton

c#

xaml

styling

togglebutton

uwp