<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="GapAnalysis.MainPage" FontSize="16" FontFamily="Segoe UI" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="800" 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:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:local="clr-namespace:GapAnalysis">

  <UserControl.Resources>

    <!-- view models and converters -->
    <local:Traditional x:Key="_vmTraditional" />
    <local:LineConverter x:Key="_cvLine" />
    <local:ColorConverter x:Key="_cvColor" />
    <local:RatingConverter x:Key="_cvRating" />

    <local:Hierarchical x:Key="_vmHierarchical" />

    <local:FormModel x:Key="_vmForm" />
    <local:GroupHeaderConverter x:Key="_cvGroupHeader" />
    <local:FormCellFactory x:Key="_cfForm" />
    
    <!-- control styles -->
    <Style TargetType="c1:C1FlexGrid">
      <Setter Property="ShowMarquee" Value="True" />
      <Setter Property="RowBackground" Value="White" />
      <Setter Property="AlternatingRowBackground" Value="White" />
      <Setter Property="CursorBackground" Value="{x:Null}" />
      <Setter Property="Margin" Value="6" />
      <Setter Property="AllowResizing" Value="Both" />
      <Setter Property="AutoGenerateColumns" Value="False" />
      <Setter Property="KeyActionTab" Value="MoveAcross" />
    </Style>
    <Style TargetType="TextBlock" x:Key="_styleHelpText">
      <Setter Property="Margin" Value="0 6" />
      <Setter Property="TextWrapping" Value="Wrap" />
      <Setter Property="MaxHeight" Value="200" />
      <Setter Property="Foreground" Value="#151999" />
    </Style>
  </UserControl.Resources>

  <Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>

    <TextBlock Text="C1FlexGrid for Silverlight: Gap Analysis demo" FontSize="24" FontWeight="Bold" Margin="0 6" />

    <sdk:TabControl Grid.Row="1">

      <!-- traditional binding tab -->
      <sdk:TabItem Header="Traditional" DataContext="{StaticResource _vmTraditional}">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
          </Grid.RowDefinitions>
          <TextBlock Style="{StaticResource _styleHelpText}">
            Traditional binding: each row represents an item, each column represents a property in the item.
            <LineBreak />
            Demonstrates: validation, editing, grouping, sorting, filtering, adding/removing items, row/col resizing, checkbox/listbox, auto-complete,aggregates.
          </TextBlock>
          <c1:C1FlexGrid ItemsSource="{Binding Products}" AutoComplete="True" AllowAddNew="True" NewRowPosition="Top" ShowOutlineBar="True" Grid.Row="1">
            <c1:C1FlexGridFilterService.FlexGridFilter>
              <c1:C1FlexGridFilter NullValueString="(Empty)" />
            </c1:C1FlexGridFilterService.FlexGridFilter>
            <c1:C1FlexGrid.Columns>
              <c1:Column Binding="{Binding ID, Mode=TwoWay}" Width="150" />
              <c1:Column Binding="{Binding Name, Mode=TwoWay}" Width="200" />
              <c1:Column Binding="{Binding Line, Mode=TwoWay, Converter={StaticResource _cvLine}}" Width="150" />
              <c1:Column Binding="{Binding Color, Mode=TwoWay, Converter={StaticResource _cvColor}}" Width="150" />
              <c1:Column Binding="{Binding Price, Mode=TwoWay, StringFormat=n2}" GroupAggregate="Average" />
              <c1:Column Binding="{Binding Cost, Mode=TwoWay, StringFormat=n2}" GroupAggregate="Average" />
              <c1:Column Binding="{Binding Weight, Mode=TwoWay, StringFormat=n2}" GroupAggregate="Maximum" />
              <c1:Column Binding="{Binding Discontinued, Mode=TwoWay}" Header="Discd" />
              <c1:Column Binding="{Binding Rating, Mode=TwoWay, Converter={StaticResource _cvRating}}" Width="80" />
            </c1:C1FlexGrid.Columns>
          </c1:C1FlexGrid>
        </Grid>
      </sdk:TabItem>

      <!-- hierarchical binding tab -->
      <sdk:TabItem Header="Hierarchical" DataContext="{StaticResource _vmHierarchical}">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
          </Grid.RowDefinitions>
          <TextBlock Style="{StaticResource _styleHelpText}">
            Hierarchical binding: items in the source collection have sub-items.
            The grid's 'ChildItemsPath' property identifies the property that contains the sub-items.
            <LineBreak />
            Demonstrates: hierarchical (tree-style) binding.
          </TextBlock>
          <c1:C1FlexGrid ItemsSource="{Binding Files}" ChildItemsPath="Files" GroupRowBackground="White" Grid.Row="1">
            <c1:C1FlexGrid.Columns>
              <c1:Column Binding="{Binding Name}" Width="200" />
              <c1:Column Binding="{Binding Extension}" Header="Ext" Width="60" />
              <c1:Column Binding="{Binding Size, StringFormat='#,##0,,'}" Header="Size (kb)" Width="100" />
              <c1:Column Binding="{Binding Date, StringFormat=d}" Width="100" HorizontalAlignment="Center" />
            </c1:C1FlexGrid.Columns>
          </c1:C1FlexGrid>
        </Grid>
      </sdk:TabItem>

      <!-- form-style binding tab -->
      <sdk:TabItem Header="Form-Style" DataContext="{StaticResource _vmForm}">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
          </Grid.RowDefinitions>
          <TextBlock Style="{StaticResource _styleHelpText}">
            Form-style binding: Items are form items, with editable or calculated values.
            <LineBreak />
            Demonstrates: how to use a CellFactory to achieve complex binding behavior, 
            how to implement custom tab behavior.
          </TextBlock>
          <c1:C1FlexGrid ItemsSource="{Binding Fields}" GroupHeaderConverter="{StaticResource _cvGroupHeader}" GroupRowBackground="{x:Null}" CellFactory="{StaticResource _cfForm}" HeadersVisibility="None" SelectionMode="Cell" GridLinesVisibility="None" Grid.Row="1">
            <c1:C1FlexGrid.Columns>
              <c1:Column Binding="{Binding ID}" Width="60" FontWeight="Bold" />
              <c1:Column Binding="{Binding Description}" Width="500" />
              <c1:Column Binding="{Binding Value, Mode=TwoWay, StringFormat=n2, NotifyOnValidationError=true, ValidatesOnExceptions=true }" Width="300" />
            </c1:C1FlexGrid.Columns>
          </c1:C1FlexGrid>
        </Grid>
      </sdk:TabItem>
    </sdk:TabControl>
  </Grid>
</UserControl>