Aligning UWP CommandBar content after Anniversary Update

The Universal Windows Platform CommandBar control has a new feature called dynamic overflow since the Anniversary Update. This automatically adjusts the number of presented app bar buttons so that they fit and puts the additional commands in the secondary (overflow) menu. This addition has however inadvertently caused some headaches for developers who use Content property of the  CommandBar  to display additional content – it turns out, that alignment of the content now doesn’t work properly.

The problem

Let’s demonstrate the issue with a simple example.

We would expect, that the content of the CommandBar is aligned to the center of its available area, which indeed was the case before the Anniversary Update.

Since Anniversary 14393 SDK, the HorizontalContentAlignment  property is by default not respected.

The CommandBar does not respect the HorizontalContentAlignment property by default

Cause of the problem

The default control templates are stored in a XAML resource dictionary file on the following path: C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.14393.0\Generic\generic.xaml . If you search for the CommandBar  template inside this file, you will find out that it contains a new VisualStateGroup :

As you can see, when dynamic overflow is enabled, sizing of the columns in the main layout Grid of the control changes.

In the default visual state ( DynamicOverflowDisabled ) is the ContentControlColumnDefinition.Width  set to *  (star) and the PrimaryItemsControlColumnDefinition.Width  set to Auto . This means that the app bar buttons on the right take up a certain width and the remaining space is dedicated to the content.

With dynamic overflow enabled, sizing of the columns is flipped. The control lets the primary items column take up as much space as it can (so that the available space can be used for the buttons and the number of displayable buttons can be calculated at runtime) and the content column now gets only the width it actually needs. Whichever alignment you set to the content doesn’t matter. The content will always seem left aligned, because its column is sized just to fit.

Since the Anniversary Update, dynamic overflow of the command bar is enabled by default.

Solution

You can disable dynamic overflow using the IsDynamicOverflowEnabledproperty. Although you have to make sure that the app bar buttons display well on all display sizes, you can also align the content as you please.

Disabling the dynamic overflow feature fixes the content alignment problem

If you want to preserve the dynamic overflow feature, you may just want to put some margin around your content to make sure it looks aligned. Of course, to support multiple different display sizes, you should adjust the margins using Adaptive Triggers.

Using custom fonts in C# UWP apps

Although the default Windows 10 font – Segoe UI – is certainly very beautiful, you might sometimes want to give your Universal Windows Platform app a bit of uniqueness and personality using a custom font.

You can use almost any .ttf and .otf font file and include it in your application package. .woff and .eot fonts are currently not supported in C# UWP apps (but you can use them in JavaScript UWP apps).

Getting a font

Firstly find a custom font you want to use. There are many fonts you can use for free (even in commercial projects), as well as many fonts you can purchase.

Google Fonts and Font Squirrel are both great collections of countless free fonts to choose from.

After you choose the font you like, download its .ttf or .otf file and add it into your UWP app project as a Content file.

Ensure that the font is added with the Content Build Action
Ensure that the font is added with the Content Build Action

Setting the font in XAML

Each text control in XAML has a FontFamily property, which you can use to set the font. For the preinstalled fonts it is sufficient to just use the font name itself. For custom fonts we have to be more specific:

[FontFilePath] is the relative path to the font file in the project. In case you have an ArimaMadurai-Black.ttf font in the Assets/Fonts folder of your project, you will use /Assets/Fonts/ArimaMadurai-Black.ttf as the path.

[FontName] is the name of the font. Here things are a little tricky. Some fonts require the font name to include the type suffix (font weight, italics) and some don’t. You might need to use trial end error to find out which form is requested. The XAML designer should reflect the change immediately.

Using the property window

There is an alternative to manually setting the font family in XAML – using the XAML properties window. Select a text-based control and then expand the Text settings group in the property manager. Using the font dropdown, you can select not only from the installed fonts, but also from the custom fonts you have added into your project (these should be on top of the list).

Choosing a font in the properties window

Note that the properties window always adds the font type suffix to the FontFamily value. In case the font doesn’t display correctly when you apply the setting, remove the font type manually.

