Question

我在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"/>

可以这样做吗？

Answer 1

大多数AppBar按钮都基于StandardStyles中包含的名为AppBarButtonStyle的样式。

要自定义按钮的文本，请设置 AutomationProperties.Name 附加属性，以自定义设置内容属性的按钮中的图标，它也是出于可访问性原因，最好设置 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>

如上所述，要自定义图标，请设置内容属性。挑战在于如何设置内容以便显示自定义矢量图。

事实证明，您可以将任何路径Xaml（甚至是您的路径）放入 Viewbox 中以更改其比例。这是我的第一种方法，但它不起作用。实际上，似乎每次使用Xaml扩展表示法为按钮设置内容属性时它都不起作用。

<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

Answer 2

我非常肯定你不能只将Path Data注入Image Source并期望它神奇地工作，除非它通过{{3}对象为Drawing。您可以做的是将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}"/>

然而，你会想要玩你的那条道路。它似乎规模很大，但希望这为您的环境提供了一个很好的选择。干杯！

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

2 个答案: