Question

我有一些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>

Answer 1

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

我采取的路线就像杰登提到的只是有点不同。矢量图像的主要部分和最导入的一个是矢量数据。我在资源字典中只保存了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中使用它。在我看来，我使用自定义控件（在我的例子中是一个按钮或togglebutton）来创建图像。例如工具按钮：

<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}"/>

如您所见，我将vector-data设置为按钮的content-property，样式将其转换为可见图像。

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

Answer 2

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


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

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

动画类型，包括Storyboard

转换（从GeneralTransform派生的类）

Matrix和Matrix3D

点值

某些其他与UI相关的结构，例如Thickness和CornerRadius

XAML内在数据类型

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

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

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

例如：

在ResourceDictionary中：

Button

在XAML中：

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

UWP XAML矢量图形

2 个答案: