<Page x:Class="ControlExplorer.SettingsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="using:ControlExplorer"
    mc:Ignorable="d">
    <Page.Resources>
        <local:OnOffConverter x:Key="onOffConverter" />
    </Page.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <local:PageBackgroundControl Grid.RowSpan="4" />
        <Grid x:Name="Header" Height="56" Background="{StaticResource CE-HeaderBackground}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Image Width="40" Height="40" Source="/Resources/Imaging/ico-WP-40px.png" Stretch="Uniform" Margin="16 8 10 8"/>
            <StackPanel Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Center">
                <TextBlock Text="Studio" Margin="0 0 5 0" FontWeight="SemiLight"  Style="{StaticResource CE-HeaderTextBlock}"/>
                <TextBlock Text="WinRT Edition" FontWeight="Bold"  Style="{StaticResource CE-HeaderTextBlock}"/>
            </StackPanel>
        </Grid>
        <TextBlock Grid.Row="1" Text="settings" FontSize="56" FontWeight="Light" Margin="16 5" />

        <TextBlock Text="application" 
                   Padding="20 0" Grid.Row="2" />

        <ScrollViewer Padding="20 0" MaxWidth="750" HorizontalAlignment="Left" Grid.Row="3">
            <StackPanel>
                <TextBlock Text="Use phone theme"/>
                <ToggleSwitch Header="{Binding InheritPhoneTheme, Converter={StaticResource onOffConverter}}" Grid.ColumnSpan="2" VerticalAlignment="Bottom" IsOn="{Binding InheritPhoneTheme, Mode=TwoWay}" Padding="12,0"/>

                <TextBlock TextWrapping="Wrap" Grid.Row="2" Grid.ColumnSpan="2" Margin="0 10 0 0"><Run Text="When enabled, the app inherits the theme being used by the phone, instead of using a custom one." /></TextBlock>

                <Grid  Grid.Row="3" VerticalAlignment="Top" Grid.ColumnSpan="2" Margin="0,40,0,0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Path Data="M7.833334,7.6999993 C7.0969543,7.6999993 6.5000005,8.2820292 6.5000005,8.999999 C6.5000005,9.7179699 7.0969543,10.299999 7.833334,10.299999 L9.1666679,10.299999 L9.1666679,12.9 L7.833334,12.9 C7.0969543,12.9 6.5000005,13.482029 6.5000005,14.199999 C6.5000005,14.91797 7.0969543,15.499999 7.833334,15.499999 L9.1666679,15.499999 L11.833334,15.499999 L13.166667,15.499999 C13.903048,15.499999 14.500001,14.91797 14.500001,14.199999 C14.500001,13.482029 13.903048,12.9 13.166667,12.9 L11.833334,12.9 L11.833334,7.6999993 L9.1666679,7.6999993 z M9.833334,2.4999998 C8.7287645,2.4999998 7.833334,3.3730445 7.833334,4.4499998 C7.833334,5.5269547 8.7287645,6.3999996 9.833334,6.3999996 C10.937903,6.3999996 11.833334,5.5269547 11.833334,4.4499998 C11.833334,3.3730445 10.937903,2.4999998 9.833334,2.4999998 z M10,0 C15.522847,0 20,4.4771523 20,10 C20,15.522847 15.522847,20 10,20 C4.4771523,20 0,15.522847 0,10 C0,4.4771523 4.4771523,0 10,0 z" Stretch="Fill" 
                     VerticalAlignment="Top" Height="45" Width="45" Fill="{ThemeResource PhoneAccentBrush}" HorizontalAlignment="Center" />
                    <TextBlock Grid.Column="1" Text="This shows how our controls inherit the phone theme automatically." VerticalAlignment="Center" Margin="10,0,1,0" TextWrapping="Wrap"/>
                </Grid>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Page>
