UWP XAML矢量图形

Question

我有一些基于矢量的XAML格式的图形，我想在我的UWP应用程序中使用。我知道我可以使用Sergoe创建图标，但不幸的是，我需要不同的UI图标。我跟踪了在这里找到的帖子：Inkscape (矢量图形)

使用AI创建了一些图标，并使用扩展将它们导出到XAML。然而，每次我设置按钮内容时，应用程序都会崩溃：Windows.UI.Xaml.Markup.XamlParseException

下面是我使用的资源字典：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp">

    <Viewbox Width="29.264" Height="28.345" x:Key="settingsIcon">
        <Canvas Width="29.264" Height="28.345">
            <Canvas>
                <!-- Layer 2/<Compound Path> -->
                <Path StrokeThickness="0.5" Stroke="#ff000000" StrokeMiterLimit="1.0" Fill="#ffffffff" Data="F1 M 14.533,21.423 C 10.533,21.423 7.233,18.123 7.233,14.123 C 7.233,10.123 10.533,6.823 14.533,6.823 C 18.533,6.823 21.833,10.123 21.833,14.123 C 21.833,18.123 18.533,21.423 14.533,21.423 Z M 24.833,14.123 C 24.833,13.423 24.733,12.823 24.633,12.223 L 28.733,10.223 L 27.133,6.823 L 23.233,8.723 C 22.433,7.423 21.333,6.323 20.033,5.523 L 21.533,1.623 L 18.133,0.323 L 16.633,4.223 C 15.933,4.023 15.233,4.023 14.433,4.023 C 13.733,4.023 12.933,4.123 12.233,4.223 L 10.733,0.323 L 7.433,1.523 L 8.933,5.423 C 7.633,6.323 6.533,7.423 5.733,8.723 L 1.933,6.823 L 0.333,10.223 L 4.433,12.123 C 4.333,12.723 4.233,13.423 4.233,14.023 C 4.233,14.723 4.333,15.323 4.433,16.023 L 0.333,18.023 L 1.933,21.423 L 5.833,19.623 C 6.633,20.923 7.733,22.023 9.033,22.823 L 7.533,26.723 L 10.933,28.023 L 12.433,24.123 C 13.133,24.223 13.833,24.323 14.633,24.323 C 15.433,24.323 16.133,24.223 16.833,24.123 L 18.333,28.023 L 21.733,26.723 L 20.233,22.823 C 21.533,22.023 22.633,20.923 23.433,19.623 L 27.333,21.523 L 28.933,18.123 L 24.833,16.123 C 24.733,15.423 24.833,14.823 24.833,14.123 Z"/>
            </Canvas>
        </Canvas>
    </Viewbox>
</ResourceDictionary>

Answer 1

正确地这样做确实是一项挑战。当我想在WPF和UWP中使用向量XAML时，我偶然发现了这个问题。

我走的路线就像杰登提到的，只是有点不同。矢量图像的主要部分也是最重要的输入部分是矢量数据.我只在资源字典中保存带有键的sys:String中的数据。

    <sys:String x:Key="tb_plus">M15,0 L17,0 17,15.000008 32,15.000008 32,17.000008 17,17.000008 17,32 15,32 15,17.000008 0,17.000008 0,15.000008 15,15.000008 z</sys:String>

这给了我在WPF和UWP中使用它的能力。在我看来，我使用一个自定义控件(在我的例子中是一个按钮或切换按钮)来创建图像。例如，工具按钮：

