<Page
    x:Class="FlexChartMvvmDemo.MainPage"
    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:cnv="using:FlexChartMvvmDemo.Converters"
    xmlns:c1="using:C1.Xaml.Chart"
    mc:Ignorable="d">
    <Page.Resources>
        <cnv:NullToVisibilityConverter x:Key="nullToVisCnv" />
    </Page.Resources>
    
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <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="{Binding Source={StaticResource FlexChartMvvmDemoLocalization}, Path=Title}" 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="{Binding Source={StaticResource FlexChartMvvmDemoLocalization}, Path=GroupBy}" />
            <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="{Binding Source={StaticResource FlexChartMvvmDemoLocalization}, Path=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>

        <ListView x:Name="listView" Grid.Column="1" Grid.Row="1" Grid.RowSpan="3" 
                  SelectedIndex="{Binding ElementName=chart,Path=SelectedIndex, Mode=TwoWay}" 
                  VerticalAlignment="Center" 
                  ItemsSource="{Binding Orders}">
            <ListView.HeaderTemplate>
                <DataTemplate>
                    <Grid Margin="10">
                        <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>
                </DataTemplate>
            </ListView.HeaderTemplate>
            
            <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>

        <TextBlock Margin="8" TextAlignment="Center" Grid.Row="4" Grid.ColumnSpan="2" VerticalAlignment="Center" TextWrapping="WrapWholeWords"
                   Text="{Binding Source={StaticResource FlexChartMvvmDemoLocalization}, Path=Select}" 
                   Visibility="{Binding ElementName=listView,Path=SelectedItem, Converter={StaticResource nullToVisCnv}}" />
    </Grid>
</Page>
