<common:LayoutAwarePage
    x:Class="TBS.Win8SettingsFlyout"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TBS"
    xmlns:common="using:TBS"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="768"
    d:DesignWidth="500.">
    
    <UserControl.Resources>
        <Style x:Key="SettingsBackButtonStyle" TargetType="Button">
            <Setter Property="MinWidth" Value="0"/>
            <Setter Property="FontFamily" Value="Segoe UI Symbol"/>
            <Setter Property="FontWeight" Value="Normal"/>
            <Setter Property="FontSize" Value="26.66667"/>
            <Setter Property="AutomationProperties.AutomationId" Value="BackButton"/>
            <Setter Property="AutomationProperties.Name" Value="Back"/>
            <Setter Property="AutomationProperties.ItemType" Value="Navigation Button"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootGrid" Width="30" Height="30">
                            <Grid Margin="-6,-6,0,0">
                                <TextBlock x:Name="BackgroundGlyph" Text="&#xE0D4;" Foreground="Transparent"/>
                                <TextBlock x:Name="NormalGlyph" Text="{StaticResource BackButtonSnappedGlyph}" Foreground="White"/>
                                <TextBlock x:Name="ArrowGlyph" Text="&#xE0C4;" Foreground="#00b2f0" Opacity="0"/>
                            </Grid>
                            <Rectangle
                                x:Name="FocusVisualWhite"
                                IsHitTestVisible="False"
                                Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" 
                                StrokeEndLineCap="Square"
                                StrokeDashArray="1,1"
                                Opacity="0"
                                StrokeDashOffset="1.5"
                                />

                            <Rectangle
                                x:Name="FocusVisualBlack"
                                IsHitTestVisible="False"
                                Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" 
                                StrokeEndLineCap="Square"
                                StrokeDashArray="1,1"
                                Opacity="0"
                                StrokeDashOffset="0.5"
                                />

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BackButtonPointerOverBackgroundThemeBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation
                                            Storyboard.TargetName="ArrowGlyph"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1"
                                            Duration="0"/>
                                            <DoubleAnimation
                                            Storyboard.TargetName="NormalGlyph"
                                            Storyboard.TargetProperty="Opacity"
                                            To="0"
                                            Duration="0"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimation
                                            Storyboard.TargetName="FocusVisualWhite"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1"
                                            Duration="0"/>
                                            <DoubleAnimation
                                            Storyboard.TargetName="FocusVisualBlack"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1"
                                            Duration="0"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused" />
                                    <VisualState x:Name="PointerFocused" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Border BorderBrush="#00b2f0" BorderThickness="1,0,0,0">
        <Grid Background="White" VerticalAlignment="Stretch">
           
            <!-- Root grid definition -->
            <Grid.RowDefinitions>
                <RowDefinition Height="80"/>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <!-- Header area for panel -->
            <Grid Background="#00b2f0" Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <StackPanel Orientation="Horizontal" Grid.Column="0" Margin="40, 32, 17, 13">
                    <Button x:ConnectionId='4' Margin="0,4,0,1"  Style="{StaticResource SettingsBackButtonStyle}" Width="43"                       />
                    <TextBlock x:Name="TitleLabel" Margin="10,0,0,0" FontFamily="Segoe UI" FontWeight="SemiLight" FontSize="24.6667" Text="Defaults" Foreground="White"/>
                    <Image Source="Assets/smalltile-sdk.png" Margin="400,0,6,0"/>
                </StackPanel>
            </Grid>

            <!-- Settings Panel Content -->
            <ScrollViewer VerticalScrollBarVisibility="Auto" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False" IsTapEnabled="False" Grid.Row="1" Foreground="{x:Null}" Background="Black">
                <Grid Margin="40,33,40,39" VerticalAlignment="Top" Grid.RowSpan="3">

                    <StackPanel x:Name="FlyoutContent">
                        <TextBlock x:Name="DifficultyLabel" Text="Difficulty" TextWrapping="Wrap" HorizontalAlignment="Left" Width="419" Height="27" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False" IsTapEnabled="False" FontSize="14" Foreground="White"/>
                        <ComboBox x:Name="DifficultyComboBox" RenderTransformOrigin="0.316,6.314" UseLayoutRounding="False" d:LayoutRounding="Auto" SelectedIndex="-1" Margin="61.482,0,1.705,0"/>
                        <TextBlock x:Name="AISpeedLabel" Text="AI Speed" TextWrapping="Wrap" HorizontalAlignment="Left" Width="419" Height="30" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False" IsTapEnabled="False" Margin="0,10,0,0" FontSize="14" Foreground="White"/>
                        <ComboBox x:Name="AISpeedComboBox" HorizontalAlignment="Right" Width="358"/>
                        <TextBlock x:Name="TextSpeedLabel" TextWrapping="Wrap" Text="Text Speed" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False" IsTapEnabled="False" Foreground="White" Margin="0,10,0,0" Height="23" FontSize="14" />
                        <ComboBox x:Name="TextSpeedComboBox" Margin="61,0,0,0"/>
                        <TextBlock x:Name="VibrateLabel" TextWrapping="Wrap" Text="Controller Vibration" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False" IsTapEnabled="False" Foreground="White" Height="28" Margin="0,10,0,0" FontSize="14"/>
                        <ToggleSwitch x:Name="VibrateToggle" Header="" HorizontalAlignment="Right" VerticalAlignment="Top" Width="358" Height="41"/>
                        <TextBlock x:Name="MusicVolLabel" TextWrapping="Wrap" Text="Music Volume" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False" IsTapEnabled="False" Foreground="White" Margin="0,10,0,0" FontSize="14" />
                        <Slider x:ConnectionId='1' x:Name="MusicVolSlider" Margin="61,0,0,0" Height="48"                                           />
                        <TextBlock x:Name="SFXVolLabel" TextWrapping="Wrap" Text="SFX Volume" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False" IsTapEnabled="False" Foreground="White" Margin="0,10,0,0" FontSize="14"/>
                        <Slider x:ConnectionId='2' x:Name="SFXVolSlider" Margin="61,0,0,0" Height="44"                                         />
                        <TextBlock x:Name="ShowTimerLabel" TextWrapping="Wrap" Text="Show Timer" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False" IsTapEnabled="False" Foreground="White" Height="26" Margin="0,10,0,0" FontSize="14"/>
                        <ToggleSwitch x:Name="ShowTimerToggle" Header="" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="61,0,0,0" Height="38"/>
                        <Button x:ConnectionId='3' x:Name="OkButton" Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="131,50,131,0"                       />
                    </StackPanel>
                </Grid>
            </ScrollViewer>
        </Grid>
            
    </Border>
</common:LayoutAwarePage>

