c# – 如何在Windows 8应用程序中使用xaml矢量图像作为图像源

要自定义按钮的文本,您可以设置AutomationProperties.Name附加属性,以自定义按钮中的图标,您可以设置Content属性,并且为了辅助功能的原因设置AutomationProperties.AutomationId附加属性也是一个好主意.

以下是使用此方法定制的按钮的示例：

<Style x:Key="FolderButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="FolderAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="Folder"/>
    <Setter Property="Content" Value="&#xE188;"/>
</Style>

如上所述,要自定义图标,您可以设置Content属性.挑战是如何设置内容,以显示您的自定义矢量图.

事实证明,您可以将Xaml甚至您的任何路径放入Viewbox以更改其比例.这是我的第一个方法,但它不起作用.事实上,似乎任何时候你使用Xaml扩展符号来设置一个不起作用的按钮的Content属性.

<Style x:Key="SquareButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="AutomationProperties.AutomationId" Value="SquareAppBarButton"/>
<Setter Property="AutomationProperties.Name" Value="Square"/>
<Setter Property="Content">
    <Setter.Value>
        <!-- This square will never show -->
        <Rectangle Fill="Blue" Width="20" Height="20" />
    </Setter.Value>
</Setter>

我实际上认为这是一个错误,但幸运的是有一个解决方法.

Tim Heuer写了一篇关于使用Xaml Path作为按钮的艺术品的最简单的方法的优秀文章.那篇文章在这里：

http://timheuer.com/blog/archive/2012/09/03/using-vectors-as-appbar-button-icons.aspx

简而言之,您需要定义一个正确设置所有绑定的样式：

<Style x:Key="PathAppBarButtonStyle" BasedOn="{StaticResource AppBarButtonStyle}" TargetType="ButtonBase">
<Setter Property="ContentTemplate">
    <Setter.Value>
        <DataTemplate>
            <Path Width="20" Height="20" 
                Stretch="Uniform" 
                Fill="{Binding Path=Foreground,RelativeSource={RelativeSource Mode=TemplatedParent}}" 
                Data="{Binding Path=Content,RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
        </DataTemplate>
    </Setter.Value>
</Setter>

然后,您创建一个继承自该样式的样式,并粘贴到您的路径中.以下是您上面列出的作品的风格：

<Style x:Key="CrossButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource PathAppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="CrossAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="Cross"/>
    <Setter Property="Content" Value="M372.58272,251.77484z"/>
</Style>

最后,您可以在AppBar中使用它：

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

开发支持,设计支持和更好的善良方式：
http://bit.ly/winappsupport