<Page
    x:Class="FlexChartExplorer.Axes"
    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:FlexChart="using:C1.Xaml.Chart"
    xmlns:local="using:FlexChartExplorer"
    DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.Resources>
            <Style TargetType="ComboBox">
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="ItemTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <TextBlock>
                                <TextBlock.Inlines>
                                    <Run Text="{Binding LabelAngle_Text, Source={StaticResource FlexChartExplorerLocalization}}"></Run>
                                    <Run Text="{Binding}"></Run>
                                </TextBlock.Inlines>
                            </TextBlock>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <ComboBox Width="200" Margin="10" x:Name="cbLabelAngle" 
                      ItemsSource="{Binding DataContext.LabelAngles}"
                      SelectedValue="{Binding ElementName=flexChart, Path=AxisX.LabelAngle, Mode=TwoWay}">
            </ComboBox>
        </StackPanel>
        <FlexChart:C1FlexChart x:Name="flexChart" ItemsSource="{Binding DataContext.Data}" BindingX="Time"
                             Grid.Row="1">
            <FlexChart:C1FlexChart.Series>
                <FlexChart:Series x:Name="precSeries" SeriesName="prec" Binding="Precipitation">
                    <FlexChart:Series.AxisY>
                        <FlexChart:Axis Position="Right" Min="0" Max="100" Title="precipitation, mm" MajorGrid="False"></FlexChart:Axis>
                    </FlexChart:Series.AxisY>
                </FlexChart:Series>
                <FlexChart:Series x:Name="avgSeries" SeriesName="t, avg" ChartType="LineSymbols" Binding="Temperature"></FlexChart:Series>
            </FlexChart:C1FlexChart.Series>
            <FlexChart:C1FlexChart.AxisY>
                <FlexChart:Axis Title="temperature, C" Min="0" MajorGrid="True" MajorTickMarks="None" AxisLine="False" Position="Left"></FlexChart:Axis>
            </FlexChart:C1FlexChart.AxisY>
        </FlexChart:C1FlexChart>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="540" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="flexChart.LegendPosition" Value="Bottom"></Setter>
                        <Setter Target="flexChart.FontSize" Value="12"></Setter>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
