<Page
    x:Class="FlexChart101.Dynamic"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlexChart101"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Chart="using:C1.Xaml.Chart"
    DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.Resources>
            <Style TargetType="Button" x:Key="basicButtonStyle">
                <Setter Property="Width" Value="100" />
                <Setter Property="Height" Value="30" />
                <Setter Property="Margin" Value="0 8 30 0" />
            </Style>
            <Style TargetType="Button" x:Key="mobileButtonStyle">
                <Setter Property="Width" Value="70" />
                <Setter Property="Height" Value="30" />
                <Setter Property="Margin" Value="0 3 5 0" />
                <Setter Property="FontSize" Value="12" />
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <Button x:Name="btnSlow" Style="{StaticResource basicButtonStyle}" Content="{Binding BtnSlow, Source={StaticResource FlexChart101Localization}}" Click="btnSlow_Click" />
            <Button x:Name="btnMedium" Style="{StaticResource basicButtonStyle}" Content="{Binding BtnMedium, Source={StaticResource FlexChart101Localization}}" Click="btnMedium_Click" />
            <Button x:Name="btnFast" Style="{StaticResource basicButtonStyle}" Content="{Binding BtnFast, Source={StaticResource FlexChart101Localization}}" Click="btnFast_Click" />
            <Button x:Name="btnStop" Style="{StaticResource basicButtonStyle}" Content="{Binding BtnStop, Source={StaticResource FlexChart101Localization}}" Click="btnStart_Click" />
        </StackPanel>
        <Chart:C1FlexChart x:Name="flexChart" BindingX="Day" ChartType="Area" Stacking="Stacked" ItemsSource="{Binding DataContext.Data}" Grid.Row="1">
            <Chart:Series SeriesName="Trucks" Binding="Trucks" />
            <Chart:Series SeriesName="Ships" Binding="Ships" />
            <Chart:Series SeriesName="Planes" Binding="Planes" />
        </Chart: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 Target="btnSlow.Style" Value="{StaticResource mobileButtonStyle}" />
                        <Setter Target="btnMedium.Style" Value="{StaticResource mobileButtonStyle}" />
                        <Setter Target="btnFast.Style" Value="{StaticResource mobileButtonStyle}" />
                        <Setter Target="btnStop.Style" Value="{StaticResource mobileButtonStyle}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
