Windows 10 Visual Elements incl Start Menu Tiles for Native Desktop EXEs compiled with Delphi

This is a summary of what is needed to make a native Windows desktop EXE (compiled with Delphi or any compiler other than Visual Studio) appear with scaled logos and icons throughout Windows, especially in the Start Menu and in File Explorer.

1. The ICO file.

This factoid is based on the Main Icon Group in Delphi, bds.exe, which you can examine with XNResourceEditor or Resource Hacker.

Build an ICO file containing your program icon in all these sizes and color depths. Use that icon when you Project > Build by associating it with the project.  In Delphi: menu Project  > Options, Application.  Do this for at least the target platform combined with Release, e.g. Win32 Release and/or Win64 Release.  Load your icon.  Repeat for other targets as necessary.  Project > Build each one.

2. The visualelementsmanifest.xml file

Make a file named ____.visualelementsmanifest.xml file where the ____ is replaced with the name of your EXE.  So for MyGreatApp.exe it would be MyGreatApp.VisualElementsManifest.xml and this XML file MUST be located in the same folder as your EXE.  The filename itself is case insensitive.

The contents of the manifest XML file will be similar to this:

<Application xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'>
  <VisualElements
  DisplayName = "My Great App"
Logo="WinAssets\LockScreenLogo.png" 
        SmallLogo="WinAssets\LockScreenLogo.png" 
        Description="Some text here" 
      ShowNameOnSquare150x150Logo='on'
      Square70x70Logo='WinAssets\Square71x71Logo.png'
      Square150x150Logo='WinAssets\Square150x150Logo.png'
      Square310x310Logo='WinAssets\Square310x310Logo.png'
      ForegroundText='light'
      BackgroundColor='darkTurquoise'/>
</Application>

IMPORTANT: when you look for documentation about this, be careful to note that MOST documented features apply only to MetroUI applications.  Wide logos, for example, are only available for MetroUI apps. [ In fact, I am not sure yet whether the square310x310 logo is used or ignored by Windows 10. ]   MSDN links are at the end of this post.

The choice of WinAssets as the name of the subdirectory is arbitrary. 

EXTREMELY NOT OBVIOUS: the filenames referenced are adjusted automatically by Windows according to some rules that make sense and are documented, but are simply not obvious until you know what you are looking for.  Windows 8.1 and 10 will automatically use the scaled version of your file if you follow Microsoft's XAML naming convention.  In other words, if you create your files with names exactly as indicated in the next step, it will all work out. 

3. A set of PNG files

You can use a single PNG file, or a large set.  If you use a single 256x256px PNG file for all the required files, you will end up with a super large icon in the start menu, like Google Chrome.  Whether this is good-dramatic, or bad-ostentatious, is up to you to decide.

If you want to go for the full set to allow for scaling on all sorts of monitors, there is a Photoshop template that makes all the files for you.  

NOTE: as input to this process, you would want the master copy of the logo in one of these formats, in order of priority:

.ai (Illustrator)

else .cdr (Corel Draw)

else .psd (photoshop min 300 dpi)

else .png 2480x2480


Ok -- go get The Photoshop template file and instructions for its use here.

The output of that process will be a large collection of PNG files.  There will be too many; we only need the LockScreenLogo* files and the Square* files.  The rest are relevant for MetroUI apps.

Note: if you want to prefix all the file names with your product name, go for it and just be sure to include the same prefix within the references in your VisualElementsManifest.xml file.

4. File placement

All those PNG files have to be placed in the WinAssets folder below your EXE, or wherever you specified in your VisualElementsManifest.xml file.

Here is a directory listing so you can see exactly:

 Directory of (snip)

08/12/2016  01:23 AM               xxx _____.exe
08/12/2016  01:13 AM               776 _____.VisualElementsManifest.xml

 Directory of  (snip)\WinAssets

08/12/2016  12:31 AM    <DIR>          .
08/12/2016  12:31 AM    <DIR>          ..
08/11/2016  02:29 PM             1,709 LockScreenLogo.scale-100.png
08/11/2016  02:29 PM             2,219 LockScreenLogo.scale-125.png
08/11/2016  02:29 PM             2,923 LockScreenLogo.scale-150.png
08/11/2016  02:29 PM             4,265 LockScreenLogo.scale-200.png
08/11/2016  02:29 PM            11,137 LockScreenLogo.scale-400.png
08/11/2016  02:36 PM             3,449 Square150x150Logo.scale-100.png
08/11/2016  02:36 PM             4,721 Square150x150Logo.scale-125.png
08/11/2016  02:36 PM             5,930 Square150x150Logo.scale-150.png
08/11/2016  02:36 PM             8,890 Square150x150Logo.scale-200.png
08/11/2016  02:36 PM            26,019 Square150x150Logo.scale-400.png
08/11/2016  02:36 PM             9,327 Square310x310Logo.scale-100.png
08/11/2016  02:36 PM            12,888 Square310x310Logo.scale-125.png
08/11/2016  02:36 PM            17,262 Square310x310Logo.scale-150.png
08/11/2016  02:36 PM            27,721 Square310x310Logo.scale-200.png
08/11/2016  02:36 PM            79,945 Square310x310Logo.scale-400.png
08/11/2016  02:36 PM             3,157 Square71x71Logo.scale-100.png
08/11/2016  02:36 PM             4,206 Square71x71Logo.scale-125.png
08/11/2016  02:36 PM             5,244 Square71x71Logo.scale-150.png
08/11/2016  02:36 PM             7,481 Square71x71Logo.scale-200.png
08/11/2016  02:36 PM            21,862 Square71x71Logo.scale-400.png
              20 File(s)        260,355 bytes

Testing

1. Install your software, and then "pin to Start Menu" to see the visual elements.

2. In file explorer, look at a directory containing your EXE.  Use the View choices to toggle between "Extra large icons", "Large icons", "Medium icons" and "Small icons".  That picks up on the ICO that was compiled to a resource and linked into your EXE.

3. If you have spare time, experiment with changing the DPI scaling of your monitor display.

There is a trick for updating the timestamp of the program shortcut (LNK file) to avoid trouble with Windows caching the display of the visual elements.  If you can run the PowerShell IDE, use this PowerShell syntax:

(ls "C:\Users\(snip)\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\(snip)___your program__.lnk").lastwritetime = get-date

Tip: To find your LNK file, locate your program in the Windows Start Menu, right click, Open Location.  Shortcuts are always LNK files.

Graphics Assistance

If for some reason you do not have PhotoShop or any other easy way to make all the PNG files with the exact required names, you can talk to the people at Lucid Impact in North Carolina for some efficient help.  This is a fairly quick and painless exercise when you have the software.  You will however need a high-res original of your program logo artwork, as indicated above. 

References:

This excellent post ( Custom Tiles for Desktop Apps ) should answer any remaining questions you have.  If you like the dramatic big Chrome tile, use the advice there to simplify all this down to a single 256x256 png file.

The necessary MSDN links follow.

• MSDN VisualElementsManifest documentation
• MSDN XAML
• Guidelines for tile and icon assets  Just remember that we can only use a subset of the features listed.

Inspiration

http://www.askvg.com/tip-customize-start-screen-tiles-background-color-text-color-and-logo-in-windows-8-1/