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

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

这就是背后的代码。Github Gist

我的问题是,虽然这段代码在以下情况下工作正常 XAML工作室 应用程序,它将抛出 Uncaught exceptionVisual 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}"/>

这是因为我改了名字 ContentPresenterContentViewboxContentPresenter 此处

<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。

解决方案:

你可以使用 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>

给TA打赏
共{{data.count}}人
人已打赏
未分类

在React Native屏幕之间传递数据(从屏幕A到屏幕B再到屏幕C)。

2022-9-23 11:11:44

未分类

调整一个UIImage的大小而不把它完全载入内存?

2022-9-23 11:11:51

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索