Replace small jagged icons of Xenko editor with Visual Studio responsive icons

Currently Xenko uses Small png icons in the editor that are jagged in higher resolutions. Besides of that, for a flat development environment like Xenko Editor, it’s better to use flat icons.

I suggest to use Microsoft Visual Studio Image Library 2017, because those images have both Svg and Xaml format that is ready for Xaml UI of Xenko editor, scalable and responsive to the screen. And also, these icons make developer feel like it’s homeland as it is Visual Studio icons.

[avestura]

I have made some changes based on this issue, it’s not complete yet and some icons are not replaced.

What I have done:

• Created a vector xaml for Xenko logo
• Replaced BitmapImage resources to DrawingImage using Visual Studio image gallery in image dictionaries of project.
• For icons that there were not any icon in Visual Studio images gallery, I’ve created a new one with merging geometric paths of two or more icons (for example, merged Application Icon + Xenko Vector Logo + Plus to create Xenko New Solution icon

Windows Chrome

Xenko logo, Window Close, Maximize, Restore and Minimize replaced with glyph version. Height of chrome is now a little smaller (like Visual Studio). Xenko and Window chrome are not pixelate anymore.

Before:

After:

Project select template browse icon

Before:

After:

Scene Items

Before:

After:

Solution explorer

Before:

After:

Property Grid

Before:

After:

Scene editor icons

As you see, some icons are not changed.

Before:

After:

Menu icons

Yes, I know that visual studio icon is too big. I just changed BitmapImage resources to DrawingImage, so some icons need to change the width or height explicitly.

Before:

After:

[dfkeenan]

If anyone cares, Visual Studio doesn’t just use the vector graphic formats for displaying icons. It has a special image service that chooses the best image for the DPI, i.e. for standard DPI it uses the 16x16 PNGs. That’s why there is a 16x16, 32x32, 48x48 etc. PNGs as well as the XAML/SVG files.

https://docs.microsoft.com/en-gb/visualstudio/extensibility/image-service-and-catalog https://docs.microsoft.com/en-gb/visualstudio/extensibility/ux-guidelines/images-and-icons-for-visual-studio

You will notice the colors for a dark theme are not quite right in yours. I think the image service also handles changing colors in the icons for themes. But I do remember seeing an IMultiValueConverter that changes the colors for themes and disabled state. I am using the VS Image library (2015) and implemented a similar converter. Though I am only using the 16x16 PNGs.

Visual Studio:

Mine without theme color change applied:

Mine with theme color change applied:

See my SO answer for some details: https://stackoverflow.com/a/37501135/6394883