UWP XAML 自定义命令栏切换按钮

Question

我正在尝试为 CommandBar 创建一个自定义 AppBarToggleButton，它将仅使用 XAML ThemeResource 作为最喜欢/不喜欢按钮作出反应。我希望它将图标从OutlineStart 更改为SolidStar，并将按钮标签从Favorite 更改为Unfavorite，如下面的屏幕截图所示。 Exact result that I want to achieve is here.

这是其背后的代码：Github Gist

我的问题是，虽然此代码在 XAML Studio 应用程序中运行良好，但它会在 Visual Studio 2017 社区 中抛出 Uncaught exception。它在 Visual Studio 设计器中也能正常工作。

我知道我可以通过类似的代码实现同样的目的

private void ToggleFavorite_Checked(object sender, RoutedEventArgs e) {
    ToggleFavorite.Text = "Unfavorite";
    ToggleFavorite.Icon = new SymbolIcon(Symbol.SolidStar);
}
private void ToggleFavorite_Unchecked(object sender, RoutedEventArgs e) {
    ToggleFavorite.Text = "Favorite";
    ToggleFavorite.Icon = new SymbolIcon(Symbol.OutlineStar);
}

但这不是我想要的，我对 XAML 自定义很感兴趣，我想完全按照 XAML 风格来做。

我该怎么做才能让它在 Visual Studio 2017 中工作？

EDIT (05.03.2020)：修改我的代码后，我注意到 Visual Studio 将此行突出显示为错误

<Setter Target="Content.Foreground" Value="{ThemeResource AppBarToggleButtonForegroundPointerOver}"/>

发生这种情况是因为我在这里将 ContentPresenter 的名称从 Content 更改为 ViewboxContentPresenter

<Viewbox x:Name="ContentViewbox" AutomationProperties.AccessibilityView="Raw" HorizontalAlignment="Stretch" Height="{ThemeResource AppBarButtonContentHeight}" Margin="{ThemeResource AppBarButtonContentViewboxCollapsedMargin}">
    <ContentPresenter x:Name="ViewboxContentPresenter" Foreground="{TemplateBinding Foreground}">
        <ContentPresenter.Content>
            <SymbolIcon Symbol="OutlineStar" />
        </ContentPresenter.Content>
    </ContentPresenter>
</Viewbox>

所以，这就是Unhandled Exception 被抛出的原因。重命名所有这些设置器的目标后，一切都开始按预期工作。

Answer 1

您可以使用VisualStateManager 来实现您的要求。

使用StateTrigger 绑定AppBarToggleButton 的IsChecked 属性。 选中按钮后使用Setter设置属性。

<Grid>
        <CommandBar VerticalAlignment="Bottom">
            <AppBarToggleButton x:Name="toggleBtn" Icon="UnFavorite" Label="UnFavorite"/>
        </CommandBar>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="checkedbtn">
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{Binding ElementName=toggleBtn, Path=IsChecked}"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="toggleBtn.Icon" Value="Favorite"/>
                        <Setter Target="toggleBtn.Label" Value="Favorite"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>