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

[avestura]

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:

[xen2]

Nice, I like it!

They all come from Microsoft Visual Studio Image Library 2017?
I will need to check their EULA/license carefully.

[avestura]

Yes, they all come from Microsoft Visual Studio Image Library 2017. Some color and combine modifications are applied on a few of icons.

[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

[avestura]

@dfkeenan Interesting! I can see that your method TransformLuminosity in SO is working well.
I found an API in Microsoft.VisualStudio.Imaging dll that is doing a similar thing. Those methods are in a class named ImageThemingUtilities.

private static double TransformLuminosity(double hue, double saturation, double luminosity, double backgroundLuminosity)
{
    if (backgroundLuminosity < 0.5)
    {
        if (luminosity >= 82.0 / 85.0)
            return backgroundLuminosity * (luminosity - 1.0) / (-3.0 / 85.0);
        double val2 = saturation >= 0.2 ? (saturation <= 0.3 ? 1.0 - (saturation - 0.2) / (1.0 / 10.0) : 0.0) : 1.0;
        double num1 = Math.Max(Math.Min(1.0, Math.Abs(hue - 37.0) / 20.0), val2);
        double num2 = ((backgroundLuminosity - 1.0) * 0.66 / (82.0 / 85.0) + 1.0) * num1 + 0.66 * (1.0 - num1);
        if (luminosity < 0.66)
            return (num2 - 1.0) / 0.66 * luminosity + 1.0;
        return (num2 - backgroundLuminosity) / (-259.0 / 850.0) * (luminosity - 82.0 / 85.0) + backgroundLuminosity;
    }
    if (luminosity < 82.0 / 85.0)
        return luminosity * backgroundLuminosity / (82.0 / 85.0);
    return (1.0 - backgroundLuminosity) * (luminosity - 1.0) / (3.0 / 85.0) + 1.0;
}

Unfortunately this class and it's methods are not documented, but I think they might be useful. There is another converter API named ThemedImageSourceConverter that works for a BitmapSource.

public static ImageSource ConvertCore(ImageSource inputImage, Color backgroundColor, bool isEnabled, bool isHighContrast, object parameter)
{
    BitmapSource inputImage1 = inputImage as BitmapSource;
    if (inputImage1 == null || (int)backgroundColor.A == 0 & isEnabled)
        return inputImage;
    Color biasColor = GrayscaleBitmapSourceConverter.GetBiasColor(parameter);
    return (ImageSource)ImageThemingUtilities.GetOrCreateThemedBitmapSource(inputImage1, backgroundColor, isEnabled, biasColor, isHighContrast);
}

[Kryptos-FR]

@0xaryan Nice job.

Some icons were hastily changed when moving to MIT. That said even the previous ones were a bit jagged.

Does it work well with high DPI scaling? Also if I remember correctly, on the XAML/template side some icon sizes are hardcoded (using our custom {sskk:Image} markup extension). But I supposed you already noticed that.

[avestura]

@Kryptos-FR Thanks.

As they are DrawingImages that use geometric paths, there shouldn't be any problem with dpi scaling, icons scale with dpi as well as manual scaling. I'm aware of {sskk:Image} extension method, but it is not fully applied on all icons. The big visual studio icon in the menu is an example.

GameStudioWindow:

• <MenuItem Header="{sskk:Localize Open in IDE, Context=Menu}" Icon="{sskk:Image {StaticResource ImageVisualStudio}}" OtherProps="..."/>
• <Image Source="{StaticResource ImageVisualStudio}" />
• <MenuItem Header="{sskk:Localize Open in IDE, Context=Menu}" Icon="{sskk:Image {StaticResource ImageVisualStudio}}" OtherProps="..." />

[xen2]

@0xaryan can this issue be closed with #83 merge, or is there still some additional work to do?

[avestura]

@xen2 Icons replaced and merged, so this can be closed. Thanks 🙏