Connect(); 2017

Another year has come and with it the fourth annual on-line Microsoft Connect conference. Between 15th and 17th November you could watch the newest goodness from Microsoft for all developers on all platforms.

Two main keynotes were dedicated to intelligent cloud and building intelligent applications of the future. Let’s see what Scott Guthrie (of course in his favourite red polo shirt) and other speakers have unveiled. Continue reading “Connect(); 2017”

Checking for design mode in Xamarin.Forms

Visual Studio for Windows and Mac now includes Xamarin XAML Previewer, which allows you to preview your Xamarin.Forms XAML without having to launch the app. Unfortunately, there are times when your page constructor contains code that cannot be run in design mode (for example service resolution, etc.) and causes the previewer to crash. Can we easily check if the app is in preview (design) mode?

XAML Previewer
XAML Previewer

Continue reading “Checking for design mode in Xamarin.Forms”

Choosing NuGet package management format for new projects

The new Visual Studio 2017 comes with support for a new PackageReference package management format, which replaces the old Packages.config and project.json formats and puts the package references directly in the project file.This is bound to be the standard for NuGet in the future (or the one NuGet standard to rule them all, as they say ūüôā ), but is not supported in older versions of Visual Studio. Depending on your scenario, you might want to choose the appropriate package management format that suits your needs. Luckily, Visual Studio offers you this option via a new setting. Continue reading “Choosing NuGet package management format for new projects”

Using custom nuget.exe in VSTS build process

Soon after the release of Visual Studio 2017, the Visual Studio Team¬†Services¬†team has added a Hosted VS2017 build agent that has support for all the latest and greatest technologies. Unfortunately although the build task with Visual Studio 2017 is itself present, the newest version of NuGet wasn’t added, yet. Fortunately, it is possible to use a custom nuget.exe to circumvent this issue and be able to restore packages for project using the new csproj format with <PackageReference>. Continue reading “Using custom nuget.exe in VSTS build process”

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”

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.