<Page
    x:Class="FlexGrid101.RowDetails"
    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:c1="using:C1.Xaml.FlexGrid"    
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Margin="10">
            <TextBlock x:Name="lblMode" VerticalAlignment="Center"/>
            <ComboBox x:Name="showItemsPicker" HorizontalAlignment="Stretch"/>
        </StackPanel>
        <c1:C1FlexGrid x:Name="grid" Grid.Row="2" AutoGenerateColumns="False" HeadersVisibility="All" SelectionMode="Row">
            <c1:C1FlexGrid.Columns>
                <c1:Column Binding="{Binding Id}" Width="Auto"/>
                <c1:Column Binding="{Binding FirstName}" Width="*"/>
                <c1:Column Binding="{Binding LastName}" Width="*"/>
            </c1:C1FlexGrid.Columns>
            <c1:C1FlexGrid.RowDetailsTemplate>
                <DataTemplate>
                    <Grid Margin="3">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="Country:" Margin="3"/>
                        <TextBlock Text="{Binding Country}" Grid.Column="1" Margin="3"/>
                        <TextBlock Text="City:" Grid.Row="1" Margin="3"/>
                        <TextBlock Text="{Binding City}" Grid.Row="1" Grid.Column="1" Margin="3"/>
                        <TextBlock Text="Address:" Grid.Row="2" Margin="3"/>
                        <TextBlock Text="{Binding Address}" Grid.Row="2" Grid.Column="1" Margin="3"/>
                        <TextBlock Text="PostalCode:" Grid.Row="3" Margin="3"/>
                        <TextBlock Text="{Binding PostalCode}" Grid.Row="3" Grid.Column="1" Margin="3"/>
                    </Grid>
                </DataTemplate>
            </c1:C1FlexGrid.RowDetailsTemplate>
        </c1:C1FlexGrid>
    </Grid>
</Page>
