<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="GroupPanel.MainPage" mc:Ignorable="d" FontFamily="Segoe UI Light" FontSize="14" d:DesignHeight="300" d:DesignWidth="600" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        
        <StackPanel Margin="12">
            <TextBlock Text="Grouping Example" FontWeight="Bold" FontSize="20" FontFamily="Segoe UI" />
            <Rectangle Height=".5" Fill="DarkGray" />
            <TextBlock TextWrapping="Wrap">
                Create groups by dragging column headers into the grouping areas.
                Once you have created the groups, drag the markers to re-order the groups,
                or click them to remove or sort the groups.
            </TextBlock>
        </StackPanel>
        
        <sdk:TabControl Grid.Row="1">
            <sdk:TabItem Header="Basic Grouping">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <c1:C1FlexGridGroupPanel Background="WhiteSmoke" FlexGrid="{Binding ElementName=_flex}" />
                    <c1:C1FlexGrid x:Name="_flex" Grid.Row="1" />
                </Grid>
            </sdk:TabItem>
            <sdk:TabItem Header="Custom Grouping">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <c1:C1FlexGridGroupPanel x:Name="_groupPanelCustomGrouping" Grid.Row="0" Background="WhiteSmoke" WatermarkText="Drag column headers here to create groups." MaxGroups="8" HideGroupedColumns="False" DragMarkerColor="#FF5C54" FlexGrid="{Binding ElementName=_flexCustomGrouping}" />
                    <c1:C1FlexGrid x:Name="_flexCustomGrouping" Grid.Row="1" TopLeftCellBackground="Bisque" ColumnHeaderBackground="Bisque" RowHeaderBackground="Bisque" GroupRowBackground="LightGoldenrodYellow" RowBackground="White" AlternatingRowBackground="White" />
                </Grid>
            </sdk:TabItem>
        </sdk:TabControl>
    </Grid>
</UserControl>