<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Name="FlyoutOverlay"
  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent" Visibility="Collapsed" x:Uid="Layout">
    <Grid.Resources>
        <Style x:Name="DefaultFlyoutStyle" TargetType="UserControl">
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="Width" Value="Auto"/>
            <Setter Property="Height" Value="Auto"/>
            <Setter Property="Margin" Value="5, 5, 5, 5"/>
        </Style>
        <Style x:Name="PaneLandscapeFlyoutStyle" TargetType="UserControl">
            <Setter Property="HorizontalAlignment" Value="Right"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="Width" Value="Auto"/>
            <Setter Property="Height" Value="Auto"/>
            <Setter Property="Margin" Value="0, 0, 5, 93"/>
        </Style>
        <Style x:Name="PanePortraitFlyoutStyle" TargetType="UserControl">
            <Setter Property="HorizontalAlignment" Value="Right"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="Width" Value="Auto"/>
            <Setter Property="Height" Value="Auto"/>
            <Setter Property="Margin" Value="0, 0, 5, 73"/>
        </Style>
        <Style x:Name="HorizontalStretchFlyoutStyle" TargetType="UserControl">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="Height" Value="Auto"/>
        </Style>
        <Style x:Name="FullStretchFlyoutStyle" TargetType="UserControl">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
        </Style>
        <Style x:Name="RightAlignedSettingsFlyoutStyle" TargetType="UserControl">
            <Setter Property="HorizontalAlignment" Value="Right"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="Width" Value="346"/>
            <Setter Property="Height" Value="Auto"/>
            <Setter Property="Margin" Value="0, 0, 0, 0"/>
        </Style>
        <Style x:Name="LeftAlignedSettingsFlyoutStyle" TargetType="UserControl">
          <Setter Property="HorizontalAlignment" Value="Left"/>
          <Setter Property="VerticalAlignment" Value="Stretch"/>
          <Setter Property="Width" Value="346"/>
          <Setter Property="Height" Value="Auto"/>
          <Setter Property="Margin" Value="0, 0, 0, 0"/>
        </Style>
        <Storyboard x:Name="FlyoutShowAnimation">
            <PopInThemeAnimation Storyboard.TargetName="FlyoutContainer" FromVerticalOffset="50" FromHorizontalOffset ="0"/>
        </Storyboard>
        <Storyboard x:Name="FlyoutHideAnimation">
            <PopOutThemeAnimation Storyboard.TargetName="FlyoutContainer"/>
        </Storyboard>
    </Grid.Resources>
    <UserControl x:Name="FlyoutContainer" Background="Black"/>
</Grid>
