<UserControl x:Class="ControlExplorer.Controls.Sparkline.RegionSales"
             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:sp="using:C1.Xaml.Sparkline"
             mc:Ignorable="d">

    <Grid>
        <Grid.Resources>
            <Style x:Key="HeaderStyle" TargetType="TextBlock">
                <Setter Property="FontSize" Value="16" />
                <Setter Property="HorizontalAlignment" Value="Center" />
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="TextAlignment" Value="Center" />
                <Setter Property="TextWrapping" Value="WrapWholeWords" />
                <Setter Property="Foreground" Value="White" />
                <Setter Property="Margin" Value="1" />
            </Style>
            <Style x:Key="TextStyle" TargetType="TextBlock">
                <Setter Property="FontSize" Value="16" />
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="FontFamily" Value="Global User Interface" />
                <Setter Property="Foreground" Value="#444444" />
                <Setter Property="HorizontalAlignment" Value="Left" />
            </Style>
            <Style x:Key="NumericStyle"
                   BasedOn="{StaticResource TextStyle}"
                   TargetType="TextBlock">
                <Setter Property="HorizontalAlignment" Value="Right" />
            </Style>
            <Style TargetType="sp:C1Sparkline">
                <Setter Property="Height" Value="50" />
                <Setter Property="Margin" Value="2" />
            </Style>
        </Grid.Resources>
        <Grid Width="400" Margin="2 10 2 10">
            <Grid.RowDefinitions>
                <RowDefinition Height="40" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid Background="Gray">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="35" />
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="115" />
                    <ColumnDefinition Width="90" />
                    <ColumnDefinition Width="90" />
                </Grid.ColumnDefinitions>
                <TextBlock Style="{StaticResource HeaderStyle}" Text="RGN" />
                <TextBlock Grid.Column="1"
                           Style="{StaticResource HeaderStyle}"
                           Text="Total&#10;Sales" />
                <TextBlock Grid.Column="2"
                           Style="{StaticResource HeaderStyle}"
                           Text="Sales&#10;Trend" />

                <TextBlock Grid.Column="3"
                           Style="{StaticResource HeaderStyle}"
                           Text="Win&#10;Loss" />
                <TextBlock Grid.Column="4"
                           Style="{StaticResource HeaderStyle}"
                           Text="Profit&#10;Trend" />
            </Grid>
            <ScrollViewer Grid.Row="1" HorizontalScrollMode="Disabled">
                <ItemsControl x:Name="RegionSalesListBox" ItemsSource="{Binding Sales}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Grid Background="#EFEFEF">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="35" />
                                    <ColumnDefinition Width="70" />
                                    <ColumnDefinition Width="115" />
                                    <ColumnDefinition Width="90" />
                                    <ColumnDefinition Width="90" />
                                </Grid.ColumnDefinitions>
                                <TextBlock Style="{StaticResource TextStyle}" Text="{Binding State}" />
                                <Border Grid.ColumnSpan="5"
                                        HorizontalAlignment="Stretch"
                                        VerticalAlignment="Bottom"
                                        BorderBrush="#CCCCCC"
                                        BorderThickness="1" />
                                <TextBlock Grid.Column="1"
                                           Style="{StaticResource NumericStyle}"
                                           Text="{Binding TotalSalesFormatted}" />
                                <sp:C1Sparkline Grid.Column="2"
                                                Data="{Binding Data}"
                                                MarkersColor="DarkBlue"
                                                ShowMarkers="True" />

                                <sp:C1Sparkline Grid.Column="3"
                                                Data="{Binding Data}"
                                                NegativeColor="DarkRed"
                                                SeriesColor="DarkGreen"
                                                ShowNegative="True"
                                                SparklineType="Winloss" />
                                <sp:C1Sparkline Grid.Column="4"
                                                Data="{Binding Data}"
                                                HighMarkerColor="DarkGreen"
                                                LowMarkerColor="DarkRed"
                                                ShowHigh="True"
                                                ShowLow="True"
                                                SparklineType="Column" />
                            </Grid>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </Grid>
    </Grid>
</UserControl>
