Tag: design

The default UWP Slider control features a very simple rectangular thumb. Luckily enough, thanks to the customizability of XAML design you can replace the default thumb with a custom control to give your app a fresh and original look.

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
CommandBaropens 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
...OpenDownvisual 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