Page MenuHome

Windows 10 Start Menu and Taskbar Visual Appearance Issues for Microsoft Store Installations
Closed, ResolvedPublic

Description

System Information
Operating system: Windows 10 Version 2004 (OS Build 19041.388)
Graphics card: GeForce GTX 1060 6GB/PCIe/SSE2 NVIDIA Corporation 4.5.0 NVIDIA 430.86

Blender Version
Broken: v2.83.3, branch: master, commit date: 2020-07-22, build hash: 353e5bd7493e. Microsoft Store edition.

Short description of error
Multiple issues relating to the Blender's appearance in the Windows 10 Start Menu and Taskbar when installed from the Windows Store.

  • Taskbar Incorrectly shows a miniature version of the Blender icon with a solid blue background and a large amount of padding. This should be a normal sized transparent icon.
  • Application name shown as lowercase ("blender") instead of proper-case ("Blender") in Start Menu tile tool-tip.
  • Application name not shown on Start Menu tiles.
  • Application logo has a "harsh" look compared to other Windows 10 application icons, even when compared to non-Windows Store installations of Blender.

Exact steps for others to reproduce the error
See screenshot examples above. Install Blender on Windows 10 from Windows Store and observe user interface when pinned to Start Menu and on the Taskbar when application is launched. In this specific case an en-US locale of Windows 10 was used.

Event Timeline

I'll check with how we used to create the MSIX package. Our current AppXManifest.xml is based on exactly that, though, so I'm pretty sure it'll always have been like that for our Microsoft Store distribution.

We haven't done any of the unplated assets to begin with. I'll check with @Pablo Vazquez (pablovazquez) on the proper creation of all the assets we need, also for D8310: Windows Release: Script creation of MSIX package, since the Assets in it are only the automatically generated versions from our .ico pulled from a version created with MsixPackagingTool.

The background in the taskbar icon is actually the accent color chosen for the theme.

I have not yet found how to control this particular behavior through the manifest.

Further testing for the background accent color for icons on the task bar:

  • all Microsoft Store app icons that are set to use transparent background color show the accent color, for instance MSIX Packaging Tool
  • the accent color disappears once the application has been launched AND task bar is set to not combine icons and hide labels
  • combining tasks and hiding of labels always shows tiny icon for store apps. This happens also for MSIX Packaging Tool installed from the Microsoft Store

With latest changes to D8310: Windows Release: Script creation of MSIX package the tiles look like follows.

Small tile, no name

Medium tile (default)

Wide tile

Large tile

Taskbar, background is accent color

Taskbar, no combining, labels not hidden

The background in the taskbar icon is actually the accent color chosen for the theme.

I have not yet found how to control this particular behavior through the manifest.

When painting the taskbar, Windows looks at the icon asset and checks the contrast compared to the user's selected theme. If the asset (icon) has enough contrast with the taskbar, the system uses it. If it doesn't have enough contrast, it checks for a high-contrast version of the asset. If there is no high-contrast version of the asset, the system draws the "plated" form of the asset instead. The plated asset is what we are seeing - a scaled down 16x16 pixel icon over a solid background color.

The current Blender icon resource is likely not be considered to have enough contrast by Windows to be drawn correctly. It may need some visual adjustment (translucent shadow / fade / etc) so that Windows considers it to have an appropriate amount of contrast. It may also be worth adding a high contrast version of the icon (couldn't find documentation, but this is likely to be pure white) to cover scenarios where Windows can't draw the normal icon.

https://docs.microsoft.com/en-us/windows/uwp/design/style/app-icons-and-logos

The quality of the new icons looks great, but they should be scaled down a bit (with added transparent padding) to follow Microsoft's tile design and padding recommendations.

  • Square71x71Logo - Small tile. Limit icon width to 66% and height to 50% of the tile size (47x47 icon, transparently padded up to 71x71)
  • Square150x150Logo - Medium tile. Limit icon width to 66% and height to 50% of the tile size (square icon = 75x75, transparently padded up to 150x150)
  • Square310x150Logo - Wide tile. Limit icon width to 66% and height to 50% of tile size (square icon = 75x75, transparently padded up to 310x150)
  • Square310x310Logo - Large tile. Limit icon width to 66% and height to 50% of tile size (square icon = 155155, transparently padded up to 310x310)
  • No recommendations are given for the Square44x44Logo but given the size I assume the icon should be kept to a max of 32x32 with transparent padding around it.

Not to make your lives more complicated, but since you're in here mucking with the tile icons it's probably worth creating higher definition variants as well - these higher definition icons will be used in high DPI displays. Need Blender looking sharp for the people with the fancy monitors! :)

