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

  <!-- resources -->
  <UserControl.Resources>
    
    <local:ViewModel x:Key="_vm" />
    <local:CategoryConverter x:Key="_cvtCat" />
    <local:SupplierConverter x:Key="_cvtSup" />
    
    <Style TargetType="TextBlock" x:Key="_styTitle">
      <Setter Property="FontSize" Value="24" />
      <Setter Property="Foreground" Value="White" />
      <Setter Property="Margin" Value="4 8 0 4" />
    </Style>

  </UserControl.Resources>

  <!-- layout root -->
  <Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource _vm}">
    <Grid.RowDefinitions>
      <RowDefinition Height="auto" />
      <RowDefinition Height="auto" />
      <RowDefinition Height="auto" />
      <RowDefinition Height="1.5*" />
      <RowDefinition Height="auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <!-- stand-alone MultiColumnComboBox controls -->
    <Border Grid.Row="0" Background="Black">
      <TextBlock Text="MultiColumnComboBox Controls" Style="{StaticResource _styTitle}" />
    </Border>
    <Border Grid.Row="1" Background="#FFFADE" Padding="6">
      <Grid>
        <Grid.Resources>
          <Style TargetType="TextBlock">
            <Setter Property="Margin" Value="4 2 4 2" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Foreground" Value="#C0C0C0" />
          </Style>
          <Style TargetType="TextBox">
            <Setter Property="Margin" Value="4 2 4 2" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Foreground" Value="#C0C0C0" />
          </Style>
          <Style TargetType="local:MultiColumnComboBox">
            <Setter Property="Margin" Value="4 2 4 2" />
            <Setter Property="VerticalAlignment" Value="Center" />
          </Style>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <TextBlock Text="Products" Grid.Row="1" HorizontalAlignment="Right" />
        <TextBlock Text="Categories" Grid.Row="2" HorizontalAlignment="Right" />
        <TextBlock Text="Suppliers" Grid.Row="3" HorizontalAlignment="Right" />

        <local:MultiColumnComboBox x:Name="_cbProduct" Grid.Row="1" Grid.Column="1" Background="White" BorderThickness="1" Width="200" ItemsSource="{Binding Products}" SelectedValuePath="ProductID" DisplayMemberPath="ProductName">
          <local:MultiColumnComboBox.DropDownGrid>
            <c1:C1FlexGrid SelectionMode="Row" RowBackground="White" AlternatingRowBackground="White">
              <c1:C1FlexGrid.Columns>
                <c1:Column Binding="{Binding ProductID}" Header="ID" Width="50" />
                <c1:Column Binding="{Binding ProductName}" Header="Name" Width="*" MinWidth="350" Background="#FFFADE" />
                <c1:Column Binding="{Binding UnitsInStock}" Header="In Stock" Width="100" />
              </c1:C1FlexGrid.Columns>
            </c1:C1FlexGrid>
          </local:MultiColumnComboBox.DropDownGrid>
        </local:MultiColumnComboBox>
        <local:MultiColumnComboBox x:Name="_cbCategory" Grid.Row="2" Grid.Column="1" Background="White" BorderThickness="1" Width="200" ItemsSource="{Binding Categories}" SelectedValuePath="CategoryID" DisplayMemberPath="CategoryName">
          <local:MultiColumnComboBox.DropDownGrid>
            <c1:C1FlexGrid SelectionMode="Row" RowBackground="White" AlternatingRowBackground="White">
              <c1:C1FlexGrid.Columns>
                <c1:Column Binding="{Binding CategoryID}" Header="ID" Width="50" />
                <c1:Column Binding="{Binding CategoryName}" Header="Name" Width="200" Background="#FFFADE" />
                <c1:Column Binding="{Binding Description}" Width="*" MinWidth="350" />
              </c1:C1FlexGrid.Columns>
            </c1:C1FlexGrid>
          </local:MultiColumnComboBox.DropDownGrid>
        </local:MultiColumnComboBox>
        <local:MultiColumnComboBox x:Name="_cbSupplier" Grid.Row="3" Grid.Column="1" Background="White" BorderThickness="1" Width="200" ItemsSource="{Binding Suppliers}" SelectedValuePath="SupplierID" DisplayMemberPath="CompanyName">
          <local:MultiColumnComboBox.DropDownGrid>
            <c1:C1FlexGrid SelectionMode="Row" RowBackground="White" AlternatingRowBackground="White">
              <c1:C1FlexGrid.Columns>
                <c1:Column Binding="{Binding SupplierID}" Header="ID" Width="50" />
                <c1:Column Binding="{Binding CompanyName}" Header="Name" Width="200" Background="#FFFADE" />
                <c1:Column Binding="{Binding ContactName}" Header="Contact" Width="*" MinWidth="350" />
              </c1:C1FlexGrid.Columns>
            </c1:C1FlexGrid>
          </local:MultiColumnComboBox.DropDownGrid>
        </local:MultiColumnComboBox>

        <TextBlock Text="SelectedIndex" Grid.Row="0" Grid.Column="2" />
        <TextBox Text="{Binding SelectedIndex, ElementName=_cbProduct, Mode=TwoWay}" Grid.Row="1" Grid.Column="2" />
        <TextBox Text="{Binding SelectedIndex, ElementName=_cbCategory, Mode=TwoWay}" Grid.Row="2" Grid.Column="2" />
        <TextBox Text="{Binding SelectedIndex, ElementName=_cbSupplier, Mode=TwoWay}" Grid.Row="3" Grid.Column="2" />

        <TextBlock Text="SelectedValue" Grid.Row="0" Grid.Column="3" />
        <TextBox Text="{Binding SelectedValue, ElementName=_cbProduct, Mode=TwoWay}" Grid.Row="1" Grid.Column="3" />
        <TextBox Text="{Binding SelectedValue, ElementName=_cbCategory, Mode=TwoWay}" Grid.Row="2" Grid.Column="3" />
        <TextBox Text="{Binding SelectedValue, ElementName=_cbSupplier, Mode=TwoWay}" Grid.Row="3" Grid.Column="3" />

        <TextBlock Text="Text" Grid.Row="0" Grid.Column="4" />
        <TextBox Text="{Binding Text, ElementName=_cbProduct, Mode=TwoWay}" Grid.Row="1" Grid.Column="4" Width="300" />
        <TextBox Text="{Binding Text, ElementName=_cbCategory, Mode=TwoWay}" Grid.Row="2" Grid.Column="4" Width="300" />
        <TextBox Text="{Binding Text, ElementName=_cbSupplier, Mode=TwoWay}" Grid.Row="3" Grid.Column="4" Width="300" />

      </Grid>
    </Border>

    <!-- grid with multi-column editors -->
    <Border Grid.Row="2" Background="Black">
      <TextBlock Text="Products (with multi-column dropdowns)" Style="{StaticResource _styTitle}" />
    </Border>
    <c1:C1FlexGrid Name="_flexProd" Grid.Row="3" ItemsSource="{Binding Products}" AutoGenerateColumns="False">
      <c1:C1FlexGrid.Columns>
        <c1:Column Binding="{Binding ProductID}" Header="ID" Width="50" />
        <c1:Column Binding="{Binding ProductName, Mode=TwoWay}" Width="250" />
        <c1:Column Binding="{Binding CategoryID, Mode=TwoWay}" Header="Category" Width="200" ValueConverter="{StaticResource _cvtCat}">
          <c1:Column.CellEditingTemplate>
            <DataTemplate>
              <local:MultiColumnComboBox ItemsSource="{Binding Categories, Source={StaticResource _vm}}" SelectedValuePath="CategoryID" DisplayMemberPath="CategoryName" SelectedValue="{Binding CategoryID, Mode=TwoWay}">
                <local:MultiColumnComboBox.DropDownGrid>
                  <c1:C1FlexGrid SelectionMode="Row" RowBackground="White" AlternatingRowBackground="White">
                    <c1:C1FlexGrid.Columns>
                      <c1:Column Binding="{Binding CategoryID}" Header="ID" Width="50" />
                      <c1:Column Binding="{Binding CategoryName}" Header="Name" Width="200" Background="#FFFADE" />
                      <c1:Column Binding="{Binding Description}" Width="*" MinWidth="350" />
                    </c1:C1FlexGrid.Columns>
                  </c1:C1FlexGrid>
                </local:MultiColumnComboBox.DropDownGrid>
              </local:MultiColumnComboBox>
              </DataTemplate>
          </c1:Column.CellEditingTemplate>
        </c1:Column>
        <c1:Column Binding="{Binding SupplierID, Mode=TwoWay}" Header="Supplier" Width="250" ValueConverter="{StaticResource _cvtSup}">
          <c1:Column.CellEditingTemplate>
            <DataTemplate>
              <local:MultiColumnComboBox ItemsSource="{Binding Suppliers, Source={StaticResource _vm}}" SelectedValuePath="SupplierID" DisplayMemberPath="CompanyName" SelectedValue="{Binding SupplierID, Mode=TwoWay}">
                <local:MultiColumnComboBox.DropDownGrid>
                  <c1:C1FlexGrid SelectionMode="Row" RowBackground="White" AlternatingRowBackground="White">
                    <c1:C1FlexGrid.Columns>
                      <c1:Column Binding="{Binding SupplierID}" Header="ID" Width="50" />
                      <c1:Column Binding="{Binding CompanyName}" Header="Name" Width="200" Background="#FFFADE" />
                      <c1:Column Binding="{Binding ContactName}" Header="Contact" Width="*" MinWidth="350" />
                    </c1:C1FlexGrid.Columns>
                  </c1:C1FlexGrid>
                </local:MultiColumnComboBox.DropDownGrid>
              </local:MultiColumnComboBox>
            </DataTemplate>
          </c1:Column.CellEditingTemplate>
        </c1:Column>
        <c1:Column Binding="{Binding QuantityPerUnit}" Header="Qty/Unit" Width="200" />
        <c1:Column Binding="{Binding UnitsInStock}" Header="In Stock" Width="100" />
        <c1:Column Binding="{Binding Discontinued}" Header="Disct'd" Width="100" />
      </c1:C1FlexGrid.Columns>
    </c1:C1FlexGrid>

    <!-- same grid, but with standard editors -->
    <Border Grid.Row="4" Background="Black">
      <TextBlock Text="Products (with standard dropdowns)" Style="{StaticResource _styTitle}" />
    </Border>
    <c1:C1FlexGrid Grid.Row="5" ItemsSource="{Binding Products}" AutoGenerateColumns="False">
      <c1:C1FlexGrid.Columns>
        <c1:Column Binding="{Binding ProductID}" Header="ID" Width="50" />
        <c1:Column Binding="{Binding ProductName, Mode=TwoWay}" Width="250" />
        <c1:Column Binding="{Binding CategoryID, Mode=TwoWay}" Header="Category" Width="200" ValueConverter="{StaticResource _cvtCat}" />
        <c1:Column Binding="{Binding SupplierID, Mode=TwoWay}" Header="Supplier" Width="250" ValueConverter="{StaticResource _cvtSup}" />
        <c1:Column Binding="{Binding QuantityPerUnit}" Header="Qty/Unit" Width="200" />
        <c1:Column Binding="{Binding UnitsInStock}" Header="In Stock" Width="100" />
        <c1:Column Binding="{Binding Discontinued}" Header="Disct'd" Width="100" />
      </c1:C1FlexGrid.Columns>
    </c1:C1FlexGrid>
  </Grid>
</UserControl>