BackstageTabControl
A tab control laid out like the Office "File" backstage view: the tabs form a menu down the left, and the selected tab's page fills the space to its right, joined to the menu by an arrow-shaped highlight.
public class BackstageTabControl : TabControlInherits from / implements: TabControl
Remarks
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.
Examples
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;See also
Members at a glance
| Properties | |
|---|---|
HoverTabItemBackgroundBrush | Gets or sets the fill of a menu entry while the pointer is over it. |
HoverTabItemBorderBrush | Gets or sets the colour of the lines drawn above, below and to the right of a menu entry while the pointer is over it. |
MenuBackgroundBrush | Gets or sets the background of the menu column down the left of the control. |
MenuBorderBrush | Gets or sets the colour of the edge round the menu column. |
MenuBorderThickness | Gets or sets the width of the edge drawn round the menu column on each side. |
MenuFontFamily | Gets or sets the typeface of the text in the menu. |
MenuFontSize | Gets or sets the size of the text in the menu. |
MenuItemForegroundBrush | Gets or sets the colour of the menu entries' text, other than the selected one. |
MenuItemHeight | Gets or sets the height of each menu entry. |
MenuItemSelectedForegroundBrush | Gets or sets the colour of the selected menu entry's text. |
MenuItemSelectedStateBorderBrush | Gets or sets the colour of the outline drawn round the selected menu entry. |
MenuItemSelectedStateBorderThickness | Gets or sets the width of the outline round the selected menu entry on each side. |
MenuItemSelectedStateFillBrush | Gets or sets the fill of the selected menu entry – the arrow-shaped bar that points at the page. |
MenuItemSelectionPointerStemPathData | Gets or sets the shape of the highlight drawn behind the selected menu entry. |
MenuItemWidth | Gets or sets the width of the menu column, and so of every menu entry. |
| Fields | |
HoverTabItemBackgroundBrushProperty | Identifies the HoverTabItemBackgroundBrush dependency property. |
HoverTabItemBorderBrushProperty | Identifies the HoverTabItemBorderBrush dependency property. |
MenuBackgroundBrushProperty | Identifies the MenuBackgroundBrush dependency property. |
MenuBorderBrushProperty | Identifies the MenuBorderBrush dependency property. |
MenuBorderThicknessProperty | Identifies the MenuBorderThickness dependency property. |
MenuFontFamilyProperty | Identifies the MenuFontFamily dependency property. |
MenuFontSizeProperty | Identifies the MenuFontSize dependency property. |
MenuItemForegroundBrushProperty | Identifies the MenuItemForegroundBrush dependency property. |
MenuItemHeightProperty | Identifies the MenuItemHeight dependency property. |
MenuItemSelectedForegroundBrushProperty | Identifies the MenuItemSelectedForegroundBrush dependency property. |
MenuItemSelectedStateBorderBrushProperty | Identifies the MenuItemSelectedStateBorderBrush dependency property. |
MenuItemSelectedStateBorderThicknessProperty | Identifies the MenuItemSelectedStateBorderThickness dependency property. |
MenuItemSelectedStateFillBrushProperty | Identifies the MenuItemSelectedStateFillBrush dependency property. |
MenuItemSelectionPointerStemPathDataProperty | Identifies the MenuItemSelectionPointerStemPathData dependency property. |
MenuItemWidthProperty | Identifies the MenuItemWidth dependency property. |
Properties
HoverTabItemBackgroundBrush
Gets or sets the fill of a menu entry while the pointer is over it.
- Value
- The default is a pale blue (
#E5EFFA).
Remarks
The highlight fades in over about an eighth of a second, and is not shown on the selected entry.
See also
HoverTabItemBorderBrush
Gets or sets the colour of the lines drawn above, below and to the right of a menu entry while the pointer is over it.
- Value
- The default is a strong blue (
#1F68CC).
Remarks
Set Brushes.Transparent for a hover highlight with no lines, as in recent
versions of Office. The selected entry shows no hover highlight.
See also
Fields
HoverTabItemBackgroundBrushProperty static
Identifies the HoverTabItemBackgroundBrush dependency property.
HoverTabItemBorderBrushProperty static
Identifies the HoverTabItemBorderBrush dependency property.