<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:local="using:ControlCatalog.Models"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="ControlCatalog.Pages.DataGridPage">
  <UserControl.Resources>
    <local:GDPValueConverter x:Key="GDPConverter" />
    <DataTemplate x:Key="Demo.DataTemplates.CountryHeader">
      <StackPanel Orientation="Horizontal" Spacing="5">
        <PathIcon Height="12" Data="M 255 116 A 1 1 0 0 0 254 117 L 254 130 A 1 1 0 0 0 255 131 A 1 1 0 0 0 256 130 L 256 123.87109 C 256.1125 123.90694 256.2187 123.94195 256.33984 123.97852 C 257.18636 124.23404 258.19155 124.5 259 124.5 C 259.80845 124.5 260.52133 124.2168 261.17773 123.9668 C 261.83414 123.7168 262.43408 123.5 263 123.5 C 263.56592 123.5 264.5612 123.73404 265.37109 123.97852 C 266.18098 124.22299 266.82227 124.4668 266.82227 124.4668 A 0.50005 0.50005 0 0 0 267.5 124 L 267.5 118 A 0.50005 0.50005 0 0 0 267.17773 117.5332 C 267.17773 117.5332 266.50667 117.27701 265.66016 117.02148 C 264.81364 116.76596 263.80845 116.5 263 116.5 C 262.19155 116.5 261.47867 116.7832 260.82227 117.0332 C 260.16586 117.2832 259.56592 117.5 259 117.5 C 258.43408 117.5 257.4388 117.26596 256.62891 117.02148 C 256.39123 116.94974 256.17716 116.87994 255.98047 116.81445 A 1 1 0 0 0 255 116 z M 263 117.5 C 263.56592 117.5 264.5612 117.73404 265.37109 117.97852 C 266.00097 118.16865 266.29646 118.28239 266.5 118.35742 L 266.5 120.29297 C 266.25708 120.21012 265.97978 120.11797 265.66016 120.02148 C 264.81364 119.76596 263.80845 119.5 263 119.5 C 262.19155 119.5 261.47867 119.7832 260.82227 120.0332 C 260.16586 120.2832 259.56592 120.5 259 120.5 C 258.43408 120.5 257.4388 120.26596 256.62891 120.02148 C 256.39971 119.9523 256.19148 119.88388 256 119.82031 L 256 117.87109 C 256.1125 117.90694 256.2187 117.94195 256.33984 117.97852 C 257.18636 118.23404 258.19155 118.5 259 118.5 C 259.80845 118.5 260.52133 118.2168 261.17773 117.9668 C 261.83414 117.7168 262.43408 117.5 263 117.5 z M 263 120.5 C 263.56592 120.5 264.5612 120.73404 265.37109 120.97852 C 265.8714 121.12954 266.2398 121.25641 266.5 121.34961 L 266.5 123.30469 C 266.22286 123.20649 266.12863 123.1629 265.66016 123.02148 C 264.81364 122.76596 263.80845 122.5 263 122.5 C 262.19155 122.5 261.47867 122.7832 260.82227 123.0332 C 260.16586 123.2832 259.56592 123.5 259 123.5 C 258.43408 123.5 257.4388 123.26596 256.62891 123.02148 C 256.39971 122.9523 256.19148 122.88388 256 122.82031 L 256 120.87109 C 256.1125 120.90694 256.2187 120.94195 256.33984 120.97852 C 257.18636 121.23404 258.19155 121.5 259 121.5 C 259.80845 121.5 260.52133 121.2168 261.17773 120.9668 C 261.83414 120.7168 262.43408 120.5 263 120.5 z" />
        <TextBlock Text="{Binding}"/>
      </StackPanel>
    </DataTemplate>
  </UserControl.Resources>
  <UserControl.Styles>
    <Style Selector="DataGridCell.gdp">
      <Setter Property="Background" Value="{Binding Path=GDP, Mode=OneWay, Converter={StaticResource GDPConverter}}" />
    </Style>
    <Style Selector="DataGridColumnHeader:nth-last-child(1)">
      <Setter Property="FontWeight" Value="Bold" />
    </Style>
    <Style Selector="DataGridCell:nth-last-child(1)">
      <Setter Property="FontWeight" Value="Bold" />
    </Style>
    <Style Selector="DataGrid#dataGridGrouping DataGridRow:nth-child(5n+3)">
      <Setter Property="Foreground" Value="Red" />
      <Setter Property="FontWeight" Value="Bold" />
    </Style>
    <Style Selector="DataGrid#dataGridGrouping DataGridRow:nth-last-child(5n+1)">
      <Setter Property="Foreground" Value="Blue" />
      <Setter Property="FontWeight" Value="Bold" />
    </Style>
  </UserControl.Styles>
  <Grid RowDefinitions="Auto,Auto,*">
    <StackPanel Orientation="Vertical" Spacing="4" Grid.Row="0">
      <TextBlock Classes="h2">A control for displaying and interacting with a data source.</TextBlock>
    </StackPanel>
    <StackPanel Grid.Row="1" Spacing="4" Orientation="Horizontal" IsVisible="{Binding #EditableTab.IsSelected}">
      <TextBlock Text="FontSize:" VerticalAlignment="Center"/>
      <Slider x:Name="FontSizeSlider" Minimum="5" Maximum="30" Value="14" Width="100" VerticalAlignment="Center" />
      <CheckBox x:Name="IsThreeStateCheckBox" IsChecked="False" Content="IsThreeState"/>
    </StackPanel>
    <TabControl Grid.Row="2">
      <TabItem Header="DataGrid">
        <DockPanel>
          <CheckBox x:Name="ShowGDP"  IsChecked="True"  Content="Toggle GDP Column Visibility"
                    DockPanel.Dock="Top"/>
          <DataGrid Name="dataGrid1" Margin="12" CanUserResizeColumns="True" CanUserReorderColumns="True" CanUserSortColumns="True" HeadersVisibility="All"
                    RowBackground="#1000"
                    AlternatingRowBackground="#1fff">
            <DataGrid.Columns>
              <!-- Using HeaderTemplate -->
              <DataGridTextColumn Header="Country" HeaderTemplate="{StaticResource Demo.DataTemplates.CountryHeader}" Binding="{Binding Name}" Width="6*" />
              <!-- CompiledBinding example of usage. -->
              <DataGridTextColumn Header="Region" Binding="{CompiledBinding Region}" Width="4*" x:DataType="local:Country" />
              <DataGridTextColumn Header="Population" Binding="{Binding Population}" Width="3*" />
              <DataGridTextColumn Header="Area" Binding="{Binding Area}" Width="3*" />
              <DataGridTextColumn Header="GDP" Binding="{Binding GDP}" Width="3*" CellStyleClasses="gdp"
                                  MinWidth="200"
                                  IsVisible="{Binding #ShowGDP.IsChecked}"/>
            </DataGrid.Columns>
          </DataGrid>
        </DockPanel>
      </TabItem>
      <TabItem Header="Grouping">
        <DataGrid Name="dataGridGrouping" Margin="12">
          <DataGrid.Columns>
            <DataGridTextColumn Header="Country" Binding="{Binding Name}" Width="6*" />
            <DataGridTextColumn Header="Region" Binding="{Binding Region}" Width="4*" />
            <DataGridTextColumn DisplayIndex="3" Header="Population" Binding="{Binding Population}" Width="3*" />
            <DataGridTextColumn DisplayIndex="2" Header="Area" Binding="{Binding Area}" Width="3*" />
            <DataGridTextColumn Header="GDP" Binding="{Binding GDP}" Width="3*" />
          </DataGrid.Columns>
        </DataGrid>
      </TabItem>
      <TabItem x:Name="EditableTab" Header="Editable">
        <Grid RowDefinitions="*,Auto">
          <DataGrid Name="dataGridEdit" Margin="12" Grid.Row="0">
            <DataGrid.Columns>
              <DataGridTextColumn Header="First Name" Binding="{Binding FirstName}" Width="2*" FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}" />
              <DataGridTextColumn Header="Last" Binding="{Binding LastName}" Width="2*" FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}" />
              <DataGridCheckBoxColumn Header="Is Banned" Binding="{Binding IsBanned}" Width="*" IsThreeState="{Binding #IsThreeStateCheckBox.IsChecked, Mode=OneWay}" />
              <DataGridTemplateColumn Header="Age" >
                <DataGridTemplateColumn.CellTemplate>
                  <DataTemplate DataType="local:Person">
                    <TextBlock Text="{Binding Age, StringFormat='{}{0} years'}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                  </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
                <DataGridTemplateColumn.CellEditingTemplate>
                  <DataTemplate DataType="local:Person">
                    <NumericUpDown Value="{Binding Age}" FormatString="N0" HorizontalAlignment="Stretch" Minimum="0" Maximum="120" TemplateApplied="NumericUpDown_OnTemplateApplied" />
                  </DataTemplate>
                </DataGridTemplateColumn.CellEditingTemplate>
              </DataGridTemplateColumn>
            </DataGrid.Columns>
          </DataGrid>
          <Button Grid.Row="1" Name="btnAdd" Margin="12,0,12,12" Content="Add" HorizontalAlignment="Right" />
        </Grid>
      </TabItem>
    </TabControl>
  </Grid>
</UserControl>
