如何使用XAML矢量图像作为图像源窗口8应用 [英] How to use xaml vector images as image source in window 8 app

问题描述

我创造了一些资产和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"/>

可以这样做？

Can this be done?

推荐答案

大多数AppBar按钮基于包含在StandardStyles称为AppBarButtonStyle风格。

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

要自定义按钮，将 AutomationProperties.Name 附加属性的文本，以自定义按钮的图标将内容的属性，这也是设置在 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>

正如上面提到的，可以自定义设置的内容属性的图标。我们面临的挑战是如何设定的内容，所以它会显示您的自定义矢量艺术。

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扩展标记设置内容为一个按钮，它不工作属性的任何时间。

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.

蒂姆·豪雅写了卓越的的文章使用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

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