To do this, add a qualifier in between the logo filename and the file extension. For example:

  • Square150x150Logo.png - standard logo for medium tile
  • Square150x150Logo.scale-400.png - 400% larger version (600x600) of medium tile for high DPI displays

You can also use folders to do this instead of filenames, as discussed in the "Tailor your resources" article: https://docs.microsoft.com/en-us/windows/uwp/app-resources/tailor-resources-lang-scale-contrast. The standard scale factors are 100%, 125%, 150%, 200%, and 400%. They also recommend creating target-size app icon assets for the small icon - these icons are used for a pixel-perfect appearance at the most common sizes - targetsize-16, targetsize-24, targetsize-32, targetsize-48, and targetsize-256. e.g. Square44x44Logo.targetsize-256.png

That's a lot of icons! 5 logo sizes with 5 scales each, plus another 5 recommended target sizes for the small tile. 30 different icons. I suppose you could pick your battles here :) There is apparently a tool in Visual Studio that will take a vector Adobe Illustrator file and generate all the different tile sizes for you. Might be the easiest way to go.

@Pablo Vazquez (pablovazquez) could you please take it up to tweak the icons in the Assets folder of D8310: Windows Release: Script creation of MSIX package such that they follow the style guidelines and as explained by @Eric Bickle (ShadowChaser) ?

I just did a quick GIMP session using the winblender.ico image, but I feel the drop shadow is too light. Or are maybe the SVG versions from release/freedesktop/icons/*/apps/blender*.svg something to use?

Richard Antalik (ISS) changed the task status from Needs Triage to Confirmed.Nov 27 2020, 9:50 PM

This seems to be unresolved still, so confirming.

Are the code/artifacts related to Windows Store packaging in open source control anywhere? I'm open to taking a look.

Are the code/artifacts related to Windows Store packaging in open source control anywhere? I'm open to taking a look.

I would say of course, but I can't point you to files of interest. I know little about packaging and distribution side.
Check https://wiki.blender.org/wiki/Source/File_Structure (good to read through wiki in general) and discussion here to get quick overview. If you still have questions feel free to ask. If you preffer realtime communication, you can ask on https://blender.chat/channel/blender-coders

Thanks Richard, that was a huge help.

I've made some progress on this; on my development machine I'm able to generate and install the .appx package with the following behaviour:

  • app icon is "unplated" without a color background.
  • all icon and logo resources have 5 DPI scale levels (100, 125, 150, 200, 400).
  • logos match Windows Fluent design with a subtle drop shadow.
  • I removed the version number from non-LTS store installs, since it's implied the user will always have the latest.
  • Build process for .appx packages now supports localization (not used at the moment, but its possible - e.g. app description).

Everything looks good but I'm going to do a bit more adjustment to the padding of the Start Menu tiles to more closely match other Windows Store apps. With any luck I'll be done in the next few days and then I can look into how to submit a pull request.

Diff is in.

In addition to what's described above, I also added high contrast black and white icons. For the regular icons I tried to reasonably match Microsoft's latest icon styles for their own store apps. Obviously this is a bit subjective in regards to the drop shadow - tried to keep it fairly subtle.

I've left out any changes to the title of the start menu tile; I'll submit a separate task / diff for that part to make sure there's an opportunity for discussion.