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

Question

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

10

我在Inkscape中创建了一些资源，希望将它们用作Windows 8应用程序中的图标。我已经阅读了一些资料，似乎尽管.NET 4.5支持SVG，现代UI配置文件不支持。我使用这个工具将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"/>

可以做到吗？

- Chris Gonzales

什么是包含图像元素的XAML元素？如果从图像元素中删除宽度、高度和/或边距属性，纵横比会发生什么？ - Nathan

层次结构是<UserControl><Grid><Image />。不确定您所说的“纵横比”是什么意思？使用上述代码，我无法使图像显示出来。 - Chris Gonzales

如果我直接将这个添加到我的应用程序的XAML中，它会渲染，但比例完全不对。我是根据关于纵横比的那个短语进行调整的。当我第一次阅读您的问题时，我并不清楚您在使用图像源时是否完全无法显示它，尽管标题中已经很明显了... - Nathan

你看到了 https://dev59.com/dXNA5IYBdhLWcg3wEZaT 吗？ - Nathan

我看到了，但是可能没太理解。感谢你的帮助，Nathan。 - Chris Gonzales

2个回答

3

我很确定，你不能只是将Path Data注入到一个Image Source中，希望它能像通过Drawing对象一样奇迹般地工作。源。然而，你可以采用ContentControl来采纳你的 Path ，以相同的方式重复使用，而不必为每个实例都创建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}"/>

然而，您需要调整您的路径。它似乎设置了一个很大的尺寸，但希望这为您的情况提供了一个良好的选择。干杯！

- Chris W.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jared Bienz - MSFT · Accepted Answer

大多数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路径作为按钮艺术品的最简单方法的优秀文章。该文章在此处：

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