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

本文介绍了如何在 Windows 8 应用程序中使用 xaml 矢量图像作为图像源的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在inkscape 中创建了一些资源，并希望将它们用作Windows 8 应用程序中的图标.我读了一些书，发现虽然 .Net 4.5 支持 SVG，现代 ui 配置文件没有.我使用这个工具将 svg 转换为 xaml.

I created some assets in inkscape and would like to use them as icons in a windows 8 application. I have done some reading and it seams that while .Net 4.5 supports SVG, the modern ui profile does not. I converted the svg to xaml using this tool.

我得到以下 xaml.

I get the following xaml.

<Canvas xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="svg2997" Width="744.09448" Height="1052.3622" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <Canvas x:Name="layer1">
    <Path Fill="#FFCCCCCC" Stroke="#FF000000" StrokeThickness="1.34377062" StrokeMiterLimit="4" x:Name="path3007" Data="M372.58272,134.72445C167.96301,134.72445 2.06820310000001,300.58818 2.06820310000001,505.20789 2.06820310000001,709.8276 167.96301,875.72241 372.58272,875.72241 577.20243,875.72241 743.06616,709.8276 743.06616,505.20789 743.06616,300.58818 577.20243,134.72445 372.58272,134.72445z M280.73888,251.77484L455.94149,251.77484 455.94149,413.70594 628.16035,413.70594 628.16035,588.97071 455.94149,588.97071 455.94149,773.71514 280.73888,773.71514 280.73888,588.97071 106.22005,588.97071 106.22005,413.70594 280.73888,413.70594 280.73888,251.77484z" />
  </Canvas>
</Canvas>

如果我将它直接添加到我的应用程序 xaml 中，它会呈现但规模很远.

If I add this directly to my apps xaml it will render however the scale is way off.

如果可能，我想将其用作图像对象的图像源.

I would like to use this as an image source for an image object if possible.

<Image HorizontalAlignment="Left" Height="100" Margin="127,37,0,0" VerticalAlignment="Top" Width="100" Source="Assets/plus_circle.xaml"/>

这能做到吗?

推荐答案

大多数 AppBar 按钮都基于 StandardStyles 中称为 AppBarButtonStyle 的样式.

Most AppBar buttons are based on a style included in StandardStyles called AppBarButtonStyle.

要自定义设置AutomationProperties.Name 附加属性的按钮的文本，要自定义设置Content 属性的按钮中的图标，它也是一个出于可访问性原因，设置 AutomationProperties.AutomationId 附加属性的好主意.

To customize the text of the button you set the AutomationProperties.Name attached property, to customize the icon in the button you set the Content property, and it's also a good idea to set the AutomationProperties.AutomationId attached property for accessibility reasons.

以下是使用此方法自定义的按钮示例:

Here's an example of a button customized using this approach:

<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 属性.挑战在于您如何设置内容以使其显示您的自定义矢量图.

As mentioned above, to customize the icon you set the Content property. The challenge is how you set the content so it displays your custom vector art.

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

It turns out you can place any path Xaml, even yours, into a Viewbox to change its scale. That was my first approach, but it doesn't work. In fact, it seems any time you use Xaml expanded notation to set the Content property for a button it doesn't work.

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

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

I actually think this is a bug, but luckily there is a workaround.

Tim Heuer 写了一篇优秀的文章，介绍了使用 Xaml 路径作为按钮图稿的最简单方法.那篇文章在这里:

Tim Heuer wrote an excellent article on the simplest way to use a Xaml Path as the artwork for a button. That article is here:

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

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

In short, you need to define a style that sets up all the bindings correctly:

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

然后您创建一个从该样式继承的样式并粘贴到您的路径中.这是您在上面列出的艺术作品的风格:

Then you create a style that inherits from that style and you paste in your path. Here is the style for your artwork you listed above:

<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,134.72445C167.96301,134.72445 2.06820310000001,300.58818 2.06820310000001,505.20789 2.06820310000001,709.8276 167.96301,875.72241 372.58272,875.72241 577.20243,875.72241 743.06616,709.8276 743.06616,505.20789 743.06616,300.58818 577.20243,134.72445 372.58272,134.72445z M280.73888,251.77484L455.94149,251.77484 455.94149,413.70594 628.16035,413.70594 628.16035,588.97071 455.94149,588.97071 455.94149,773.71514 280.73888,773.71514 280.73888,588.97071 106.22005,588.97071 106.22005,413.70594 280.73888,413.70594 280.73888,251.77484z"/>
</Style>

最后，您可以像这样在 AppBar 中使用它:

And finally, you use it in your AppBar like this:

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

开发支持、设计支持和更多精彩:http://bit.ly/winappsupport

Dev support, design support and more awesome goodness on the way:http://bit.ly/winappsupport

这篇关于如何在 Windows 8 应用程序中使用 xaml 矢量图像作为图像源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！