带自定义图像的UWP命令栏

Question

我是UWP应用程序开发的新手。我想在我的应用主页面下添加一个带有自定义图标的命令栏。任何人都可以建议我如何做到这一点。我想在命令栏中添加的图片如下：

Answer 1

BitmapIcon可让您创建图片AppBarButton图标。用法如下：

<CommandBar>
    <AppBarButton Label="Command">
        <AppBarButton.Icon>
            <BitmapIcon UriSource="/Assets/image.png" />
        </AppBarButton.Icon>
    </AppBarButton>
</CommandBar>

然而，问题是，图像的颜色会根据主题更改为默认系统应用栏图标颜色：

如果要添加颜色，则需要将Foreground的{​​{1}}属性设置为所需的颜色：

BitmapIcon

以下给出了您要求的布局：

<AppBarButton Label="Command">
    <AppBarButton.Icon>
        <BitmapIcon Foreground="DarkOrange" UriSource="/Assets/image.png" />
    </AppBarButton.Icon>
</AppBarButton>

彩色图标图像

最后，如果您的图标有多种颜色并且<CommandBar> <AppBarButton Label="Command"> <AppBarButton.Icon> <BitmapIcon Foreground="DarkOrange" UriSource="/Assets/image.png" /> </AppBarButton.Icon> </AppBarButton> <AppBarButton Label="Command"> <AppBarButton.Icon> <BitmapIcon Foreground="SteelBlue" UriSource="/Assets/image.png" /> </AppBarButton.Icon> </AppBarButton> <AppBarButton Label="Command"> <AppBarButton.Icon> <BitmapIcon Foreground="DimGray" UriSource="/Assets/image.png" /> </AppBarButton.Icon> </AppBarButton> </CommandBar> 只有一种颜色这一事实不适合您，该怎么办？

为此，您必须使用BitmapIcon属性，然后修改创建自定义样式以使用Content而不是Content：

Icon

然后我制作了默认样式的副本（在Visual Studio中打开了<AppBarButton Style="{StaticResource ImageAppBarButtonStyle}" Label="Command"> <AppBarButton.Content> <Image Source="/Assets/appbaricon.png" /> </AppBarButton.Content> </AppBarButton> 窗口，右键单击Document Outline，选择编辑模板然后修改副本。将AppBarButton中的TemplateBinding从ContentPresenter更改为Icon所需的唯一更改：

Content

完整的风格是：

<ContentPresenter x:Name="Content" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" Height="20"/>