UWP XAML Vector Graphic

Question

I have a few vector based graphics in XAML format that I want to use within my UWP app. I know I can use Sergoe UI to create icons, but unfortunately I needed different UI icons. I followed the post found here: Inkscape (vector graphic)

Using AI, some icons were made and an extension was used to export them to XAML. However, every time I set the buttons content the app crashes with: Windows.UI.Xaml.Markup.XamlParseException

Here is the resource dictionary I use:

<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

This is indeed a challenge to do it right. I stumbled across this issue when I wanted to use vector XAML inside WPF and also inside UWP.

The route I took was like Jayden mentioned only a little different. The main portion and also the most imported one of a vector image is the vector-data. I saved in the resource dictionary only the data inside a sys:String with a key.

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

This gives me the ability to use it both inside WPF and UWP. In my view I use a custom control (in my case a button or togglebutton) which creates the image. For example a toolbutton:

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

This is the button:

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

As you can see, I set the vector-data to the content-property of the button and the style converts it to a visible image.

This code is from my WPF project, so the style needs some adjustments to be usable in UWP, but you get the idea.

Answer 2

A ResourceDictionary and Windows Runtime XAML in general supports these objects for shareable usage:

• Styles and templates (Style and classes derived from FrameworkTemplate)
• Brushes and colors (classes derived from Brush, and Color values)
• Animation types including Storyboard
• Transforms (classes derived from GeneralTransform)
• Matrix and Matrix3D
• Point values
• Certain other UI-related structures such as Thickness and CornerRadius
• XAML intrinsic data types

For more info, see ResourceDictionary.

In your post code, you put ViewBox in the ResourceDictionary. This usage is incorrect.

You can set Viewbox in the DataTemplate. And use it in ContentTemplate of Button.

For example:

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

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