BinarySmartNavigator
A set of pages shown one at a time, with round previous and next buttons, a row of page dots and the current page's title – for a set-up wizard, a guided tour, a slide show or a step-by-step form.
public class BinarySmartNavigator : TabControl
Inherits from / implements: TabControl
Remarks
It is a TabControl with a different face. Each
BinarySmartNavigatorItem is one page: its HeaderedContentControl.Header
is the page's title and its ContentControl.Content is what the page shows. Instead of a
row of tabs, the control draws a title strip across the top holding the title of the page on show
and a small dot for every page, and a round button on each side that steps back and forward through
the pages.
Moving between pages
The user moves with the previous and next buttons, or by clicking a page's dot. The buttons
disable themselves at the first and last page, with a tooltip saying why, and the selection does
not wrap round. In code, set
SelectedIndex or
SelectedItem, and handle
SelectionChanged to follow the
user – checking that the event's OriginalSource is the navigator, as a list or combo box on a
page raises the same bubbling event. The keyboard works as in any tab control.
Layout and animation
NavigationOrientation puts the buttons at the left and right
(NavigationOrientationIs.Horizontal, the default) or at the top and bottom, pointing up
and down. ControlAnimationType chooses how a page arrives; by default it blinks out and
fades back in. Control.Padding is the space around each page's content, 12 by 8 logical
pixels by default.
Appearance
Every part has a brush of its own: the title strip (ItemTitleBackground,
ItemTitleForeground), the dots (ItemEllipse...), and the buttons at rest, under
the pointer, pressed and disabled (NavigationButton...), with an optional glow
(NavigationButtonHasDropShadow). The defaults given are the ones used with no
Binarymission skin in force; while a skin is applied through BinarySkinManager it supplies its
own, and a brush set on the control still wins.
Examples
A four-page set-up wizard. The assembly is
Binarymission.WPF.Controls.ListControls.BinarySmartNavigator.
<Window x:Class="Accounts.SetupWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:nav="clr-namespace:Binarymission.WPF.Controls.ListControls;assembly=Binarymission.WPF.Controls.ListControls.BinarySmartNavigator"
Title="Set up your company" Width="600" Height="400">
<DockPanel Margin="12">
<Button x:Name="finishButton" DockPanel.Dock="Bottom" HorizontalAlignment="Right"
Content="Finish" IsEnabled="False" Margin="0,8,0,0" />
<nav:BinarySmartNavigator x:Name="setupPages"
ControlAnimationType="ContentVanishesAndAppears"
SelectionChanged="OnPageChanged">
<nav:BinarySmartNavigatorItem Header="Welcome">
<TextBlock TextWrapping="Wrap"
Text="This wizard creates your company file. It takes about five minutes." />
</nav:BinarySmartNavigatorItem>
<nav:BinarySmartNavigatorItem Header="Company details">
<StackPanel>
<TextBlock Text="Registered name" />
<TextBox Text="{Binding CompanyName}" />
<TextBlock Text="Company number" Margin="0,8,0,0" />
<TextBox Text="{Binding CompanyNumber}" />
</StackPanel>
</nav:BinarySmartNavigatorItem>
<nav:BinarySmartNavigatorItem Header="VAT">
<CheckBox Content="The company is registered for VAT" IsChecked="{Binding IsVatRegistered}" />
</nav:BinarySmartNavigatorItem>
<nav:BinarySmartNavigatorItem Header="Ready">
<TextBlock Text="Press Finish to create the company file." />
</nav:BinarySmartNavigatorItem>
</nav:BinarySmartNavigator>
</DockPanel>
</Window>private void OnPageChanged(object sender, SelectionChangedEventArgs e)
{
// A list or combo box on a page raises the same bubbling event.
if (e.OriginalSource != setupPages)
{
return;
}
finishButton.IsEnabled = setupPages.SelectedIndex == setupPages.Items.Count - 1;
}See also
Members at a glance
| Constructors | |
|---|---|
BinarySmartNavigator | Creates a navigator with no pages. |
| Properties | |
ControlAnimationType | Gets or sets how a page is animated as it comes into view. |
ItemEllipseBorderBrushHover | Gets or sets the ring of a page dot while the pointer is over it. |
ItemEllipseBorderBrushNormal | Gets or sets the ring of the page dots for the pages not on show. |
ItemEllipseBorderBrushSelected | Gets or sets the ring of the dot for the page on show. |
ItemEllipseFillHover | Gets or sets the fill of a page dot while the pointer is over it. |
ItemEllipseFillNormal | Gets or sets the fill of the page dots for the pages not on show. |
ItemEllipseFillSelected | Gets or sets the fill of the dot for the page on show. |
ItemTitleBackground | Gets or sets the fill of the title strip across the top of the control, behind the page title and the page dots. |
ItemTitleForeground | Gets or sets the colour of the page title shown in the title strip. |
NavigationButtonArrowFill | Gets or sets the colour of the arrow on the previous and next buttons while they can be used. |
NavigationButtonDisabledArrowFill | Gets or sets the colour of the arrow on a previous or next button that is disabled because there is nothing further that way. |
NavigationButtonDisabledBackground | Gets or sets the fill of a previous or next button that is disabled because there is nothing further that way. |
NavigationButtonDisabledBorder | Gets or sets the outer ring of a disabled previous or next button. |
NavigationButtonDisabledBorderBrushForStrokeLayer | Gets or sets the inner ring of a disabled previous or next button. |
NavigationButtonDropShadowColor | Gets or sets the colour of the glow around the previous and next buttons. |
NavigationButtonDropShadowEffect | Gets the effect the previous and next buttons are drawn with to give them their glow. |
NavigationButtonDropShadowSoftness | Gets or sets how far the glow around the previous and next buttons spreads. |
NavigationButtonHasDropShadow | Gets or sets whether the previous and next buttons are drawn with a soft glow around them. |
NavigationButtonHoverBackground | Gets or sets the fill of a previous or next button while the pointer is over it. |
NavigationButtonHoverBorder | Gets or sets the outer ring of a previous or next button while the pointer is over it. |
NavigationButtonHoverBorderBrushForStrokeLayer | Gets or sets the inner ring of a previous or next button while the pointer is over it. |
NavigationButtonNormalBackground | Gets or sets the fill of the round previous and next buttons at rest. |
NavigationButtonNormalBorder | Gets or sets the outer ring of the round previous and next buttons at rest – and the outline of the whole control. |
NavigationButtonNormalBorderBrushForStrokeLayer | Gets or sets the inner ring of the previous and next buttons at rest. |
NavigationButtonPressedBackground | Gets or sets the fill of a previous or next button while it is pressed. |
NavigationButtonPressedBorder | Gets or sets the outer ring of a previous or next button while it is pressed. |
NavigationButtonPressedBorderBrushForStrokeLayer | Gets or sets the inner ring of a previous or next button while it is pressed. |
NavigationOrientation | Gets or sets where the previous and next buttons are: at the left and right edges, or at the top and bottom. |
SelectedHeader | Gets or sets the title shown in the title strip: the
HeaderedContentControl.Header of
the page on show. |
| Methods | |
GetContainerForItemOverride | Makes the page for an item that is not a page of its own: a BinarySmartNavigatorItem,
drawn as a dot like the others. |
OnApplyTemplate | Connects the previous and next buttons of the template – the parts named
PART_PreviousTabButton and PART_NextTabButton – and sets their state and glow. |
OnItemsChanged | Enables or disables the previous and next buttons again after pages are added or removed. |
OnSelectionChanged | Raises SelectionChanged, then
updates the title, the previous and next
buttons and runs the page animation. |
| Fields | |
ControlAnimationTypeProperty | Identifies the ControlAnimationType dependency property. |
ItemEllipseBorderBrushHoverProperty | Identifies the ItemEllipseBorderBrushHover dependency property. |
ItemEllipseBorderBrushNormalProperty | Identifies the ItemEllipseBorderBrushNormal dependency property. |
ItemEllipseBorderBrushSelectedProperty | Identifies the ItemEllipseBorderBrushSelected dependency property. |
ItemEllipseFillHoverProperty | Identifies the ItemEllipseFillHover dependency property. |
ItemEllipseFillNormalProperty | Identifies the ItemEllipseFillNormal dependency property. |
ItemEllipseFillSelectedProperty | Identifies the ItemEllipseFillSelected dependency property. |
ItemTitleBackgroundProperty | Identifies the ItemTitleBackground dependency property. |
ItemTitleForegroundProperty | Identifies the ItemTitleForeground dependency property. |
NavigationButtonArrowFillProperty | Identifies the NavigationButtonArrowFill dependency property. |
NavigationButtonDisabledArrowFillProperty | Identifies the NavigationButtonDisabledArrowFill dependency property. |
NavigationButtonDisabledBackgroundProperty | Identifies the NavigationButtonDisabledBackground dependency property. |
NavigationButtonDisabledBorderBrushForStrokeLayerProperty | Identifies the NavigationButtonDisabledBorderBrushForStrokeLayer
dependency property. |
NavigationButtonDisabledBorderProperty | Identifies the NavigationButtonDisabledBorder dependency property. |
NavigationButtonDropShadowColorProperty | Identifies the NavigationButtonDropShadowColor dependency property. |
NavigationButtonDropShadowEffectProperty | Identifies the NavigationButtonDropShadowEffect dependency property. |
NavigationButtonDropShadowSoftnessProperty | Identifies the NavigationButtonDropShadowSoftness dependency property. |
NavigationButtonHasDropShadowProperty | Identifies the NavigationButtonHasDropShadow dependency property. |
NavigationButtonHoverBackgroundProperty | Identifies the NavigationButtonHoverBackground dependency property. |
NavigationButtonHoverBorderBrushForStrokeLayerProperty | Identifies the NavigationButtonHoverBorderBrushForStrokeLayer dependency property. |
NavigationButtonHoverBorderProperty | Identifies the NavigationButtonHoverBorder dependency property. |
NavigationButtonNormalBackgroundProperty | Identifies the NavigationButtonNormalBackground dependency property. |
NavigationButtonNormalBorderBrushForStrokeLayerProperty | Identifies the NavigationButtonNormalBorderBrushForStrokeLayer dependency property. |
NavigationButtonNormalBorderProperty | Identifies the NavigationButtonNormalBorder dependency property. |
NavigationButtonPressedBackgroundProperty | Identifies the NavigationButtonPressedBackground dependency property. |
NavigationButtonPressedBorderBrushForStrokeLayerProperty | Identifies the NavigationButtonPressedBorderBrushForStrokeLayer dependency property. |
NavigationButtonPressedBorderProperty | Identifies the NavigationButtonPressedBorder dependency property. |
NavigationOrientationProperty | Identifies the NavigationOrientation dependency property. |
SelectedHeaderProperty | Identifies the SelectedHeader dependency property. |
Constructors
Properties
ControlAnimationType
Gets or sets how a page is animated as it comes into view.
- Value
- The control's style sets
ControlItemAnimationType.ContentVanishesAndAppears; the registered default, used under a style of your own that does not set it, isControlItemAnimationType.ScrollUpContent.
Remarks
The animation runs whenever a page is selected, by the user or from code. Every animation
lets go of the page when it ends, so the page goes back to sizing itself. Use
ControlItemAnimationType.None for a form the user moves through quickly.
Example
<nav:BinarySmartNavigator ControlAnimationType="AnimateItemIndicator" NavigationOrientation="Vertical" />ItemEllipseBorderBrushHover
Gets or sets the ring of a page dot while the pointer is over it.
- Value
- The default with no skin in force is White; a Binarymission skin supplies its own.
Remarks
The hover colours take precedence over the selected ones while the pointer is over the dot of the page on show.
ItemEllipseBorderBrushNormal
Gets or sets the ring of the page dots for the pages not on show.
- Value
- The default with no skin in force is Black; a Binarymission skin supplies its own.
ItemEllipseBorderBrushSelected
Gets or sets the ring of the dot for the page on show.
- Value
- The default with no skin in force is Black; a Binarymission skin supplies its own.
ItemEllipseFillHover
Gets or sets the fill of a page dot while the pointer is over it.
- Value
- The default with no skin in force is Yellow; a Binarymission skin supplies its own.
Remarks
The hover colours take precedence over the selected ones while the pointer is over the dot of the page on show.
ItemEllipseFillNormal
Gets or sets the fill of the page dots for the pages not on show.
- Value
- The default with no skin in force is Transparent, so the dots are rings; a Binarymission skin supplies its own.
ItemEllipseFillSelected
Gets or sets the fill of the dot for the page on show.
- Value
- The default with no skin in force is White; a Binarymission skin supplies its own.
ItemTitleBackground
Gets or sets the fill of the title strip across the top of the control, behind the page title and the page dots.
- Value
- The default with no skin in force is #A6C5EF, a light blue; a Binarymission skin supplies its own.
ItemTitleForeground
Gets or sets the colour of the page title shown in the title strip.
- Value
- The default with no skin in force is White; a Binarymission skin supplies its own.
SelectedHeader
Gets or sets the title shown in the title strip: the
HeaderedContentControl.Header of
the page on show.
- Value
- The selected page's header, or
nullwhen no page is selected.
Remarks
The control sets it each time the selection changes, so a value set from code lasts only until the next page is selected. Bind to it to show the page title elsewhere, in a window's title bar for example.
Example
<TextBlock Text="{Binding SelectedHeader, ElementName=setupPages}" FontWeight="SemiBold" />Methods
GetContainerForItemOverride
Makes the page for an item that is not a page of its own: a BinarySmartNavigatorItem,
drawn as a dot like the others.
Returns
A new BinarySmartNavigatorItem.
OnApplyTemplate
Connects the previous and next buttons of the template – the parts named
PART_PreviousTabButton and PART_NextTabButton – and sets their state and glow.
Remarks
A template of your own needs two Button parts with those names for the
buttons to work; either can be left out.
OnItemsChanged
Enables or disables the previous and next buttons again after pages are added or removed.
Parameters
e- The change to the pages.
OnSelectionChanged
Raises SelectionChanged, then
updates the title, the previous and next
buttons and runs the page animation.
Parameters
e- The pages that were selected and unselected.
Remarks
An override should call the base method to keep the title, the buttons and the animation working.
Fields
ControlAnimationTypeProperty static
Identifies the ControlAnimationType dependency property.
ItemEllipseBorderBrushHoverProperty static
Identifies the ItemEllipseBorderBrushHover dependency property.
ItemEllipseBorderBrushNormalProperty static
Identifies the ItemEllipseBorderBrushNormal dependency property.
ItemEllipseBorderBrushSelectedProperty static
Identifies the ItemEllipseBorderBrushSelected dependency property.
ItemEllipseFillHoverProperty static
Identifies the ItemEllipseFillHover dependency property.
ItemEllipseFillNormalProperty static
Identifies the ItemEllipseFillNormal dependency property.
ItemEllipseFillSelectedProperty static
Identifies the ItemEllipseFillSelected dependency property.
ItemTitleBackgroundProperty static
Identifies the ItemTitleBackground dependency property.
ItemTitleForegroundProperty static
Identifies the ItemTitleForeground dependency property.
SelectedHeaderProperty static
Identifies the SelectedHeader dependency property.