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

Question

我试图为CommandBar创建一个自定义的AppBarToggleButton，它的反应将是 最喜欢的不喜欢的 按钮，只使用XAML ThemeResource。我想让它把图标从 OutlineStart 到 SolidStar 和按钮标签从 Favorite 到 Unfavorite 如我的截图所示。我想达到的具体效果在这里.

这就是背后的代码。Github Gist

我的问题是，虽然这段代码在以下情况下工作正常 XAML工作室 应用程序，它将抛出 Uncaught exception 在 Visual Studio 2017社区. 它也可以在 视觉工作室 设计师。

我知道，我可以通过类似于

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?

编辑 (05.03.2020): 在修改我的代码后，我注意到 视觉工作室 突出显示这一行为错误

<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 被抛出。在重命名了所有这些setters的目标后，一切都开始按照预期工作了，我想为CommandBar创建一个自定义的AppBarToggleButton，它将作为favoriteunfavorite按钮，只使用XAML ThemeResource。

Answer 1

你可以使用 VisualStateManager 以达到您的要求。

使用 StateTrigger 捆绑 AppBarToggleButton's 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>