<Page
    x:Class="Test.SettingsFlyout"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Test"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <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="Black" BorderThickness="1,0,0,0" Name="Content">
        <Grid Background="Black">
            <Grid.RowDefinitions>
                <RowDefinition Height="80"/>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal" Grid.Row="0" Margin="40 32 17 13">
                <Button Click="BackButton_Click"/>
                <TextBlock Margin="7 2 0 0"  FontSize="26" Text="設定"/>
            </StackPanel>
            <Grid Margin="40,33,40,39" VerticalAlignment="Top" Grid.Row="1">
                <StackPanel x:Name="FlyoutContent">
                    <ToggleSwitch Margin="-6, 0, 0, 0" IsOn="{Binding IsRTL,Mode=TwoWay}"  Header = "右から左に表示する" HorizontalAlignment="Stretch"/>
                    <ToggleSwitch Margin="-6, 0, 0, 0" IsOn="{Binding ShowRuler,Mode=TwoWay}"  Header = "ルーラを表示する" HorizontalAlignment="Stretch"/>
                    <ToggleSwitch Margin="-6, 0, 0, 0" IsOn="{Binding ShowLineNumber,Mode=TwoWay}" Header = "行番号を表示する" HorizontalAlignment="Stretch"/>
                    <ToggleSwitch Margin="-6, 0, 0, 0" IsOn="{Binding ShowLineMarker,Mode=TwoWay}" Header = "キャレットラインを表示する" HorizontalAlignment="Stretch"/>
                    <ToggleSwitch Margin="-6, 0, 0, 0" IsOn="{Binding HilightXML,Mode=TwoWay}" Header = "XMLドキュメントのハイライトを行う" HorizontalAlignment="Stretch"/>
                    <ComboBox ItemsSource="{Binding LineBreakMethodList}" SelectedItem="{Binding CurrentLineBreakMethod,Mode=TwoWay}">
                        <ComboBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Title}"/>
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                    </ComboBox>
                </StackPanel>
            </Grid>
        </Grid>
    </Border>
</Page>