<UserControl x:Class="FlexChartMvvmDemo.View.FlexChartMvvmDemo"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:FlexChartMvvmDemo.View"
             xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
             xmlns:cnv="clr-namespace:FlexChartMvvmDemo.Converters"
             xmlns:viewModel="clr-namespace:FlexChartMvvmDemo.ViewModel"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <cnv:NullToVisibilityConverter x:Key="nullToVisCnv" />
        <Style TargetType="ComboBox">
            <Setter Property="Width" Value="120" />
            <Setter Property="VerticalContentAlignment" Value="Center"/>
        </Style>
    </UserControl.Resources>
    <Grid>
        <Grid.DataContext>
            <viewModel:OrdersViewModel />
        </Grid.DataContext>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
            <RowDefinition Height="32"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <TextBlock Margin="12" Text="Sales Data" TextAlignment="Center" FontSize="32" Grid.ColumnSpan="2" />

        <StackPanel Margin="8" Orientation="Horizontal" Grid.ColumnSpan="2" Grid.Row="1">
            <TextBlock Margin="8" Width="72" VerticalAlignment="Center" Text="Group by" />
            <ComboBox ItemsSource="{Binding Groups}" SelectedItem="{Binding Group, Mode=TwoWay}" />
        </StackPanel>
        <StackPanel Margin="8" Orientation="Horizontal" Grid.ColumnSpan="2" Grid.Row="2">
            <TextBlock Margin="8" Width="72" VerticalAlignment="Center" Text="Aggregate" />
            <ComboBox ItemsSource="{Binding Aggregates}" SelectedItem="{Binding Aggregate, Mode=TwoWay}" />
        </StackPanel>

        <c1:C1FlexChart x:Name="chart" SelectionMode="Point" 
                        Grid.Row="3" BindingX="{Binding Group}" ItemsSource="{Binding Orders}"
                        ToolTip="{x:Null}" Footer="{Binding Group}" >
            <c1:Series Binding="Amount" />
            <c1:C1FlexChart.SelectionStyle>
                <c1:ChartStyle StrokeThickness="3" Stroke="DarkBlue" />
            </c1:C1FlexChart.SelectionStyle>
            <c1:C1FlexChart.FooterStyle>
                <c1:ChartStyle FontStyle="Italic" />
            </c1:C1FlexChart.FooterStyle>
            <c1:C1FlexChart.AxisX>
                <c1:Axis Position="Bottom" LabelAngle="NaN" />
            </c1:C1FlexChart.AxisX>
        </c1:C1FlexChart>
        <StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="1" Grid.RowSpan="3" VerticalAlignment="Center">
            <Grid Margin="0 10 10 0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="80" />
                    <ColumnDefinition Width="60"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Group}" TextAlignment="Left" FontWeight="Bold"/>
                <TextBlock Grid.Column="1" TextAlignment="Right" FontWeight="Bold" Text="Amount"/>
            </Grid>
            <ListView x:Name="listView" BorderThickness="0" SelectedIndex="{Binding ElementName=chart,Path=SelectedIndex, Mode=TwoWay}" 
                      ItemsSource="{Binding Orders}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="80" />
                                <ColumnDefinition Width="60"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{Binding Country}" TextAlignment="Left"/>
                            <TextBlock Text="{Binding Category}" TextAlignment="Left"/>
                            <TextBlock Text="{Binding Year}" TextAlignment="Left"/>
                            <TextBlock TextAlignment="Right" Grid.Column="1" Text="{Binding Amount}"/>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackPanel>
        <TextBlock Margin="8" TextAlignment="Center" Grid.Row="4" Grid.ColumnSpan="2" VerticalAlignment="Center" TextWrapping="Wrap"
                   Text="Click on column to select" Visibility="{Binding ElementName=listView,Path=SelectedItem, Converter={StaticResource nullToVisCnv}}" />
    </Grid>
</UserControl>
