Flyouts

A Flyout is an overlay for a window that can have custom content.

To use the flyouts, they must be defined within the FlyoutsControl. This control is then assigned to the Flyouts property of the MetroWindow.

<mah:MetroWindow.Flyouts>
    <mah:FlyoutsControl>
      <mah:Flyout x:Name="firstFlyout" Header="Flyout" Position="Right" Width="200">
          <!-- Your custom content here -->
      </mah:Flyout>

      <mah:Flyout Header="Second Flyout" IsOpen="{Binding IsSecondFlyoutOpen}" Position="Right" Width="300">
          <!-- Your custom content here -->
      </mah:Flyout>
    </mah:FlyoutsControl>
</mah:MetroWindow.Flyouts>

This creates 2 flyouts with a header, sliding out from the right side of the window.

To open a Flyout set the IsOpen property to true or use a property on your ModelView at the DataContext of the window.

The Position property can have these values

public enum Position
{
  Left,
  Right,
  Top,
  Bottom
}

Themed Flyouts

Flyouts can have various themes, assignable through the Theme property, those are:

public enum FlyoutTheme
{
  /// <summary>
  /// Adapts the Flyout's theme to the theme of its host window.
  /// </summary>
  Adapt,

  /// <summary>
  /// Adapts the Flyout's theme to the theme of its host window, but inverted.
  /// This theme can only be applied if the host window's theme abides the "Dark" and "Light" affix convention.
  /// (see <see cref="ThemeManager.GetInverseTheme"/> for more infos.
  /// </summary>
  Inverse,

  /// <summary>
  /// The dark theme. This is the default theme.
  /// </summary>
  Dark,
  Light,

  /// <summary>
  /// The flyouts theme will match the host window's accent color.
  /// </summary>
  Accent
}

Overlay Behavior

With the overlay behaviors you can set visibility of the Icon, LeftWindowCommands, RightWindowCommands and the WindowButtonCommands when a Flyout will be shown.

The LeftWindowCommands, RightWindowCommands and the Icon will never be shown over an opened Flyout.

[Flags]
public enum WindowCommandsOverlayBehavior
{
  /// <summary>
  /// Doesn't overlay a hidden TitleBar.
  /// </summary>
  Never = 0,

  /// <summary>
  /// Overlays a hidden TitleBar.
  /// </summary>
  HiddenTitleBar = 1 << 0
}

The WindowButtonCommands (Min, Max/Restore and Close Buttons) can be handled by these values.

[Flags]
public enum OverlayBehavior
{
  /// <summary>
  /// Doesn't overlay Flyouts nor a hidden TitleBar.
  /// </summary>
  Never = 0,

  /// <summary>
  /// Overlays opened <see cref="Flyout"/> controls.
  /// </summary>
  Flyouts = 1 << 0,

  /// <summary>
  /// Overlays a hidden TitleBar.
  /// </summary>
  HiddenTitleBar = 1 << 1,

  Always = ~(-1 << 2)
}