Setting font family in code

Changing the font family in code is as easy as creating an instance of the Windows.UI.Xaml.Media.FontFamily class with the same value as in XAML passed to the constructor.

DirectWrite fonts

Windows 10 added XAML integration of DirectWrite downloadable fonts. With this feature you can set the font family of your text controls to a font that is not currently installed on the device and DirectWrite will download the font on-demand in the background. Before the font is downloaded, a fallback font will be displayed instead. Also, it should be able to download just the portions of the font that you need, which is beneficial for large fonts that support languages like Chinese, Japanese or Korean. The downloaded fonts are stored in a system font cache, so that they can be reused by any app.

This feature seems pretty neat, but it is unfortunately completely undocumented. The only resource regarding this functionality seems to be the XamlCloudFontIntegration sample in the Windows Universal Samples repository on Github. The sample contains three fonts that can be downloaded by DirectWrite and also a PowerShell script that lets you clear the system font cache.

You can see and try out the sample code for this post on my GitHub.

Getting feedback from users in UWP apps via Feedback Hub

Feedback Hub in Windows 10 allows users to openly and effectively share their ideas and report issues. Now Microsoft is adding third party apps into the Feedback Hub and developers can hence receive feedback from users directly.

How can you give the users a quick link to the Feedback Hub for your app? It’s simple! Use the new, rather mouthful, Microsoft Store Engagement and Monetization SDK.

Integrating the Store Engagement SDK

Microsoft Store Engagement and Monetization SDK is a new Visual Studio extension that encompasses both, previously separate, Microsoft Advertising SDKs (Advertising SDK and Advertising Universal SDK) and a new Store Engagement SDK.

To install the SDK in Visual Studio, navigate to Tools menu and select Extensions and Updates. In the left pane of the opened dialog select Online section and then enter the name of the SDK in the search box in the upper right corner of the window. The search should offer you the SDK with an Install button. The installation might require you to restart Visual Studio afterwards.

MSAM SDK

Now you have the prerequisite ready and you can add the Store Engagement SDK to your UWP project.

Open your solution and right click the References item under your UWP project node in Solution Explorer. The select Add Reference in the menu. The Reference Manager will open. Select Universal Windows > Extensions section and you will see the Microsoft Store Engagement SDK in the list of installed extensions. Check the checkbox on the left to include the SDK in your app.

Adding the Store Engagement SDK reference

Now we are ready to get feedback! The code to open the Feedback Hub is extremely simple and straightforward:

This line of code will launch the appropriate URI registered with Feedback Hub with deep link to the section related to your app. Please note, that this actually works only after you publish the app in the Windows Store (as only then the app ID is valid).

Word of caution

Because this functionality is very new, it does not always work as expected (or not at all – for example on the current Windows Mobile preview build) I always recommend providing a secondary way for users to send feedback – such as via e-mail. This will ensure that you will not miss out on important information you need to improve your apps and will keep all users happy.

WinRT gotcha – “one shot” Timer BackgroundTask does not unregister after the “one shot”

First up – sorry Jack Reacher fans, this post is not about the novel 🙂 .

In my latest Windows 10 app Event Countdowns I made a very unlucky mistake. When registering its Background Task that should update the app’s tiles every 30 minutes, I used the following code:

At first glance, nothing out of the ordinary. Or so I thought. One day after the app was released, I checked my pinned tile counting down to the premiere of Captain America: Civil War to find out with my immense surprise, that the time left on the tile was off by a day! I immediately checked the code and after a few minutes of intense debugging frenzy found the hidden evil – the second parameter of the TimeTrigger class’ constructor.

The second parameter, oneShot, specifies, whether the task will be triggered only once (value true) or periodically (value false).

My course of action was to just change true to false and because the app worked well when tested on my PC, I published the updated version to Store.

When the update arrived on my phone, I happily installed it, launched it and waited for the tiles to become “live” again. So I waited. And I waited. And I waited. And… nothing.

