<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="EinstellungenDemo.EinstellungenFlyout"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:EinstellungenDemo"
    xmlns:common="using:EinstellungenDemo.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.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"
                                />

                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Border BorderBrush="#00b2f0" BorderThickness="1,0,0,0">
        <Grid Background="White" VerticalAlignment="Stretch">

            <Grid.RowDefinitions>
                <RowDefinition Height="80"/>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <!-- Titelleiste -->
            <Grid Background="#00b2f0" Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <StackPanel Orientation="Horizontal" Grid.Column="0" Margin="40, 32, 17, 13">
                    <Button Click="MySettingsBackClicked" Margin="0,3,0,0"  Style="{StaticResource SettingsBackButtonStyle}"/>
                    <TextBlock Margin="10,0,0,0" FontFamily="Segoe UI" FontWeight="SemiLight" FontSize="24.6667" Text="Optionen" Foreground="White"/>
                </StackPanel>
            </Grid>

            <!-- Einstellungen -->
            <ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1">
                <Grid Margin="40,33,40,39" VerticalAlignment="Top" Grid.RowSpan="3">

                    <StackPanel Name="flyoutContent">
                        <TextBlock Text="Farben" 
                                   FontWeight="Bold" Foreground="Black" 
                                   TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                        <ToggleSwitch Name="colourScheme" OnContent="Weiß auf Schwarz" OffContent="Schwarz auf Weiß" 
                                      Foreground="Black" Margin="-6,25, 0, 0" 
                                      HorizontalAlignment="Left" HorizontalContentAlignment="Left" 
                                      IsOn="True" Toggled="ToggleSwitch_Toggled_1" />
                    </StackPanel>
                    
                </Grid>
            </ScrollViewer>
        </Grid>

    </Border>
</common:LayoutAwarePage>
