<Page
    x:Class="FlexGridSamples.CustomColumns"
    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"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <!-- show songs in a FlexGrid -->
        <c1:C1FlexGrid x:Name="_flex" 
                   IsReadOnly="true"
                   HeadersVisibility="Column"
                   GridLinesVisibility="None"
                   MinColumnWidth="35"
                   MinRowHeight="50"
                   BorderThickness="1"    
                   SelectionMode="ListBox"
                   AutoGenerateColumns="False" >
            <c1:C1FlexGrid.Columns>
                <c1:Column x:Name="NameColumn" Binding="{Binding Name}" x:Uid="/FlexGridSamplesLib/Resources/CustomName" Header="Name"  AllowDragging="False" Width="320" />
                <c1:Column Binding="{Binding Duration}" x:Uid="/FlexGridSamplesLib/Resources/CustomDuration" Header="Duration" />
                <c1:Column Binding="{Binding Size}" x:Uid="/FlexGridSamplesLib/Resources/CustomSize" Header="Size" />
                <c1:Column Binding="{Binding Rating, Mode=TwoWay}" x:Uid="/FlexGridSamplesLib/Resources/CustomRating" Header="Rating" Width="200" />
                <c1:Column x:Name="ButtonColumn" Width="*">
                    <c1:Column.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                                <Button x:Name="btnMoveDown" Click="btnMoveDown_Click" BorderThickness="0" Width="50" Height="50">
                                    <TextBlock Text="&#xE011;" FontFamily="Segoe UI Symbol" FontSize="20"/>
                                </Button>
                                <Button x:Name="btnMoveUp" Click="btnMoveUp_Click"  BorderThickness="0" Width="50" Height="50">
                                    <TextBlock Text="&#xE010;" FontFamily="Segoe UI Symbol" FontSize="20"/>
                                </Button>
                                <Button x:Name="btDelete" Click="btDelete_Click" BorderThickness="0" Width="60" Height="50">
                                    <TextBlock Text="&#xE107;" FontFamily="Segoe UI Symbol" FontSize="20"/>
                                </Button>
                            </StackPanel>
                        </DataTemplate>
                    </c1:Column.CellTemplate>
                </c1:Column>
            </c1:C1FlexGrid.Columns>
        </c1:C1FlexGrid>
        <!-- progressbar above all other content -->
        <ProgressBar Name="_progressBar" IsIndeterminate="True" Width="400" Height="8"/>
        <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="_flex.FontSize" Value="10" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
