Backstage Tab Control

Use it for full-window pages of settings, account details, document information, printing or export options – anywhere an application wants a backstage, or simply a settings window whose sections are listed on the left. It is a TabControl, so the tabs are ordinary TabItems: the HeaderedContentControl.Header is the menu entry and the ContentControl.Content is the page. Selection, keyboard navigation, binding through ItemsControl.ItemsSource and SelectionChanged all work as for any tab control.

The menu

The menu column is MenuItemWidth wide, painted with MenuBackgroundBrush, and each entry is MenuItemHeight tall, in MenuFontFamily at MenuFontSize. The pages start 15 logical pixels to the right of the menu. The menu is always on the left; TabControl.TabStripPlacement has no effect.

Selection and hover

The selected entry is drawn as a bar with a notch cut into its right-hand edge, pointing at the page – the shape is MenuItemSelectionPointerStemPathData – filled with MenuItemSelectedStateFillBrush, outlined with MenuItemSelectedStateBorderBrush and lettered in MenuItemSelectedForegroundBrush. It fades in over a third of a second. An entry under the pointer is highlighted with HoverTabItemBackgroundBrush and HoverTabItemBorderBrush.

Colours and skins

The default given on each brush is the one used when no Binarymission skin is in force: a light grey menu with black text and a green selection. With a skin (BinarySkinManager) the menu takes the skin's colours, and any brush you set on the control wins over both. The menu's colours do not follow the Windows theme, so if you change MenuBackgroundBrush, change MenuItemForegroundBrush with it.

A document backstage with an Office-blue selection.

<Window x:Class="Editor.BackstageWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:office="clr-namespace:Binarymission.WPF.Controls.Office;assembly=Binarymission.WPF.Controls.BackstageTabControl"
        Title="File" Width="900" Height="560">

    <office:BackstageTabControl MenuItemWidth="190" MenuItemHeight="40" MenuFontSize="14"
                                MenuItemSelectedStateFillBrush="#2B579A"
                                MenuItemSelectedStateBorderBrush="#1E3F70"
                                HoverTabItemBackgroundBrush="#DCE6F4"
                                HoverTabItemBorderBrush="Transparent">
        <TabItem Header="Info">
            <StackPanel Margin="0,16">
                <TextBlock FontSize="24" Text="Quarterly report.docx" />
                <TextBlock Margin="0,8" Text="Last modified 14:32 by A. Patel" />
            </StackPanel>
        </TabItem>
        <TabItem Header="Recent">
            <ListBox ItemsSource="{Binding RecentDocuments}" />
        </TabItem>
        <TabItem Header="Print">
            <TextBlock Margin="0,16" Text="Printer and page settings go here." />
        </TabItem>
        <TabItem Header="Share">
            <TextBlock Margin="0,16" Text="Send as an attachment, or share a link." />
        </TabItem>
        <TabItem Header="Options" />
    </office:BackstageTabControl>
</Window>

The same control filled from code.

using System.Windows.Controls;
using System.Windows.Media;
using Binarymission.WPF.Controls.Office;

BackstageTabControl backstage = new BackstageTabControl
{
    MenuItemWidth = 190,
    MenuItemSelectedStateFillBrush = new SolidColorBrush(Color.FromRgb(0x2B, 0x57, 0x9A))
};
backstage.Items.Add(new TabItem { Header = "Info", Content = new TextBlock { Text = "Quarterly report.docx" } });
backstage.Items.Add(new TabItem { Header = "Print", Content = new TextBlock { Text = "Printer settings" } });
backstage.SelectedIndex = 0;