<Page
    x:Class="SparklineSamples.AppearanceSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SparklineSamples"
    xmlns:c1="using:C1.Xaml.Sparkline"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <ResourceDictionary>
            <Style x:Key="NarrowLayoutTextBlock" TargetType="TextBlock" >
                <Setter Property="FontSize" Value="11" />
                <Setter Property="Width" Value="78" />
                <Setter Property="Height" Value="20" />
                <Setter Property="Margin" Value="1" />
                <Setter Property="VerticalAlignment" Value="Center" />
            </Style>
            <Style x:Key="ComboBoxStyle" TargetType="ComboBox">
                <Setter Property="Margin" Value="1" />
                <Setter Property="FontSize" Value="12" />
                <Setter Property="Width" Value="75" />
                <Setter Property="Height" Value="25" />
                <Setter Property="DisplayMemberPath" Value="Key" />
                <Setter Property="SelectedValuePath" Value="Value" />
                <Setter Property="Foreground" Value="Black" />
                <Setter Property="Background" Value="LightBlue" />
            </Style>
            <Style x:Key="NarrowLayoutCheckBox" TargetType="CheckBox" >
                <Setter Property="Width" Value="80" />
                <Setter Property="MinWidth" Value="80" />
                <Setter Property="FontSize" Value="12" />
                <Setter Property="Margin" Value="2" />
            </Style>
            <Style x:Key="WideLayoutTextBlock" TargetType="TextBlock" >
                <Setter Property="FontSize" Value="11" />
                <Setter Property="Width" Value="78" />
                <Setter Property="Height" Value="20" />
                <Setter Property="Margin" Value="1" />
                <Setter Property="VerticalAlignment" Value="Center" />
            </Style>
            <Style x:Key="WideLayoutCheckBox" TargetType="CheckBox" >
                <Setter Property="Width" Value="60" />
                <Setter Property="MinWidth" Value="65" />
                <Setter Property="FontSize" Value="11" />
                <Setter Property="Margin" Value="1" />
            </Style>
        </ResourceDictionary>
    </Page.Resources>
    <Grid>
        <Grid.DataContext>
            <local:SampleData />
        </Grid.DataContext>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <CheckBox Grid.Row="0" Grid.Column="0" x:Name="showMarks" Content="{Binding MarksCB_Content, Source={StaticResource SparklineSamplesLocalization}}" IsChecked="{Binding ElementName=sparkline, Path=ShowMarkers, Mode=TwoWay}"/>
            <CheckBox Grid.Row="0" Grid.Column="1" x:Name="displayXAxis" Content="{Binding XAxisCB_Content, Source={StaticResource SparklineSamplesLocalization}}" RelativePanel.RightOf="showMarks" IsChecked="{Binding ElementName=sparkline, Path=DisplayXAxis, Mode=TwoWay}"/>
            <CheckBox Grid.Row="0" Grid.Column="2" x:Name="showFirst" Content="{Binding FirstCB_Content, Source={StaticResource SparklineSamplesLocalization}}" RelativePanel.RightOf="displayXAxis" IsChecked="{Binding ElementName=sparkline, Path=ShowFirst, Mode=TwoWay}" />
            <CheckBox Grid.Row="0" Grid.Column="3" x:Name="showLast" Content="{Binding LastCB_Content, Source={StaticResource SparklineSamplesLocalization}}" IsChecked="{Binding ElementName=sparkline, Path=ShowLast, Mode=TwoWay}"/>
            <CheckBox Grid.Row="1" Grid.Column="0" x:Name="showHigh" Content="{Binding HighCB_Content,Source={StaticResource SparklineSamplesLocalization}}" RelativePanel.RightOf="showLast" IsChecked="{Binding ElementName=sparkline, Path=ShowHigh, Mode=TwoWay}"/>
            <CheckBox Grid.Row="1" Grid.Column="1" x:Name="showLow" Content="{Binding LowCB_Content, Source={StaticResource SparklineSamplesLocalization}}" RelativePanel.RightOf="showHigh" IsChecked="{Binding ElementName=sparkline, Path=ShowLow, Mode=TwoWay}"/>
            <CheckBox Grid.Row="1" Grid.Column="2" x:Name="showNegative" Content="{Binding NegativeCB_Content, Source={StaticResource SparklineSamplesLocalization}}" IsChecked="{Binding ElementName=sparkline, Mode=TwoWay, Path=ShowNegative}"/>
        </Grid>
        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Row="0" Grid.Column="0" x:Name="_SparklineType" Text="{Binding SparklineTypeTB_Text, Source={StaticResource SparklineSamplesLocalization}}" />
            <ComboBox Grid.Row="0" Grid.Column="1" x:Name="sparklineType" ItemsSource="{Binding SparklineTypes}" />
            <TextBlock  Grid.Row="0" Grid.Column="2" x:Name="_SeriesColor" Text="{Binding SeriesColorTB_Text, Source={StaticResource SparklineSamplesLocalization}}" />
            <ComboBox Grid.Row="0" Grid.Column="3" x:Name="SeriesColor" ItemsSource="{Binding DefaultColors}" />

            <TextBlock Grid.Row="1" Grid.Column="0" x:Name="_MarksColor" Text="{Binding MarksColorTB_Text, Source={StaticResource SparklineSamplesLocalization}}" />
            <ComboBox Grid.Row="1" Grid.Column="1" x:Name="MarksColor" ItemsSource="{Binding DefaultColors}" />
            <TextBlock Grid.Row="1" Grid.Column="2" x:Name="_FirstMarkColor" Text="{Binding FirstMarkColorTB_Text,Source={StaticResource SparklineSamplesLocalization}}" />
            <ComboBox Grid.Row="1" Grid.Column="3" x:Name="FirstMarkColor" ItemsSource="{Binding DefaultColors}" />

            <TextBlock Grid.Row="2" Grid.Column="0" x:Name="_HightMarkColor" Text="{Binding HighMarkColorTB_Text,Source={StaticResource SparklineSamplesLocalization}}" />
            <ComboBox Grid.Row="2" Grid.Column="1" x:Name="HightMarkColor" ItemsSource="{Binding DefaultColors}" />
            <TextBlock Grid.Row="2" Grid.Column="2" x:Name="_LowMarkColor" Text="{Binding LowMarkColorTB_Text, Source={StaticResource SparklineSamplesLocalization}}"  />
            <ComboBox Grid.Row="2" Grid.Column="3" x:Name="LowMarkColor" ItemsSource="{Binding DefaultColors}" />

            <TextBlock  Grid.Row="3" Grid.Column="0" x:Name="_XAxisColor" Text="{Binding AxisColorTB_Text, Source={StaticResource SparklineSamplesLocalization}}" />
            <ComboBox  Grid.Row="3" Grid.Column="1" x:Name="XAxisColor" ItemsSource="{Binding DefaultColors}" />
            <TextBlock  Grid.Row="3" Grid.Column="2" x:Name="_LastMarkColor" Text="{Binding LastMarkColorTB_Text, Source={StaticResource SparklineSamplesLocalization}}" />
            <ComboBox  Grid.Row="3" Grid.Column="3" x:Name="LastMarkColor" ItemsSource="{Binding DefaultColors}" />

            <TextBlock Grid.Row="4" Grid.Column="0" x:Name="_NegativeColor" Text="{Binding NegativeColorTB_Text, Source={StaticResource SparklineSamplesLocalization}}" />
            <ComboBox Grid.Row="4" Grid.Column="1" x:Name="NegativeColor" ItemsSource="{Binding DefaultColors}" RelativePanel.RightOf="_NegativeColor" />

        </Grid>
        <Grid x:Name="_grid" Grid.Row="2" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="4">
            <c1:C1Sparkline x:Name="sparkline" Data="{Binding DefaultData}" HorizontalAlignment="Left" Margin="4"
                            SparklineType="{Binding ElementName=sparklineType, Path=SelectedValue}"
                            NegativeColor="{Binding ElementName=NegativeColor, Path=SelectedValue}" 
                            LowMarkerColor="{Binding ElementName=LowMarkColor, Path=SelectedValue}" 
                            HighMarkerColor="{Binding ElementName=HightMarkColor, Path=SelectedValue}"
                            LastMarkerColor="{Binding ElementName=LastMarkColor, Path=SelectedValue}" 
                            FirstMarkerColor="{Binding ElementName=FirstMarkColor, Path=SelectedValue}"
                            MarkersColor="{Binding ElementName=MarksColor, Path=SelectedValue}" 
                            SeriesColor="{Binding ElementName=SeriesColor, Path=SelectedValue}"
                            AxisColor="{Binding ElementName=XAxisColor, Path=SelectedValue}" DisplayXAxis="True" ShowFirst="True" ShowLast="True" ShowLow="True">
            </c1:C1Sparkline>
        </Grid>
        
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="480" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="showHigh.(Grid.Row)" Value="0" />
                        <Setter Target="showLow.(Grid.Row)" Value="0" />
                        <Setter Target="showNegative.(Grid.Row)" Value="0" />
                        <Setter Target="showHigh.(Grid.Column)" Value="4" />
                        <Setter Target="showLow.(Grid.Column)" Value="5" />
                        <Setter Target="showNegative.(Grid.Column)" Value="6" />
                        <Setter Target="_XAxisColor.(Grid.Row)" Value="0" />
                        <Setter Target="_XAxisColor.(Grid.Column)" Value="4" />
                        <Setter Target="XAxisColor.(Grid.Row)" Value="0" />
                        <Setter Target="XAxisColor.(Grid.Column)" Value="5" />
                        <Setter Target="_LastMarkColor.(Grid.Row)" Value="1" />
                        <Setter Target="_LastMarkColor.(Grid.Column)" Value="4" />
                        <Setter Target="LastMarkColor.(Grid.Row)" Value="1" />
                        <Setter Target="LastMarkColor.(Grid.Column)" Value="5" />
                        <Setter Target="_NegativeColor.(Grid.Row)" Value="2" />
                        <Setter Target="_NegativeColor.(Grid.Column)" Value="4" />
                        <Setter Target="NegativeColor.(Grid.Row)" Value="2" />
                        <Setter Target="NegativeColor.(Grid.Column)" Value="5" />
                        <Setter Target="showMarks.Style" Value="{StaticResource WideLayoutCheckBox}" />
                        <Setter Target="displayXAxis.Style" Value="{StaticResource WideLayoutCheckBox}" />
                        <Setter Target="showFirst.Style" Value="{StaticResource WideLayoutCheckBox}" />
                        <Setter Target="showLast.Style" Value="{StaticResource WideLayoutCheckBox}" />
                        <Setter Target="showHigh.Style" Value="{StaticResource WideLayoutCheckBox}" />
                        <Setter Target="showLow.Style" Value="{StaticResource WideLayoutCheckBox}" />
                        <Setter Target="showNegative.Style" Value="{StaticResource NarrowLayoutCheckBox}" />
                        
                        <Setter Target="_XAxisColor.Style" Value="{StaticResource WideLayoutTextBlock}" />
                        <Setter Target="XAxisColor.Style" Value="{StaticResource  ComboBoxStyle}" />
                        <Setter Target="_MarksColor.Style" Value="{StaticResource  WideLayoutTextBlock}" />
                        <Setter Target="MarksColor.Style" Value="{StaticResource  ComboBoxStyle}" />
                        <Setter Target="_NegativeColor.Style" Value="{StaticResource  WideLayoutTextBlock}" />
                        <Setter Target="NegativeColor.Style" Value="{StaticResource  ComboBoxStyle}" />
                        <Setter Target="_SparklineType.Style" Value="{StaticResource WideLayoutTextBlock}" />
                        <Setter Target="sparklineType.Style" Value="{StaticResource ComboBoxStyle}" />
                        <Setter Target="_SeriesColor.Style" Value="{StaticResource WideLayoutTextBlock}" />
                        <Setter Target="SeriesColor.Style" Value="{StaticResource ComboBoxStyle}" />
                        <Setter Target="_FirstMarkColor.Style" Value="{StaticResource WideLayoutTextBlock}" />
                        <Setter Target="FirstMarkColor.Style" Value="{StaticResource ComboBoxStyle}" />
                        <Setter Target="_LastMarkColor.Style" Value="{StaticResource WideLayoutTextBlock}" />
                        <Setter Target="LastMarkColor.Style" Value="{StaticResource ComboBoxStyle}" />
                        <Setter Target="_HightMarkColor.Style" Value="{StaticResource WideLayoutTextBlock}" />
                        <Setter Target="HightMarkColor.Style" Value="{StaticResource ComboBoxStyle}" />
                        <Setter Target="_LowMarkColor.Style" Value="{StaticResource WideLayoutTextBlock}" />
                        <Setter Target="LowMarkColor.Style" Value="{StaticResource ComboBoxStyle}" />
                    </VisualState.Setters>
                </VisualState>
                
                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="_SparklineType.Style" Value="{StaticResource NarrowLayoutTextBlock}" />
                        <Setter Target="sparklineType.Style" Value="{StaticResource ComboBoxStyle}" />
                        <Setter Target="_SeriesColor.Style" Value="{StaticResource NarrowLayoutTextBlock}" />
                        <Setter Target="SeriesColor.Style" Value="{StaticResource ComboBoxStyle}" />
                        <Setter Target="_XAxisColor.Style" Value="{StaticResource NarrowLayoutTextBlock}" />
                        <Setter Target="XAxisColor.Style" Value="{StaticResource ComboBoxStyle}" />
                        <Setter Target="_MarksColor.Style" Value="{StaticResource NarrowLayoutTextBlock}" />
                        <Setter Target="MarksColor.Style" Value="{StaticResource ComboBoxStyle}" />
                        <Setter Target="_FirstMarkColor.Style" Value="{StaticResource NarrowLayoutTextBlock}" />
                        <Setter Target="FirstMarkColor.Style" Value="{StaticResource ComboBoxStyle}" />
                        <Setter Target="_LastMarkColor.Style" Value="{StaticResource NarrowLayoutTextBlock}" />
                        <Setter Target="LastMarkColor.Style" Value="{StaticResource ComboBoxStyle}" />
                        <Setter Target="_HightMarkColor.Style" Value="{StaticResource NarrowLayoutTextBlock}" />
                        <Setter Target="HightMarkColor.Style" Value="{StaticResource ComboBoxStyle}" />
                        <Setter Target="_LowMarkColor.Style" Value="{StaticResource NarrowLayoutTextBlock}" />
                        <Setter Target="LowMarkColor.Style" Value="{StaticResource ComboBoxStyle}" />
                        <Setter Target="_NegativeColor.Style" Value="{StaticResource NarrowLayoutTextBlock}" />
                        <Setter Target="NegativeColor.Style" Value="{StaticResource ComboBoxStyle}" />
                        <Setter Target="showMarks.Style" Value="{StaticResource NarrowLayoutCheckBox}" />
                        <Setter Target="displayXAxis.Style" Value="{StaticResource NarrowLayoutCheckBox}" />
                        <Setter Target="showFirst.Style" Value="{StaticResource NarrowLayoutCheckBox}" />
                        <Setter Target="showLast.Style" Value="{StaticResource NarrowLayoutCheckBox}" />
                        <Setter Target="showHigh.Style" Value="{StaticResource NarrowLayoutCheckBox}" />
                        <Setter Target="showLow.Style" Value="{StaticResource NarrowLayoutCheckBox}" />
                        <Setter Target="showNegative.Style" Value="{StaticResource NarrowLayoutCheckBox}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>