我在 inkscape 中创建了一些 Assets ,并想将它们用作 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"/>
这可以做到吗?
最佳答案
大多数 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=""/>
</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
简而言之,您需要定义一个正确设置所有绑定(bind)的样式:
<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
关于c# - 如何在 Windows 8 应用程序中使用 xaml 矢量图像作为图像源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14794412/