<Style TargetType="{x:Type Button}" x:Key="ToolButtonIconOnlyStyle">
    <Setter Property="Height" Value="26"/>
    <Setter Property="Width" Value="26"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Margin" Value="1"/>
    <Setter Property="ToolTipService.ShowDuration" Value="60000"/>
    <Setter Property="ToolTipService.InitialShowDelay" Value="0"/>
    <Setter Property="Background" Value="{StaticResource Background_Light}"/>
    <Setter Property="BorderBrush" Value="{x:Null}"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Foreground" Value="{StaticResource Accent_Color}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" SnapsToDevicePixels="True" UseLayoutRounding="True" d:DesignUseLayoutRounding="True">
                    <Grid UseLayoutRounding="True" d:DesignUseLayoutRounding="True" Background="{TemplateBinding Background}">
                        <Canvas Margin="0">
                            <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
                                <Path Fill="{TemplateBinding Foreground}" Opacity="{TemplateBinding Opacity}" Stretch="Uniform" Width="{TemplateBinding Width, Converter={StaticResource PercentageOfDoubleConverter}, ConverterParameter=65}" Height="{TemplateBinding Height, Converter={StaticResource PercentageOfDoubleConverter}, ConverterParameter=65}" Margin="0" RenderTransformOrigin="0.5,0.5" Data="{TemplateBinding Content, Converter={StaticResource StringToGeometryConverter}}" />
                            </Grid>
                        </Canvas>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Foreground" Value="White" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="LightGray" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这是按钮：

<Button Margin="0,5" Width="36" Height="36" Background="{StaticResource Background_Dark}" Content="{StaticResource tb_plus}" Style="{DynamicResource ToolButtonIconOnlyStyle}"/>

如您所见，我将向量-数据设置为按钮的内容-属性，样式将其转换为可见图像。

这段代码来自我的WPF项目，所以样式需要进行一些调整才能在UWP中使用，但是您知道了。

Answer 2

ResourceDictionary和Windows通常支持这些对象以供共享使用：

• 样式和模板(风格和从FrameworkTemplate派生的类)
• 刷子和颜色(从刷子和颜色值派生出来的类)
• 动画类型，包括故事板
• 转换(从GeneralTransform派生的类)
• 矩阵与Matrix3D
• 点值
• 某些其他与UI相关的结构，如厚度和CornerRadius
• XAML内在数据类型

有关更多信息，请参见ResourceDictionary。

在您的邮政编码中，您将ViewBox放在ResourceDictionary中。这种用法是不正确的。

您可以在Viewbox中设置DataTemplate。并在ContentTemplate of Button中使用。

例如：

在ResourceDictionary中：

<DataTemplate x:Key="ButtonTemplate">
    <Viewbox Width="29.264" Height="28.345">
        <Canvas Width="29.264" Height="28.345">
            <Canvas>
                <Path StrokeThickness="0.5" Stroke="#ff000000" StrokeMiterLimit="1.0" Fill="#ffffffff" Data="F1 M 14.533,21.423 C 10.533,21.423 7.233,18.123 7.233,14.123 C 7.233,10.123 10.533,6.823 14.533,6.823 C 18.533,6.823 21.833,10.123 21.833,14.123 C 21.833,18.123 18.533,21.423 14.533,21.423 Z M 24.833,14.123 C 24.833,13.423 24.733,12.823 24.633,12.223 L 28.733,10.223 L 27.133,6.823 L 23.233,8.723 C 22.433,7.423 21.333,6.323 20.033,5.523 L 21.533,1.623 L 18.133,0.323 L 16.633,4.223 C 15.933,4.023 15.233,4.023 14.433,4.023 C 13.733,4.023 12.933,4.123 12.233,4.223 L 10.733,0.323 L 7.433,1.523 L 8.933,5.423 C 7.633,6.323 6.533,7.423 5.733,8.723 L 1.933,6.823 L 0.333,10.223 L 4.433,12.123 C 4.333,12.723 4.233,13.423 4.233,14.023 C 4.233,14.723 4.333,15.323 4.433,16.023 L 0.333,18.023 L 1.933,21.423 L 5.833,19.623 C 6.633,20.923 7.733,22.023 9.033,22.823 L 7.533,26.723 L 10.933,28.023 L 12.433,24.123 C 13.133,24.223 13.833,24.323 14.633,24.323 C 15.433,24.323 16.133,24.223 16.833,24.123 L 18.333,28.023 L 21.733,26.723 L 20.233,22.823 C 21.533,22.023 22.633,20.923 23.433,19.623 L 27.333,21.523 L 28.933,18.123 L 24.833,16.123 C 24.733,15.423 24.833,14.823 24.833,14.123 Z" />
            </Canvas>
        </Canvas>
    </Viewbox>
</DataTemplate>

在XAML中：

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="MyVectorGraphic.xaml"></ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button  ContentTemplate="{StaticResource ButtonTemplate}">
    </Button>
</Grid>