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

【问题标题】：How to use xaml vector images as image source in Windows 8 app如何在 Windows 8 应用程序中使用 xaml 矢量图像作为图像源
【发布时间】：2013-01-25 12:11:49
【问题描述】：

我在inkscape 中创建了一些资产，并希望将它们用作Windows 8 应用程序中的图标。我已经阅读了一些内容，发现 .Net 4.5 支持 SVG，the modern ui profile does not。我使用 this tool. 将 svg 转换为 xaml

我得到以下 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 中，它会呈现，但是比例太差了。

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

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

这个可以吗？

【问题讨论】：

包含 image 元素的 xaml 元素是什么？如果从图像元素中删除宽度、高度和/或边距属性，纵横比会怎样？
层次结构是。不知道你所说的“纵横比”是什么意思？使用上面的代码，我根本无法显示图像。
“如果我直接将它添加到我的应用程序 xaml 中，它将呈现，但是比例很差。” - 我正在关闭关于纵横比的那句话。当我第一次阅读您的问题时，我并不清楚您在使用图像源时根本没有显示它 - 尽管标题中很清楚......
你看到stackoverflow.com/questions/1107334/…了吗？
我看到了，但我猜它没有点击。感谢内森的帮助。

标签： c# xaml windows-8 vector-graphics inkscape

【解决方案1】：

大多数 AppBar 按钮都基于 StandardStyles 中包含的一种样式，称为 AppBarButtonStyle。

要自定义设置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,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 中使用它：

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

开发支持、设计支持和更多精彩即将推出： http://bit.ly/winappsupport

【讨论】：

再次感谢贾里德。你总是在那里提醒我 XAML 是多么的棒。还有，我懂的太少了。我需要在 JVS 上花更少的时间，而在 XAML 上花更多的时间。
哇，从 OP 问题开始，我从来不知道它与按钮有任何关系哈哈
大声笑，好点克里斯 W！我想我做了一个假设，因为他说“图标”和图标通常用于按钮（尤其是 AppBar 按钮）。但同样的 DataTemplate 技巧可以在任何地方应用。通常你会看到人们使用 Viewbox 来缩放路径，但我的直觉告诉我 Viewbox 很昂贵。蒂姆豪雅展示的技巧看起来要轻得多。感谢您参与 SO 并帮助回答问题 Chris W.，我很感激。还有 Chris G.，一定要运用一些你必须赢得 8 的疯狂技能。:) 我认识的人已经赚了很多钱！

【解决方案2】：

我很肯定你不能只将PathData 注入Image Source 并期望它神奇地工作，除非它通过Drawing 对象作为Source。但是，您可以做的是将您的 Path 转换为 ContentControl 以便以相同的方式重复使用，而不必为每个实例都遇到 Drawing 对象的麻烦。

所以不是;

<Image Source="..."/>

只需做这样的事情，然后将其放入您的 Object.Resources 或 ResourceDictionary；

 <Style x:Key="YourThingy" TargetType="ContentControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">
                   <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" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

然后，只需将它放在您的视野中，随心所欲；

  <ContentControl Style="{StaticResource YourThingy}"/>

但是，您会想玩自己的路径。它似乎设置了一个大尺寸，但希望这为您的情况提供了一个很好的选择。干杯！

【讨论】：