<UserControl
    x:Class="Filter.FilterControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:C1CollectionViewTest"
    xmlns:sys="using:System"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    Foreground="{StaticResource ApplicationForegroundThemeBrush}"
    FontSize="{StaticResource ControlContentThemeFontSize}" Margin="0,1,0,-1">

    <UserControl.Resources>

        <!-- measurements -->
        <GridLength x:Key="_barWidth">30</GridLength>

        <!-- colors/brushes -->
        <SolidColorBrush x:Key="_brHighlight" Color="Orange" />
        <SolidColorBrush x:Key="_brBar" Color="Black" />

        <!-- ListBox style: don't change the background when control gets focus -->
        <Style TargetType="ListBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBox">
                        <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent">
                            <ScrollViewer x:Name="ScrollViewer" VerticalScrollBarVisibility="Auto" >
                                <ItemsPresenter/>
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- ListBox item style: customize selection appearance -->
        <Style TargetType="ListBoxItem">
            <Setter Property="Padding" Value="6" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Top" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="_border" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                            <DoubleAnimation Storyboard.TargetName="_contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedUnfocused">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="_border" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                            <DoubleAnimation Storyboard.TargetName="_contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To=".95"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedPointerOver">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="_border" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                            <DoubleAnimation Storyboard.TargetName="_contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedPressed">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="_border" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                            <DoubleAnimation Storyboard.TargetName="_contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid>
                                <Border 
                                    x:Name="_border" 
                                    BorderThickness="12 4" 
                                    CornerRadius="6" 
                                    Opacity="0" 
                                    BorderBrush="{StaticResource _brHighlight}" 
                                    Background="Transparent" />
                                <ContentPresenter
                                    x:Name="_contentPresenter" 
                                    Margin="12"
                                    Content="{TemplateBinding Content}" 
                                    ContentTemplate="{TemplateBinding ContentTemplate}" 
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                    Opacity="0.5" />
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- ListBox item template: grid showing condition name and value -->
        <DataTemplate x:Key="_itemTemplate" >
            <Border Padding="4 0" HorizontalAlignment="Stretch">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="150" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding Header}" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
                    <TextBlock Grid.Column="1" Text=":" Margin="0 0 8 0" VerticalAlignment="Bottom" />
                    <TextBlock Grid.Column="2" Text="{Binding DisplayValue}" FontWeight="Bold" VerticalAlignment="Bottom" />
                </Grid>
            </Border>
        </DataTemplate>

        <!-- Histogram item template: bar with selected state and customizable height -->
        <DataTemplate x:Key="_histogramBarTemplate" >
            <Grid>
                <Rectangle Name="_bar" RenderTransformOrigin=".5 1" Margin="2 0 2 0" Fill="{StaticResource _brBar}" />
                <Rectangle HorizontalAlignment="Center" VerticalAlignment="Top" Width="1" Height="3" Margin="0 -3 0 0" Fill="Black" />
            </Grid>
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" >
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <!-- filter conditions -->
        <Border Name="_bdrConditions" Grid.ColumnSpan="2" >
            <ListBox 
                Name="_lbConditions" 
                Background="Transparent" 
                BorderThickness="0" 
                ItemTemplate="{StaticResource _itemTemplate}" />
        </Border>

        <!-- histogram and current value pointer -->
        <Border Name="_bdrHistogram" Grid.Row="1" Grid.ColumnSpan="2" >
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition />
                </Grid.RowDefinitions>

                <!-- current view count -->
                <TextBlock Name="_tbCount" Margin="0 0 0 10" FontWeight="Bold" Opacity="0.5" VerticalAlignment="Bottom" HorizontalAlignment="Center" />

                <!-- histogram -->
                <Border Grid.Row="1" >
                    <Border.Background>
                        <LinearGradientBrush EndPoint="1 0">
                            <GradientStop Color="Transparent" Offset="0" />
                            <GradientStop Color="#60808080" Offset="0.5" />
                            <GradientStop Color="Transparent" Offset="1" />
                        </LinearGradientBrush>
                    </Border.Background>
                    
                    <Grid Name="_histogram" MinHeight="120" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="{StaticResource _barWidth}" />
                        </Grid.ColumnDefinitions>

                        <!-- first element in histogram: ALL -->
                        <Grid Width="50" HorizontalAlignment="Center" VerticalAlignment="Stretch" >
                            <TextBlock
                                  Name="_tbAll"
                                  Text="ALL" FontWeight="Bold" Foreground="{StaticResource _brHighlight}"
                                  HorizontalAlignment="Center" VerticalAlignment="Center"
                                  RenderTransformOrigin=".5,.5" >
                                <TextBlock.RenderTransform>
                                    <RotateTransform Angle="-90" />
                                </TextBlock.RenderTransform>
                            </TextBlock>
                        </Grid>
                    </Grid>
                </Border>

                <!-- pointer -->
                <Polygon Name="_histogramPointer" Grid.Row="1" Fill="Black" Margin="0 0 0 -15" VerticalAlignment="Top" HorizontalAlignment="Center" Points="0 0 10 10 20 0" />
            </Grid>
        </Border>
    </Grid>
</UserControl>
