Toolbar

A row of any controls that share one size and the arrow keys, as uikit:Toolbar.

<Border BorderThickness="1" CornerRadius="6" BorderBrush="{DynamicResource UIKit.Border}" Width="520" HorizontalAlignment="Left">
  <uikit:Toolbar>
    <uikit:ToolbarGroup Spacing="4" AutomationProperties.Name="History">
      <Button Classes="icon-only" ToolTip.Tip="Undo">
        <PathIcon Data="{StaticResource UIKit.Icon.Undo2}" />
      </Button>
      <Button Classes="icon-only" ToolTip.Tip="Redo">
        <PathIcon Data="{StaticResource UIKit.Icon.Redo2}" />
      </Button>
    </uikit:ToolbarGroup>
    <Separator Classes="vertical" Height="20" />
    <uikit:ToolbarGroup Spacing="4" AutomationProperties.Name="Formatting">
      <ToggleButton Content="B" IsChecked="True" />
      <ToggleButton Content="I" />
      <ToggleButton Content="U" />
    </uikit:ToolbarGroup>
    <Separator Classes="vertical" Height="20" />
    <TextBox Width="120" PlaceholderText="Search" />
    <uikit:ToolbarSpacer />
    <Button Classes="primary small" Content="Publish" uikit:Toolbar.TakesSize="False" />
  </uikit:Toolbar>
</Border>

#Usage

uikit:Toolbar is a transparent row of any controls and content, centered on the row, in the look of the Toolbar. It gives its size to its controls: the size class goes on every templated control but a Separator, and plain Buttons also become ghost and compact, so Classes="icon-only" makes a square command. uikit:Toolbar.TakesSize="False" keeps a control's own size and color. Text, panels, a Separator Classes="vertical" Height="20" and uikit:ToolbarSpacer stay as they are; spacers share the width the other items leave. A uikit:ToolbarGroup is a run of controls announced as one group (AutomationProperties.Name), with no gap of its own (Spacing); it takes the toolbar's size and passes it on. With the focus on one of its controls, Left and Right move it to the previous or next control and wrap at the ends; a TextBox keeps the arrow keys for its caret. Tab moves through the controls as usual. Sizes: xsmall, the default small and medium (large is the same).

The demo has two groups, a separator, a TextBox, a spacer and a primary button that keeps its own look.