In this topic described how to work with Metro window and it's elements like title bar and application bar.

Metro window has some base elements like icon, title, title bar (optionallly), Minimize, Maximize/Restore and Close buttons, application bar (optionally) and resize grip (available only if ResizeMode set to CanResizeWithGrip [by default]).

Window layout

Title bar

You can use title bar to place your controls in window's caption. For example, help button.

 Copy imageCopy
 1<metro:Window.TitleBar>
 2  <Grid>
 3    <Grid.ColumnDefinitions>
 4      <ColumnDefinition Width="*"/>
 5      <ColumnDefinition Width="Auto"/>
 6    </Grid.ColumnDefinitions>
 7    <Button Grid.Column="1"
 8            Content="?"
 9            Click="HelpClick"
10            Style="{DynamicResource {x:Static metro:Window.DefaultCaptionButtonStyleKey}}"/>
11  </Grid>
12</metro:Window.TitleBar>

If you want to your buttons looks like Minimize, Maximize/Restore or Close buttons, then you need to set button style to resource with resource key DefaultCaptionButtonStyleKey or MainWindowCaptionButtonStyleKey for simple window and main window respectively.

Application bar

Application bar is a special popup panel with command buttons, which uses in Metro application as an alternative traditional menu and which contains the most common, accessible throughout the application commands.

To start use application bar, you need to set IsApplicationBarHost attached dependency property to True in control with type Decorator. For window with type Elysium.Controls.Window this control already included in default style.

 Copy imageCopy
1<Decorator metro:Window.IsApplicationBarHost="True"/>

To create application bar instance, place the ApplicationBar control to the ApplicationBar dependency property. Then place the command buttons in the application bar.

 Copy imageCopy
1<metro:Window.ApplicationBar>
2    <metro:ApplicationBar>
3        <metro:CommandButton Header="Notification"
4                             Click="NotificationClick">
5            <Rectangle Fill="Black" Stroke="Black" Width="24" Height="12"/>
6        </metro:CommandButton>
7    </metro:ApplicationBar>
8</metro:Window.ApplicationBar>

You can dock control inside application bar to left or right.

 Copy imageCopy
 1<metro:Window.ApplicationBar>
 2    <metro:ApplicationBar>
 3        <metro:CommandButton Header="Notification"
 4                             Click="NotificationClick">
 5            <Rectangle Fill="Black" Stroke="Black" Width="24" Height="12"/>
 6        </metro:CommandButton>
 7        <metro:CommandButton metro:ApplicationBar.Dock="Right">
 8            ...
 9        </metro:CommandButton>
10    </metro:ApplicationBar>
11</metro:Window.ApplicationBar>

See Also