<UserControl x:Class="Fortune1000.FilterControl"
    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"
    mc:Ignorable="d"
    xmlns:my="using:Fortune1000"
    xmlns:c1="using:C1.Xaml"
    d:DesignHeight="300" d:DesignWidth="400" >

    <UserControl.Resources>

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

        <!-- colors/brushes -->
        <Color x:Key="_clrAll">Orange</Color>
        <Color x:Key="_clrBar">Gray</Color>
        <SolidColorBrush x:Key="_brAll" Color="{StaticResource _clrAll}" />
        <SolidColorBrush x:Key="_brBar" Color="Black" />

        <!-- ListBox item style: customize selection appearance -->
        <Style x:Key="_itemStyle" 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>
                                            <ColorAnimation Storyboard.TargetName="_border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Duration="0" To="{StaticResource _clrAll}" />
                                            <DoubleAnimation Storyboard.TargetName="_border" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="_border" BorderThickness="12 4" CornerRadius="4" Opacity=".5" BorderBrush="Transparent" Background="Transparent">
                                <ContentPresenter x:Name="contentPresenter" 
                                                  Content="{TemplateBinding Content}"
                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  Margin="{TemplateBinding Padding}"/>
                            </Border>
                        </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 />
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding Header}" HorizontalAlignment="Right" Margin="0 0 8 0" />
                    <TextBlock Grid.Column="1" Text="{Binding DisplayValue}" FontWeight="Bold" />
                </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 Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <!-- filter conditions -->
        <Grid Name="_filterConditions" Grid.ColumnSpan="2" >

            <!-- conditions -->
            <ListBox x:Name="_lbConditions"
                     Background="Transparent" BorderThickness="0"
                     ItemTemplate="{StaticResource _itemTemplate}" >
            </ListBox>
        </Grid>

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

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

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

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

                <!-- pointer -->
                <Polygon x: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>
