来自图像的自定义 AppBarButton [英] Custom AppBarButton from image

问题描述

我正在逐步优化我的 xaml 以从图像创建自定义 AppBarButton.我已经从完整的自定义 xaml 布局转变为使用几行样式，但我知道我可以再简化这一步.

Step by step, I'm optimizing my xaml to create a custom AppBarButton from an image. I've gone from a complete custom xaml layout to using a few lines using styles, but I know I can simplify this one more step.

这是我目前拥有的:

<Style x:Key="PrintAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="PrintAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="Print"/>
</Style>

<Button Style="{StaticResource PrintAppBarButtonStyle}">
    <ContentControl>
        <Image Source="/Assets/AppBar/appbar_printer_dark.png"/>
    </ContentControl>
</Button>

我知道我可以将图像源移动到样式定义中，但我一直无法让它起作用.在阅读了 AppBarButton 类，我尝试将我的 TargetType 设置为 AppBarButton，然后设置一个 Icon 属性，但没有成功.类似于以下内容:

I know I can move the image source into the style definition, but I haven't been able to get this to work. After reading about the AppBarButton class, I tried to set my TargetType to AppBarButton and then set an Icon property, but was unsuccessful. Something like the following:

<Style x:Key="PrintAppBarButtonStyle" TargetType="AppBarButton" BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="PrintAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="Print"/>
    <Setter Property="Icon">
        <Setter.Value>
            // here it's expecting an IconElement
        </Setter.Value>
    </Setter>
</Style>

<Button Style="{StaticResource PrintAppBarButtonStyle}"/>

有什么建议吗?

推荐答案

Icon 属性不接受图像 -- 如果您需要使用图像，请坚持使用 Content 属性.也可以设置样式:

The Icon property does not accept an image -- if you need to use an image, stick with the Content property. That can also be styled:

<Style x:Key="PrintAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="PrintAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="Print"/>
    <Setter Property="Content">
        <Setter.Value>
            <ContentControl>
                <Image Source="/Assets/AppBar/appbar_printer_dark.png"/>
            </ContentControl>
        </Setter.Value>
    </Setter>
</Style>

---

作为解释，请注意ContentControl.Content"是 ContentProperty，这意味着子元素被设置为内容".即，这个:

---

By way of explanation, note that "ContentControl.Content" is the ContentProperty, which means that the child element gets set as "Content". Ie, this:

<Button Style="{StaticResource PrintAppBarButtonStyle}">
    <ContentControl>
        <Image Source="/Assets/AppBar/appbar_printer_dark.png"/>
    </ContentControl>
</Button>

只是这个的简写:

<Button Style="{StaticResource PrintAppBarButtonStyle}">
    <Button.Content>
        <ContentControl>
            <Image Source="/Assets/AppBar/appbar_printer_dark.png"/>
        </ContentControl>
    </Button.Content>
</Button>

这篇关于来自图像的自定义 AppBarButton的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！