I was lost. The app worked perfectly on my PC and but tiles just didn’t update on my phone. So I went back to the drawing (Visual) board (Studio) and thought it all through again.

And then I saw it.

I naturally presumed, that once the oneShot Background Task is triggered, it is automatically unregistered by the system. In fact, that is not the case.

Once a oneShot trigger runs the Background Task, the task still stays registered!

This means that when I installed the updated app on my phone and run it, the if check for task != null  evaluated to true, because the task was still registered, although it has already fired once!

The final solution was then to force unregister the existing task to make sure the task is registered again with oneShot set to false.

The bug is finally captured and tiles live on!

 

Accent color in Windows 10 app taskbar icons

The latest Technical preview builds of Windows 10 (build 10547 onwards) received a very interesting treatment for taskbar app icons of several built-in apps like Store, Outlook Mail, Outlook Calendar or Photos app. If you look closely, you can see that not only are the app icons without any coloful square outline (as default for WinRT apps), but they also have several areas filled by the system’s accent color.

ColorizedColorizedBlue

I was wondering how this can be achieved. The transparent color is used to make the “transparent” portions of the icon, but the colored fill? I thought that it must be some kind of “default” color that will be replaced by accent color. And as it turned out, I was right!
PhotosAppIcon

If you look at the app assets of the Photos app, you can see a surprisingly large number of different icons for “AppList” or Square 44×44 logo. The normal icons for this kind of icon with appropriate scaling are there, but we can also are the ones with “.targetsize-{size}” suffix. These are offered for entry only for four different sizes – 256, 48, 24 and 16 in Visual Studio. But you can apparently offer the system much more resolutions for even more granular scaling – 100, 96, 80, 64, 40, 32 or 20.

But this is where things get even more interesting! There are more different suffixes the Photos app uses!

  • contrast-black_targetsize-{size} – white and transparent icon (for high-contrast accessibility setting)
  • contrast-white_targetsize-{size} – black and transparent icon (for high-contrast accessibility setting)
  • targetsize-{size}_altform-colorize – accent color colorized app icon for taskbar, this is what we are looking for!
  • targetsize-{size}_altform-unplated_contrast-white – app icon for taskbar with transparency for high-contrast
  • targetsize-{size}_altform-unplated – app icon for taskbar with transparency
  • targetsize-{size}_altform-fullcolor – icons used in File Explorer for associated files, this is a full-colored icon

This is a lot of undocumented file suffixes 🙂 . But the one we are interested here is targetsize-{size}_altform-colorize . This image contains transparent portions for areas of the icon, that are … well, transparent, any other colors for areas that are visible and finally full black areas for those parts that should be replaced by the system’s accent color!

Although the official resources and documentation is so far quite lacking, any developer can use these special icon types in their app right now. Just include the surplus images with the correct naming (same as Square 44×44 Logo) in your app’s assets and all will work as expected. This gives quite a big creative opportunities for developers to make their app look even more alive on Windows 10.

Sample project

You can download a sample project with colorized taskbar icon here. The project is basically the default blank Windows 10 application with just one additional image file in the Assets folder – Square44x44Logo.targetsize-64_altform-colorize.png. This one file does all the magic! Once you run the application, indeed – you will find yourself looking at a very nice colorized application icon on your taskbar. And once you change the system theme, the icon will change as well 🙂 .

Square44x44Logo.targetsize-64_altform-colorize

A Developer’s Guide to Windows 10

Now is the best time to learn Windows 10 development!

Microsoft has released an updated version of their developer’s guide to the new Universal Windows Platform for Windows 10 on Microsoft Virtual Academy. Featuring Andy Wigley and Shen Chauhan , this tutorial will walk you through everything new in the Windows 10 development world and will show off the “RTM” developer tools (which is a misnomer, because there is now nothing as RTM with Windows as a Service and build 10240 is just the first public release of Windows 10).

The guide covers everything from the basics of the platform itself, through XAML controls, adaptive layout and code, down to the nitty-gritty details and advanced techniques like the concept of “App services”.

So jump in and get your first-hand experience with Universal Windows Platform!