This article demonstrates how to build an adaptive page header for UWP apps. The header contains a title, a horizontal tab-like menu bar, and an optional logo. On a wide screen all of these elements are positioned next to each other. When the screen narrows, the sizes of the title and the menu are fluidly scaled down. When the screen becomes too narrow, the tab control moves underneath the title in a fluid animation. Warning: there’s no rocket science involved, just some restyling and composition black magic.
Main menu and navigation
There is a consensus that he main navigation UI in a UWP app should be vertical menu on the left. Some time ago I wrote a blog post on how to build such navigation based on the SplitView control. Windows 10 Fall Creators Update introduces a new control for this: the NavigationView. It brings all of the top level navigation look-and-feel (menu, hamburger button, link to Settings, navigation service) in one control. For a good example on how to use it, create a Windows Template Studio Navigation Pane project and look at its source code.
In the sample project that I built for this article, I have reused the main menu UI and the Navigation service from the mentioned blog post: the so-called Shell page has a main menu on the left and a Frame that hosts the active user page on the right.
Secondary navigation
For commanding and secondary navigation UWP apps generally use horizontal menus or command bars. Some candidates for this are controls such as the different app bars, the UWP Toolkit Menu (which also supports vertical orientation), a future Ribbon that was promised in a recent Windows Community Standup and a lot of other controls that you may find in the field.
I decided to brew my own control: a light-weight horizontal menu that looks like the familiar Tab control. I put it together with the page title and an optional logo in a UserControl to be used as page header. The same header will appear on top of each content page that belongs to the same top level menu item. I did not introduce another Frame control and stayed close to the Pane-Header-Content paradigm of the already mentioned NavigationView.
Sample app
I built a small sample app with 12 content pages, unevenly spread over two main menu items. Here’s how the page header looks like with a title, 7 menu items (that’s what I target as a maximum) and no fixed logo:
Here’s a page with its title, a 5-items tab and a fixed logo at the right – that’s the default configuration in most of the apps that I’m currently building:
Building a lightweight tab control
The Tab control is nothing more than a styled ListView: a horizontal list of items, of which one can be selected:
<ListView x:Name="Menu"
SelectionChanged="Menu_OnSelectionChanged"
Style="{StaticResource MenuListViewStyle}"
ItemContainerStyle="{StaticResource MenuListViewItemStyle}"
ItemTemplate="{StaticResource MenuItemTemplate}"
HorizontalAlignment="Left"
Margin="20 10 10 0" />
In its custom Style we visually attach the tabs (items) to the content below by aligning the WrapGrid in the ItemsPanelTemplate to the bottom.
<Style x:Key="MenuListViewStyle"
TargetType="ListView">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal"
HorizontalAlignment="Right"
VerticalAlignment="Bottom" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
Through the custom ItemContainerStyle we ensure that background colors of selected and non-selected tabs correspond to the background colors of header and content.
<Style x:Key="MenuListViewItemStyle"
TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter SelectedBackground="{StaticResource PageBackgroundBrush}"
SelectedPointerOverBackground="{StaticResource TenPercentLighterBrush}"
PointerOverBackground="{StaticResource TenPercentDarkerBrush}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
ContentMargin="{TemplateBinding Padding}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Finally the ItemTemplate makes the items look like menu buttons, with an SVG icon (of any size, unlike the standard AppBarButton) and a text:
<DataTemplate x:Key="MenuItemTemplate">
<StackPanel Orientation="Vertical"
Height="72"
Width="80"
Padding="4 4 4 0">
<Border Background="Transparent"
ToolTipService.ToolTip="{Binding Text}">
<Path x:Name="Glyph"
Data="{Binding Glyph}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Height="40"
Width="40"
Fill="{StaticResource PageForegroundBrush}"
Stretch="Uniform" />
</Border>
<TextBlock Text="{Binding Text}"
Margin="0 4 0 0"
Foreground="{StaticResource PageForegroundBrush}"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
This results in a clean UI that looks more or less like the familiar Tab control, but only works for a limited (<8) number of menu items. It you want more options in the same space, then I would suggest to restyle an instance of the UWP Toolkit Carousel to make a ‘rolling tab control’.
Let’s dive into the behavior. When you click a menu item, the selection changed event handler calls the navigation service in the exact same way as in the left hand main menu:
private void Menu_OnSelectionChanged(
object sender,
SelectionChangedEventArgs e)
{
if (e.AddedItems.First() is MenuItem menuItem
&& menuItem.IsNavigation)
{
Navigation.Navigate(menuItem.NavigationDestination);
}
}
You navigate within the content frame to a new content page. That page contains the same page header (or another!). On the menu in the page header, the appropriate tab is selected:
/// <summary>
/// Highlights the (first) menu item that corresponds to the page.
/// </summary>
/// <param name="pageType">Type of the page.</param>
public void SetTab(Type pageType)
{
// Lookup destination type in menu(s)
var item = (from i in Menu.Items
where (i as MenuItem).NavigationDestination == pageType
select i).FirstOrDefault();
if (item != null)
{
Menu.SelectedItem = item;
}
else
{
Menu.SelectedIndex = -1;
}
}
Here’s the Tab Control in action:
Making it Adaptive and Fluid
Initially, the title and the tab control each get half of the width of the page (minus the logo). This positions the first tab of the menu always at the same place, which gives a nice consistent UI. For a reasonable title and a submenu with a reasonable number of items, half the screen width should suffice. To deal with less reasonable content, each control is wrapped in a ViewBox that will stretch (only) down if needed.
<!-- Title -->
<GridViewItem VerticalAlignment="Stretch"
VerticalContentAlignment="Center"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Left">
<Viewbox x:Name="Title"
Stretch="Uniform"
StretchDirection="DownOnly"
HorizontalAlignment="Left"
VerticalAlignment="Center">
<TextBlock Foreground="{StaticResource PageForegroundBrush}"
FontSize="48"
FontWeight="Light"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="48 8 0 0">
<Run Text="Others" />
</TextBlock>
</Viewbox>
</GridViewItem>
<!-- Navigation -->
<GridViewItem HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalAlignment="Stretch"
VerticalContentAlignment="Bottom"
Margin="0"
Padding="0">
<Viewbox x:Name="MenuBar"
Stretch="Uniform"
StretchDirection="DownOnly"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Margin="0">
<ListView x:Name="Menu"
SelectionChanged="Menu_OnSelectionChanged"
Style="{StaticResource MenuListViewStyle}"
ItemContainerStyle="{StaticResource MenuListViewItemStyle}"
ItemTemplate="{StaticResource MenuItemTemplate}"
HorizontalAlignment="Left"
Margin="20 10 10 0" />
</Viewbox>
</GridViewItem>
When the screen becomes too narrow, the elements are placed underneath each other. Most implementations for this scenario rely on a Visual State Trigger that changes the Orientation of a StackPanel. Unfortunately a StackPanel is not good in stretching its children, and I’m not sure whether its orientation change can be animated (Maybe it can, I just didn’t try it out). Instead we decided to place the title and menu as GridViewItems in a GridView with a WrapGrid as ItemsPanelTemplate. You can hook implicit animations to these items when their offset changes – more details in this blog post. The stretching and positioning of the GridView’s items are controlled by aligning the ItemWidth of the inner WrapGrid to theGridView’s own ActualWidth. I decided to use a SizeChanged event handler for this, but this might also be done through an element binding.
private void GridView_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (_itemsPanel == null)
{
return;
}
// Only react to change in Width.
if (e.NewSize.Width != e.PreviousSize.Width)
{
AdjustItemTemplate();
}
}
private void ItemsPanel_Loaded(object sender, RoutedEventArgs e)
{
// Avoid walking the Visual Tree on each Size change.
_itemsPanel = sender as WrapGrid;
// Initialize item template.
AdjustItemTemplate();
}
private void AdjustItemTemplate()
{
if (ActualWidth > 800)
{
// Two rows.
_itemsPanel.ItemWidth = ActualWidth / 2;
_itemsPanel.MinWidth = ActualWidth;
MenuBar.Margin = new Thickness(0, 0, 64, 0);
Title.Margin = new Thickness(0);
}
else
{
// One row.
_itemsPanel.ItemWidth = ActualWidth;
_itemsPanel.Width = ActualWidth;
MenuBar.Margin = new Thickness(0);
Title.Margin = new Thickness(0, 0, 64, 0);
}
}
By using a GridView to host the UI elements, I was able to reuse the animation from a previous blog post. [Well, almost: I removed the rotation, because you don’t want the tab control to look like a prancing pony when the screen resizes.] Using the Composition API, we define an ImplicitAnimationCollection for the Offset, and apply it to the Visual for each of the GridView’s items:
public static void RegisterImplicitAnimations(this ItemsControl itemsControl)
{
var compositor = ElementCompositionPreview.GetElementVisual(itemsControl as UIElement).Compositor;
// Create ImplicitAnimations Collection.
var elementImplicitAnimation = compositor.CreateImplicitAnimationCollection();
// Define trigger and animation that should play when the trigger is triggered.
elementImplicitAnimation["Offset"] = CreateOffsetAnimation(compositor);
foreach (SelectorItem item in itemsControl.Items)
{
var elementVisual = ElementCompositionPreview.GetElementVisual(item);
elementVisual.ImplicitAnimations = elementImplicitAnimation;
}
}
private static CompositionAnimationGroup CreateOffsetAnimation(Compositor compositor)
{
// Define Offset Animation for the Animation group
Vector3KeyFrameAnimation offsetAnimation = compositor.CreateVector3KeyFrameAnimation();
offsetAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
offsetAnimation.Duration = TimeSpan.FromSeconds(.2);
// Define Animation Target for this animation to animate using definition.
offsetAnimation.Target = "Offset";
// Add Animation to Animation group.
CompositionAnimationGroup animationGroup = compositor.CreateAnimationGroup();
animationGroup.Add(offsetAnimation);
return animationGroup;
}
The Menu’s constructor declares the default menu items (the hosting page can override this, if needed) and registers the animations:
public OthersMenu()
{
this.InitializeComponent();
// Populate Menu.
Menu.Items.Add(new MenuItem() {
Glyph = Icon.GetIcon("AquariusIcon"),
Text = "Aquarius",
NavigationDestination = typeof(AquariusPage) });
// More menu items ...
// Animate Menu.
GridView.RegisterImplicitAnimations();
}
That’s it! The content page should only host the user control in it’s XAML and does not need any code behind.
Here’s what all of this looks like in action:
The sample project lives here on GitHub.
Enjoy!
]
