CODEWITHSUNDEEP
c#xamluwp
Bimo
Bimo

Reputation: 6587

how to set AppBarButton Icon using svg file resource in UWP/C#

Microsoft documentation states that you can set icons using SVG vector graphics files: https://learn.microsoft.com/en-us/windows/uwp/design/style/icons

However, when I try to use an svg file to set the icon, it just shows blank:

<AppBarButton Label="BitmapIcon">
    <AppBarButton.Icon>
        <BitmapIcon UriSource="ms-appx:///Svg/MyButton.svg"/>
    </AppBarButton.Icon>
</AppBarButton>

This is how I added Svg file to my project: Under project I created a Directory "Svg", and inside of Svg folder I added the file "MyButton.svg". Property of this svg resource file are set to:

BuildAction: content

Copy to Output Directory: Do not copy

Custom Tool:

Custom Tool Namespace:

Upvotes: 6

Views: 6744

Answers (4)

Zunayed Hassan
Zunayed Hassan

Reputation: 166

You can always put content on your AppBarButton element. So, use Image and SvgImageSource to put as icon on the AppBarButton content. Here I have used 16p x 16px SVG image.

Original SVG:

enter image description here

AppBarButton with Label:

enter image description here

And here is the rest of code

this.MyAppBarButton.Content = new Image()
        {
            Source = new SvgImageSource()
            {
                UriSource = new Uri("ms-appx:///Assets/logo.svg")
            }
        };

Upvotes: 0

Bimo
Bimo

Reputation: 6587

Currently, the main problem with converting an SVG file into an PathIcon, is that a PathIcon is specified in XAML as a single "Path" XAML statement. So each Path in the SVG file would need to be smashed into the same "path" statement to be compatible with the single path XAML format for specifying a PathIcon. This is more inline with the way font's are specified.

However, with that said, SVG is easily translatable or convertible into XAML since its specified in an XML format:

<ResourceDictionary>
    <Canvas 
           x:Key="appbar_icon1" 
           Width="76" Height="76" 
           ...>
        <Path ... />
        <Path ... />
        <Path ... />
        ...
    </Canvas>
</ResourceDictionary>

Three methods to get derive this XAML PATH Data from SVG file.

Method 1: Inkscape

1) Open or Create your SVG in Inkscape

2) File -> Save As…

3) In the file types, select Microsoft XAML (near the bottom)

4) In the window you have the option of Silverlight compatible. I’d select as it generates cleaner XML

Method 2: XPS format

1) Print your SVG to the XPS printer

2) The XPS printer will ask you for a file name. Save it somewhere

3) Rename the file extension to .ZIP

4) Extract all the files in the zips. It will create a bunch of files and folders

5) Hunt down the file. It’s likely under Documents > 1 > Pages > 1.fpage

Method 3: Cut and Paste SVG file XML

An SVG is an XML file format. You can open it in your favourite text editor. If you were to open the file and scroll down, checkout the content below.

1) Open SVG File in editor:

<g
       transform="translate(0,0)"
       id="layer1">
    <path
        id="path3388"
        d="m 15.6,5 c 0,40 0,40 0,40"
        .../>
    <path
        id="path3390"
        d="m 35,5 c 0,40 0,40 0,40"
        .../>
    ...
</g>

2) Manually convert XML Path Tags into XAML path tags:

XAML:

<Path Data="F1 m 15.6,5 c 0,40 0,40 0,40" 
      Stroke="Black" 
      StrokeThickness="1" />
<Path Data="F1 m 35,5 c 0,40 0,40 0,40" 
      Stroke="Black" 
      StrokeThickness="1" />
...

Upvotes: 1

Bimo
Bimo

Reputation: 6587

If you need a vectorize icon for an AppBarButton or Navigationviewitem.Icon, and the standard icons provided by Microsoft are not enough, then the best way to find an Icon is to find a free "Icon font" online and load it into your application as a resource, then use FontIcon to set the Icon. (See, https://www.webpagefx.com/blog/web-design/free-icon-fonts).

Another alternative is to create your own font and use font creation software such as "FontBird" (https://birdfont.org/).

Upvotes: 0

Breeze Liu - MSFT
Breeze Liu - MSFT

Reputation: 3808

You can not use the .svg file as your AppBarButton Icon directly. To load the SVG icon file into an AppBarButton.Icon, you can convert it to a PNG, font, or path, then use FontIcon, BitmapIcon and PathIcon to display it. More details, you can look into this similar thread:

https://social.msdn.microsoft.com/Forums/en-US/1d32a8b5-a4e1-472b-acce-85c92380b799/uwp-how-to-load-svg-icon-into-appbarbuttonicon?forum=wpdevelop

Upvotes: 4

Related Questions