<UserControl x:Class="ControlExplorer.Controls.FlexGrid.FlexGridFilter"
    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:local="using:ControlExplorer.View"
             FontSize="20"
    Background="Transparent">    
    <Grid x:Name="LayoutRoot" Background="{ThemeResource FlyoutBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid x:Name="Header" VerticalAlignment="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Image Width="40" Height="40" Source="/Resources/AppBar/filter.png" Stretch="Uniform" Margin="9 8"/>
            <StackPanel Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Center">
                <TextBlock Text="FlexGrid" />
                <TextBlock Text="Filter" Margin="8 0 0 0"/>
            </StackPanel>
        </Grid>
        <TextBlock Text="text filter using 'contains' operator" Grid.Row="1" Margin="10 0" />
        <ScrollViewer Grid.Row="3" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Top">
            <ItemsControl x:Name="_flexGridColumns">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsStackPanel Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="110"/>
                                <ColumnDefinition MaxWidth="600" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{Binding Column.ColumnName}" 
                                       VerticalAlignment="Center" 
                                       HorizontalAlignment="Right" Margin="8 0"/>
                            <TextBox Text="{Binding Value, Mode=TwoWay}" Grid.Column="1" />
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Grid>
</UserControl>
