<UserControl x:Class="WeatherChart.WeatherChartDemo"
             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="using:WeatherChart"
             xmlns:Chart="using:C1.Xaml.Chart"
             xmlns:Interaction="using:C1.Xaml.Chart.Interaction"
             mc:Ignorable="d"
             d:DesignWidth="600" d:DesignHeight="800">
    <Grid>
        <Grid.DataContext>
            <local:WeatherChartModel />
        </Grid.DataContext>
        <Grid.Resources>
            <Style TargetType="Chart:C1FlexChart">
                <Setter Property="FontSize" Value="10" />
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <TextBlock Text="{Binding Description}" TextWrapping="Wrap" Style="{ThemeResource CaptionTextBlockStyle}" Margin="20 0" />
        <Chart:C1FlexChart x:Name="chartTemperature" RenderMode="Direct2D" ItemsSource="{Binding Data}" ChartType="Line" BindingX="Date" Margin="8 0 0 0" LegendPosition="None" Grid.Row="1" Rendered="OnChartRendered">
            <Chart:Series SeriesName="MeanTemp" Binding="MeanTemp" />
            <Chart:Series SeriesName="MaxTemp" Binding="MaxTemp" />
            <Chart:Series SeriesName="MinTemp" Binding="MinTemp" />
            <Chart:C1FlexChart.AxisX>
                <Chart:Axis LabelAngle="45" Position="Top" AxisLine="False" />
            </Chart:C1FlexChart.AxisX>
        </Chart:C1FlexChart>
        <Chart:C1FlexChart x:Name="chartPressure" RenderMode="Direct2D" ItemsSource="{Binding Data}" ChartType="Area" BindingX="Date" LegendPosition="None" Grid.Row="2" Rendered="OnChartRendered">
            <Chart:Series SeriesName="Pressure" Binding="MeanPressure" />
            <Chart:C1FlexChart.AxisX>
                <Chart:Axis Position="None" />
            </Chart:C1FlexChart.AxisX>
            <Chart:C1FlexChart.AxisY>
                <Chart:Axis Min="950" MajorTickMarks="None" MajorGrid="True" AxisLine="False" />
            </Chart:C1FlexChart.AxisY>
        </Chart:C1FlexChart>
        <Chart:C1FlexChart x:Name="chartPrecipitation" RenderMode="Direct2D" ItemsSource="{Binding Data}" ChartType="Column" BindingX="Date" Margin="16 0 0 0" LegendPosition="None" Grid.Row="3" Rendered="OnChartRendered">
            <Chart:Series SeriesName="Precipitation" Binding="Precipitation" />
            <Chart:C1FlexChart.AxisX>
                <Chart:Axis Position="None"/>
            </Chart:C1FlexChart.AxisX>
            <Chart:C1FlexChart.AxisY>
                <Chart:Axis MajorTickMarks="None" MajorGrid="True" AxisLine="False"/>
            </Chart:C1FlexChart.AxisY>
        </Chart:C1FlexChart>
        <Chart:C1FlexChart x:Name="chartRangeSelector" ItemsSource="{Binding Data}" ToolTip="{x:Null}" ChartType="Line" BindingX="Date" Grid.Row="4" LegendPosition="None" Rendered="OnChartRendered">
            <Chart:Series SeriesName="MeanTemp" Binding="MeanTemp" />
            <Chart:C1FlexChart.AxisX>
                <Chart:Axis LabelAngle="45" AxisLine="False"/>
            </Chart:C1FlexChart.AxisX>
            <Chart:C1FlexChart.Layers>
                <Interaction:C1RangeSelector x:Name="rangeSelector" ValueChanged="OnRangeSelectorValueChanged"/>
            </Chart:C1FlexChart.Layers>
        </Chart:C1FlexChart>
    </Grid>
</UserControl>
