Windows 10 Start Menu and Taskbar Visual Appearance Issues for Microsoft Store Installations #79356

Closed
opened 2020-07-29 01:47:04 +02:00 by Eric Bickle · 25 comments

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: 353e5bd749. 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.
  {F8726908}
  • Application name shown as lowercase ("blender") instead of proper-case ("Blender") in Start Menu tile tool-tip.
  {F8726912}
  • Application name not shown on Start Menu tiles.
  {F8726915}
  • Application logo has a "harsh" look compared to other Windows 10 application icons, even when compared to non-Windows Store installations of Blender.
  {F8726957}

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.

**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. ``` {F8726908} ``` - Application name shown as lowercase ("blender") instead of proper-case ("Blender") in Start Menu tile tool-tip. ``` {F8726912} ``` - Application name not shown on Start Menu tiles. ``` {F8726915} ``` - Application logo has a "harsh" look compared to other Windows 10 application icons, even when compared to non-Windows Store installations of Blender. ``` {F8726957} ``` **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.
Author

Added subscriber: @ShadowChaser

Added subscriber: @ShadowChaser
Member

Added subscribers: @jesterking, @Jeroen-Bakker

Added subscribers: @jesterking, @Jeroen-Bakker
Member
@jesterking Might be an artifact of [D8310: Windows Release: Script creation of MSIX package](https://archive.blender.org/developer/D8310)
Member

Added subscriber: @pablovazquez

Added subscriber: @pablovazquez
Member

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 @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.

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 ](https://docs.microsoft.com/en-us/windows/msix/desktop/desktop-to-uwp-manual-conversion#optional-add-target-based-unplated-assets) to begin with. I'll check with @pablovazquez on the proper creation of all the assets we need, also for [D8310: Windows Release: Script creation of MSIX package](https://archive.blender.org/developer/D8310), since the Assets in it are only the automatically generated versions from our .ico pulled from a version created with MsixPackagingTool.
Member
Different icons are defined using https://docs.microsoft.com/en-us/uwp/schemas/appxpackage/appxmanifestschema/element-visualelements Tile size specifications are at https://docs.microsoft.com/en-us/previous-versions/windows/apps/hh781198(v=win.10)?redirectedfrom=MSDN [DefaultTile schema ](https://docs.microsoft.com/en-us/uwp/schemas/appxpackage/uapmanifestschema/element-uap-defaulttile).
Member

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.

image.png

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
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. ![image.png](https://archive.blender.org/developer/F8730618/image.png) 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
Member

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

{F8730726, alt="Small tile, no name"}
{F8730721, alt="Medium tile (default)"}
{F8730715, alt="Wide tile"}
{F8730709, alt="Large tile"}
{F8730734, alt="Taskbar, background is accent color"}
{F8730740, alt="Taskbar, no combining, labels not hidden"}

With latest changes to [D8310: Windows Release: Script creation of MSIX package](https://archive.blender.org/developer/D8310) the tiles look like follows. {[F8730726](https://archive.blender.org/developer/F8730726/image.png), alt="Small tile, no name"} {[F8730721](https://archive.blender.org/developer/F8730721/image.png), alt="Medium tile (default)"} {[F8730715](https://archive.blender.org/developer/F8730715/image.png), alt="Wide tile"} {[F8730709](https://archive.blender.org/developer/F8730709/image.png), alt="Large tile"} {[F8730734](https://archive.blender.org/developer/F8730734/image.png), alt="Taskbar, background is accent color"} {[F8730740](https://archive.blender.org/developer/F8730740/image.png), alt="Taskbar, no combining, labels not hidden"}
Author

In #79356#987736, @jesterking wrote:
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.

> In #79356#987736, @jesterking wrote: > 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.
Member

@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 @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?

@pablovazquez could you please take it up to tweak the icons in the Assets folder of [D8310: Windows Release: Script creation of MSIX package](https://archive.blender.org/developer/D8310) such that they follow the style guidelines and as explained by @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?

This issue was referenced by 6c9c479048

This issue was referenced by 6c9c47904841d729d27393851133dc2764184960

This issue was referenced by 782baa8f54

This issue was referenced by 782baa8f54bca659fdae60391147adbcad93d2bb

Added subscriber: @iss

Added subscriber: @iss

Changed status from 'Needs Triage' to: 'Confirmed'

Changed status from 'Needs Triage' to: 'Confirmed'

This seems to be unresolved still, so confirming.

This seems to be unresolved still, so confirming.
Author

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.

In #79356#1064024, @ShadowChaser wrote:
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

> In #79356#1064024, @ShadowChaser wrote: > 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
Author

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.

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.
Author

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.

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.

This issue was referenced by 6265fe8605

This issue was referenced by 6265fe860588e9e20e0f3baf8f42ef6247b36ff8

This issue was referenced by 3724e4c6f9

This issue was referenced by 3724e4c6f9f30cc2c27bdb988bb3f2d57a4c48c6

This issue was referenced by 55c56f1ffb

This issue was referenced by 55c56f1ffb6c7701f6990f1e4441a204c43a446b

This issue was referenced by 78011d712d

This issue was referenced by 78011d712dc311768a501b31917f2eef27af753b
Member

Changed status from 'Confirmed' to: 'Resolved'

Changed status from 'Confirmed' to: 'Resolved'
Jeroen Bakker self-assigned this 2021-01-13 13:32:30 +01:00

This issue was referenced by 5f411f7f38

This issue was referenced by 5f411f7f3870b021161c588fa7ecf66e6c089330
Sign in to join this conversation.
No Label
Interest
Alembic
Interest
Animation & Rigging
Interest
Asset Browser
Interest
Asset Browser Project Overview
Interest
Audio
Interest
Automated Testing
Interest
Blender Asset Bundle
Interest
BlendFile
Interest
Collada
Interest
Compatibility
Interest
Compositing
Interest
Core
Interest
Cycles
Interest
Dependency Graph
Interest
Development Management
Interest
EEVEE
Interest
EEVEE & Viewport
Interest
Freestyle
Interest
Geometry Nodes
Interest
Grease Pencil
Interest
ID Management
Interest
Images & Movies
Interest
Import Export
Interest
Line Art
Interest
Masking
Interest
Metal
Interest
Modeling
Interest
Modifiers
Interest
Motion Tracking
Interest
Nodes & Physics
Interest
OpenGL
Interest
Overlay
Interest
Overrides
Interest
Performance
Interest
Physics
Interest
Pipeline, Assets & IO
Interest
Platforms, Builds & Tests
Interest
Python API
Interest
Render & Cycles
Interest
Render Pipeline
Interest
Sculpt, Paint & Texture
Interest
Text Editor
Interest
Translations
Interest
Triaging
Interest
Undo
Interest
USD
Interest
User Interface
Interest
UV Editing
Interest
VFX & Video
Interest
Video Sequencer
Interest
Virtual Reality
Interest
Vulkan
Interest
Wayland
Interest
Workbench
Legacy
Blender 2.8 Project
Legacy
Milestone 1: Basic, Local Asset Browser
Legacy
OpenGL Error
Meta
Good First Issue
Meta
Papercut
Meta
Retrospective
Meta
Security
Module
Animation & Rigging
Module
Core
Module
Development Management
Module
EEVEE & Viewport
Module
Grease Pencil
Module
Modeling
Module
Nodes & Physics
Module
Pipeline, Assets & IO
Module
Platforms, Builds & Tests
Module
Python API
Module
Render & Cycles
Module
Sculpt, Paint & Texture
Module
Triaging
Module
User Interface
Module
VFX & Video
Platform
FreeBSD
Platform
Linux
Platform
macOS
Platform
Windows
Priority
High
Priority
Low
Priority
Normal
Priority
Unbreak Now!
Status
Archived
Status
Confirmed
Status
Duplicate
Status
Needs Info from Developers
Status
Needs Information from User
Status
Needs Triage
Status
Resolved
Type
Bug
Type
Design
Type
Known Issue
Type
Patch
Type
Report
Type
To Do
No Milestone
No project
No Assignees
5 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: blender/blender#79356
No description provided.