<Page
    x:Class="ExcelSamples.DemoPage"
    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"
    mc:Ignorable="d">

    <Page.Resources>
        <Style x:Key="TitleTextStyle" TargetType="TextBlock">
            <Setter Property="FontWeight" Value="Light" />
            <Setter Property="FontFamily" Value="Segoe UI Light" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontSize" Value="28" />
        </Style>
        <Style x:Key="BigButton" TargetType="Button" >
            <Setter Property="Width" Value="150" />
            <Setter Property="Margin" Value="4,2"></Setter>
            <Setter Property="Background" Value="White" />
        </Style>
        <Style x:Key="SmallButton" TargetType="Button" >
            <Setter Property="Width" Value="104" />
            <Setter Property="Margin" Value="1,2"></Setter>
            <Setter Property="Background" Value="Black" />
        </Style>
        <Style x:Key="MiddleButton" TargetType="Button" >
            <Setter Property="Width" Value="140" />
            <Setter Property="Margin" Value="4,2"></Setter>
            <Setter Property="Background" Value="Black" />
        </Style>
        <Style TargetType="StackPanel" >
            <Setter Property="Orientation" Value="Horizontal" />
            <Setter Property="Background" Value="DarkGray" />
        </Style>
    </Page.Resources>

    <Grid Name="LayoutRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition x:Name="row1" Height="52" />
            <RowDefinition Height="36" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid Background="#FF2C383D">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <StackPanel x:Name="stackPanel1" Margin="50 0 0 0">
                <Image Stretch="None" Source="../../Assets/C1Excel_48px.png" AutomationProperties.Name="Product Logo" HorizontalAlignment="Left" Margin="0 0 -5 0"/>
                <TextBlock Text="C1Excel"  Margin="15 0 0 0" VerticalAlignment="Center" Style="{StaticResource TitleTextStyle}" Name="FileName"/>
            </StackPanel>
            <StackPanel  x:Name="stackPanel2" Margin="0 0 50 0" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Right">
                <Button Name="_btnOpen" Content="Open Excel..." Click="_btnOpen_Click" Style="{StaticResource BigButton}"/>
                <Button Name="_btnHello" Content="Create Data" Click="_btnHello_Click" Style="{StaticResource BigButton}"/>
                <Button Name="_btnView" Content="Save..." Click="_btnSave_Click" Style="{StaticResource BigButton}"/>
            </StackPanel>
        </Grid>
        <Grid x:Name="content" Grid.Row="1" Grid.ColumnSpan="2" Background="White">
            <TextBlock  Name="_tbContent" Text="Empty" FontFamily="Courier New" TextWrapping="WrapWholeWords" />
        </Grid>
        
        <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's window size -->
            <VisualStateGroup>
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="540" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="MiddleLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="480" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="stackPanel1.Visibility" Value="Collapsed" />
                        <Setter Target="row1.Height" Value="40" />
                        <Setter Target="stackPanel2.Margin" Value="0 0 2 0" />
                        <Setter Target="stackPanel2.HorizontalAlignment" Value="Left" />
                        <Setter Target="content.Background" Value="DarkGray" />
                        <Setter Target="_btnOpen.Style" Value="{ThemeResource MiddleButton}" />
                        <Setter Target="_btnHello.Style" Value="{ThemeResource MiddleButton}" />
                        <Setter Target="_btnView.Style" Value="{ThemeResource MiddleButton}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="stackPanel1.Visibility" Value="Collapsed" />
                        <Setter Target="row1.Height" Value="40" />
                        <Setter Target="stackPanel2.Margin" Value="0 0 0 0" />
                        <Setter Target="stackPanel2.HorizontalAlignment" Value="Left" />
                        <Setter Target="content.Background" Value="DarkGray" />
                        <Setter Target="_btnOpen.Style" Value="{ThemeResource SmallButton}" />
                        <Setter Target="_btnHello.Style" Value="{ThemeResource SmallButton}" />
                        <Setter Target="_btnView.Style" Value="{ThemeResource SmallButton}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
