UWP XAML 矢量图形答案

【问题标题】：UWP XAML Vector GraphicUWP XAML 矢量图形
【发布时间】：2017-10-16 05:11:57
【问题描述】：

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

使用 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>

【问题讨论】：

您是从 AI 中将 xaml 导出为 Silverlight 还是 WPF xaml？ Silverlight XAML 应该可以工作。虽然我不确定技术差异是什么以及为什么在出口上有两种选择。此外，通常只需要您的 Path，vector 并不关心 ViewBox。
WPF，我会尝试导出为 Silverlight。
没有什么不同。实际上似乎也没有区别。
我继续删除我之前的答案。听起来这里发生的事情比眼前看到的要多。
为什么 Silverlight 或 WPF Xaml 可以工作？ -- 它们都有不同于 UWP 中可用的控件。

标签： c# xaml win-universal-app

【解决方案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 中使用，但你明白了。

【讨论】：

【解决方案2】：

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

样式和模板（Style 和从 FrameworkTemplate 派生的类）

画笔和颜色（从画笔和颜色值派生的类）

动画类型，包括故事板

变换（从 GeneralTransform 派生的类）

矩阵和 Matrix3D

点值

某些其他与 UI 相关的结构，例如厚度和角半径

XAML 内部数据类型

有关详细信息，请参阅ResourceDictionary。

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

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

例如：

在资源字典中：

<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>

【讨论】：

这不是超级有用。无论您将它放在哪里，UWP 仍然会发生 XAML 解析异常，因为 InkScape 生成的 WPF/Silverlight XAML 与 UWP 不兼容。