Materialdesign: Xaml Variants: Why Canvas and not DrawingImage?

[malware-dev]

Hello. Thank you _immensely_ for the Material Design Icons site, it is _exactly_ what I need.

One question though. Why are the Xaml variants of the icons _Canvas_ and not _DrawingImage?_ A Canvas is an actual _UI component_ and not an image, making the icons much less flexible than if they were DrawingImages. As-is I need to make a conversion anyway, which was one of the things I really hoped I didn't have to do.

[Templarian]

That was added as a suggestion by someone a long time ago (like 5 years ago). Not a XAML person myself, so will need some guidance. If you can explain exactly what needs to be changed we can update it.

@malware-dev Was on vacation, but should have time this weekend if you can fill in the details sometime this week.

[malware-dev]

Hi, Templarian. Perhaps you can add another _variant?_ That way people can choose which they prefer/need for whatever their task is.

Let me show you a comparison with a random icon selected from your site.

This is a canvas, like the ones you already have.

<?xml version="1.0" encoding="UTF-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="24" Height="24">
    <Path Data="M16.5,12A2.5,2.5 0 0,0 19,9.5A2.5,2.5 0 0,0 16.5,7A2.5,2.5 0 0,0 14,9.5A2.5,2.5 0 0,0 16.5,12M9,11A3,3 0 0,0 12,8A3,3 0 0,0 9,5A3,3 0 0,0 6,8A3,3 0 0,0 9,11M16.5,14C14.67,14 11,14.92 11,16.75V19H22V16.75C22,14.92 18.33,14 16.5,14M9,13C6.67,13 2,14.17 2,16.5V19H9V16.75C9,15.9 9.33,14.41 11.37,13.28C10.5,13.1 9.66,13 9,13Z" />
</Canvas>

This is a DrawingImage representing the very same icon.

<DrawingImage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <DrawingImage.Drawing>
        <GeometryDrawing Geometry="M16.5,12A2.5,2.5 0 0,0 19,9.5A2.5,2.5 0 0,0 16.5,7A2.5,2.5 0 0,0 14,9.5A2.5,2.5 0 0,0 16.5,12M9,11A3,3 0 0,0 12,8A3,3 0 0,0 9,5A3,3 0 0,0 6,8A3,3 0 0,0 9,11M16.5,14C14.67,14 11,14.92 11,16.75V19H22V16.75C22,14.92 18.33,14 16.5,14M9,13C6.67,13 2,14.17 2,16.5V19H9V16.75C9,15.9 9.33,14.41 11.37,13.28C10.5,13.1 9.66,13 9,13Z" />
    </DrawingImage.Drawing>
</DrawingImage>

As you can see, there's only a few element and attribute differences. The actual geometry data is identical.

I also noticed that you're not including any color brushes with either of these. I don't know if this was intentional or not, but if it wasn't - for the canvas version, add Brush="#AARRGGBB" to the Path

<Path Brush="#FF808080" Data="..." />

For the DrawingImage version, the attribute is Fill for the GeometryDrawing

<GeometryDrawing Fill="#FF808080", Geometry="..." />

I am more than happy to answer any questions you might have; and/or to test any image variants you want before actually implementing it in your site, if you choose to do so.

[Templarian]

That answers everything I need to add this feature. I'll try and add it as an alternative this weekend. Thanks for the quick reply. 👍

I'll add the color fill also. Will ping you when it's up to test.

[gdang]

But the Fill property is already in the XAML export option... Unless I'm missing something?

By the way, it's actually Brush for GeometryDrawing and Fill for Path.

```xaml





````

[malware-dev]

Hehe, you're right, @gdang, I managed to flip them around 😆

There was no color in the random icon I chose for this example, and not for the ones I chose earlier either.

[Templarian]

Just added this to the site. Can one of you test this out? Added to a ton of the right click context menus also, so hopefully I didn't wire up any wrong.

Will close this out once I get a 👍

/cc @malware-dev @gdang

[gdang]

Context menu does show up here.

Though, on Vivaldi, viewing DrawingImage does not display the XAML. Clicking on the download button doesn't work either. Both functionalities work fine on Firefox on the other hand.

Finally, downloading the XAML (DrawingImage) from the context menu does not work from either browsers.

-edit-
After further tests, I can confirm that selecting Download XAML (DrawingImage) from the context menu does not work on Chrome and Edge. View XAML (DrawingImage) does display the XAML though.

[malware-dev]

Confirmed. The DrawingImage menu item seems to do nothing.