<Page x:Class="FlexGridSamples.MediaLibrary"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="using:FlexGridSamples"
             xmlns:c1="using:C1.Xaml.FlexGrid">
    <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>
                   Media Library: 
                </Run>
                 <Run x:Name="_txtSongs">
                   Songs
                </Run>
        </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="Custom Cells " 
        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}" Header="Title" AllowDragging="False" Width="350" />
                <c1:Column Binding="{Binding Duration}" />
                <c1:Column Binding="{Binding Size}"  />
                <c1:Column Binding="{Binding Rating, Mode=TwoWay}" 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>
