<Page
    x:Class="FlexGrid101.CustomCells"
    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"
    xmlns:c1="using:C1.Xaml.FlexGrid"    
    xmlns:local="using:FlexGrid101"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <TextBlock x:Name="_txt" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Center" Grid.ColumnSpan="2" FontSize="14">
            <Run Text="{Binding Media_Text, Source={StaticResource FlexGridSamplesLocalization}}" />
            <Run x:Name="_txtSongs" Text="{Binding Songs_Text, Source={StaticResource FlexGridSamplesLocalization}}" />
        </TextBlock>

        <local:SearchBox Grid.Row="1"
          x:Name="_srchMedia" Grid.Column="1"
          Margin="10" 
          HorizontalAlignment="Right" />
        <StackPanel 
            Orientation="Horizontal" 
            HorizontalAlignment="Left" 
            Margin="0,0,0,20" >
            <CheckBox 
                x:Name="_chkOwnerDraw" 
                VerticalAlignment="Center" 
                Content="{Binding CustomCells_Content, Source={StaticResource FlexGridSamplesLocalization}}"
                IsChecked="true" 
                Click="_chkOwnerDraw_Click"/>
        </StackPanel>

        <!-- show songs in a FlexGrid -->
        <c1:C1FlexGrid x:Name="_flexMedia" Grid.ColumnSpan="2"
                   Grid.Row="2"
                   IsReadOnly="true"
                   HeadersVisibility="Column"
                   GridLinesVisibility="None"
                   MinColumnWidth="35"
                   MinRowHeight="35"
                   SelectionMode="Row"
                   SelectionBackground="#FF0AC2FF"
                   CursorBackground="#FF0AC2FF"
                   AutoGenerateColumns="False"
                   BorderThickness="1">
            <c1:C1FlexGrid.Columns>
                <c1:Column x:Name="NameColumn" Binding="{Binding Name}" x:Uid="/FlexGridSamplesLib/Resources/MediaName" Header="Name" AllowDragging="False" Width="350" />
                <c1:Column Binding="{Binding Duration}" x:Uid="/FlexGridSamplesLib/Resources/MediaDuration" Header="Duration" />
                <c1:Column Binding="{Binding Size}" x:Uid="/FlexGridSamplesLib/Resources/MediaSize" Header="Size" />
                <c1:Column Binding="{Binding Rating, Mode=TwoWay}" x:Uid="/FlexGridSamplesLib/Resources/MediaRating" Header="Rating" Width="200" />
            </c1:C1FlexGrid.Columns>
        </c1:C1FlexGrid>

        <!-- progressbar above all other content -->
        <ProgressBar 
            Name="_progressBar"
            IsIndeterminate="True" Width="400" Height="4" Grid.ColumnSpan="2" Grid.RowSpan="3"/>
        <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="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="_flexMedia.FontSize" Value="10" />
                        <Setter Target="_txt.FontSize" Value="10"/>
                        <Setter Target="_chkOwnerDraw.FontSize" Value="10"/>
                        <Setter Target="_chkOwnerDraw.Width" Value="80"/>
                        <Setter Target="_srchMedia.(Grid.Row)" Value="0"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
