Forcing the CommandBar to open down

The CommandBar  control is a vital component of UWP app design. It is an evolution of the AppBar  concept, which was available ever since Windows Phone 7, but with UWP is much more feature complete. One thing that is still missing however is the option to choose the direction in which the command bar opens.

Problem

The default behavior of the CommandBar  is to open in the up direction whenever the control is not at the very top of the window. This is an issue, because this holds true even when we define a custom title bar on Desktop, in which case the CommandBar  opens below the window’s minimize, maximize and close buttons which doesn’t look good at all.

The default template

The default template of the CommandBar  control defines the states of the control as a collection of VisualStates  and VisualStateTransitions . It turns out that there is always a separate visual state for down and up direction.

Inside these states you can see that the system just uses different values for some of the properties like CommandBarTemplateSettings.ContentHeight  vs CommandBarTemplateSettings.NegativeOverflowContentHeight  for the Y  property of OverflowContentRootTransform .

Solution

We cannot easily change the inner logic of the control itself, but we can make the control in up-open state look identical as it does for down-open state. This can be achieved purely by copy-pasting the Storyboards  from ...OpenDown visual states and visual state transitions to the respective ...OpenUp  counterparts. Unfortunately the manual copy-pasting is the only option, because extracting the Storyboards  into separate resources and referencing them with {StaticResource} isn’t supported.

To get a full copy of the default control style you can use either the XAML Designer (right-click the control, select Edit Template and Edit a Copy…), or search for it in C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP{version}\Generic\generic.xaml

To spare your Ctrl , C  and V  keys, I have prepared the full modified style which you can take and use in your app. You can get this style here on my GitHub along with the full sample project for this article. Beware that this style targets the Anniversary Update. I recommend doing the changes manually if you target a different version.

Summary

The CommandBar  is a great control that works as we expect most of the time. When we hit an issue however, its template is quite easy to modify.

How to add new preview devices to the XAML Designer

The Visual Studio XAML Designer for Universal Windows Platform offers design-time device previews for several different screens size and scaling combos. Unfortunately, the default selection might not be sufficient for you in some cases, especially when you want to optimize for a specific screen. Is it possible to expand the selection with more devices?

Default device offering in Visual Studio

Continue reading “How to add new preview devices to the XAML Designer”

Tip: Curly brackets in XAML Binding’s ConverterParameter

While working on an UWP app, I wanted to create a string.Format  based value converter, so that I could provide a format string in the ConverterParameter , augment the data bound value with it and use the result as a key for a localized string from resources. When I tried to build the project however, I was met with the following cryptic error message:

Although the nor the error nor the generated diagnostic were too helpful, because I have mostly added just the new XAML binding, I suspected the error must be hidden there.

As you might expect, it is not possible to use curly brackets directly inside the XAML binding expression.

Solution is simple – escaping with backslash.

With this little change, the code will compile and the value converter works as expected.

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.