<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" />
            </Style>
            <Style x:Key="NarrowLayoutComboBox" TargetType="ComboBox" >
                <Setter Property="Background" Value="LightBlue" />
                <Setter Property="Width" Value="75" />
                <Setter Property="Height" Value="25" />
                <Setter Property="FontSize" Value="12" />
                <Setter Property="Margin" Value="1" />
            </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" />
            </Style>
            <Style x:Key="WideLayoutComboBox" TargetType="ComboBox" >
                <Setter Property="Background" Value="LightBlue" />
                <Setter Property="Width" Value="75" />
                <Setter Property="Height" Value="25" />
                <Setter Property="FontSize" Value="12" />
                <Setter Property="Margin" Value="1" />
            </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.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="Marks" IsChecked="{Binding ElementName=sparkline, Path=ShowMarkers, Mode=TwoWay}"/>
            <CheckBox Grid.Row="0" Grid.Column="1" x:Name="displayXAxis" Content="XAxis" RelativePanel.RightOf="showMarks" IsChecked="{Binding ElementName=sparkline, Path=DisplayXAxis, Mode=TwoWay}"/>
            <CheckBox Grid.Row="0" Grid.Column="2" x:Name="showFirst" Content="First" RelativePanel.RightOf="displayXAxis" IsChecked="{Binding ElementName=sparkline, Path=ShowFirst, Mode=TwoWay}" FontFamily="Global User Interface"/>
            <CheckBox Grid.Row="0" Grid.Column="3" x:Name="showLast" Content="Last" IsChecked="{Binding ElementName=sparkline, Path=ShowLast, Mode=TwoWay}"/>
            <CheckBox Grid.Row="1" Grid.Column="0" x:Name="showHigh" Content="High" RelativePanel.RightOf="showLast" IsChecked="{Binding ElementName=sparkline, Path=ShowHigh, Mode=TwoWay}"/>
            <CheckBox Grid.Row="1" Grid.Column="1" x:Name="showLow" Content="Low" RelativePanel.RightOf="showHigh" IsChecked="{Binding ElementName=sparkline, Path=ShowLow, Mode=TwoWay}"/>
            <CheckBox Grid.Row="1" Grid.Column="2" x:Name="showNegative" Content="Negative" 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="SparklineType:" VerticalAlignment="Center"></TextBlock>
            <ComboBox Grid.Row="0" Grid.Column="1" x:Name="sparklineType" SelectionChanged="sparklineType_SelectionChanged"
                      Foreground="Black"></ComboBox>
            <TextBlock  Grid.Row="0" Grid.Column="2" x:Name="_SeriesColor" Text="SeriesColor:" VerticalAlignment="Center"></TextBlock>
            <ComboBox Grid.Row="0" Grid.Column="3" x:Name="SeriesColor" SelectionChanged="SeriesColor_SelectionChanged"
                      Foreground="Black"></ComboBox>

            <TextBlock Grid.Row="1" Grid.Column="0" x:Name="_MarksColor" Text="MarksColor:" VerticalAlignment="Center"></TextBlock>
            <ComboBox Grid.Row="1" Grid.Column="1" x:Name="MarksColor" SelectionChanged="MarksColor_SelectionChanged"
                      Foreground="Black"></ComboBox>
            <TextBlock Grid.Row="1" Grid.Column="2" x:Name="_FirstMarkColor" Text="FirstMarkColor:" VerticalAlignment="Center"></TextBlock>
            <ComboBox Grid.Row="1" Grid.Column="3" x:Name="FirstMarkColor" SelectionChanged="FirstMarkColor_SelectionChanged"
                      Foreground="Black" ></ComboBox>

            <TextBlock Grid.Row="2" Grid.Column="0" x:Name="_HightMarkColor" Text="HighMarkColor:" VerticalAlignment="Center"></TextBlock>
            <ComboBox Grid.Row="2" Grid.Column="1" x:Name="HightMarkColor" SelectionChanged="HightMarkColor_SelectionChanged"
                      Foreground="Black" ></ComboBox>
            <TextBlock Grid.Row="2" Grid.Column="2" x:Name="_LowMarkColor" Text="LowMarkColor:"  VerticalAlignment="Center"></TextBlock>
            <ComboBox Grid.Row="2" Grid.Column="3" x:Name="LowMarkColor" SelectionChanged="LowMarkColor_SelectionChanged"
                      Foreground="Black"></ComboBox>

            <TextBlock  Grid.Row="3" Grid.Column="0" x:Name="_XAxisColor"  Text="AxisColor:"  VerticalAlignment="Center"></TextBlock>
            <ComboBox  Grid.Row="3" Grid.Column="1" x:Name="XAxisColor" SelectionChanged="XAxisColor_SelectionChanged"
                      Foreground="Black"></ComboBox>
            <TextBlock  Grid.Row="3" Grid.Column="2" x:Name="_LastMarkColor" Text="LastMarkColor:" VerticalAlignment="Center"></TextBlock>
            <ComboBox  Grid.Row="3" Grid.Column="3" x:Name="LastMarkColor" SelectionChanged="LastMarkColor_SelectionChanged"
                      Foreground="Black"></ComboBox>

            <TextBlock Grid.Row="4" Grid.Column="0" x:Name="_NegativeColor" Text="NegativeColor:" VerticalAlignment="Center"></TextBlock>
            <ComboBox Grid.Row="4" Grid.Column="1" x:Name="NegativeColor" RelativePanel.RightOf="_NegativeColor" SelectionChanged="NegativeColor_SelectionChanged"
                      Foreground="Black" ></ComboBox>

        </Grid>
        <Grid x:Name="_grid" Grid.Row="2" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="4">
            <c1:C1Sparkline x:Name="sparkline" NegativeColor="Blue" LowMarkerColor="Green" HighMarkerColor="Blue" HorizontalAlignment="Left"
                            LastMarkerColor="Brown" FirstMarkerColor="Red" MarkersColor="Green" SeriesColor="Blue" 
                            AxisColor="Pink" DisplayXAxis="True" ShowFirst="True" ShowLast="True" ShowLow="True">
            </c1:C1Sparkline>
        </Grid>
        
        <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's window size -->
            <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  WideLayoutComboBox}" />
                        <Setter Target="_MarksColor.Style" Value="{StaticResource  WideLayoutTextBlock}" />
                        <Setter Target="MarksColor.Style" Value="{StaticResource  WideLayoutComboBox}" />
                        <Setter Target="_NegativeColor.Style" Value="{StaticResource  WideLayoutTextBlock}" />
                        <Setter Target="NegativeColor.Style" Value="{StaticResource  WideLayoutComboBox}" />
                        <Setter Target="_SparklineType.Style" Value="{StaticResource WideLayoutTextBlock}" />
                        <Setter Target="sparklineType.Style" Value="{StaticResource WideLayoutComboBox}" />
                        <Setter Target="_SeriesColor.Style" Value="{StaticResource WideLayoutTextBlock}" />
                        <Setter Target="SeriesColor.Style" Value="{StaticResource WideLayoutComboBox}" />
                        <Setter Target="_FirstMarkColor.Style" Value="{StaticResource WideLayoutTextBlock}" />
                        <Setter Target="FirstMarkColor.Style" Value="{StaticResource WideLayoutComboBox}" />
                        <Setter Target="_LastMarkColor.Style" Value="{StaticResource WideLayoutTextBlock}" />
                        <Setter Target="LastMarkColor.Style" Value="{StaticResource WideLayoutComboBox}" />
                        <Setter Target="_HightMarkColor.Style" Value="{StaticResource WideLayoutTextBlock}" />
                        <Setter Target="HightMarkColor.Style" Value="{StaticResource WideLayoutComboBox}" />
                        <Setter Target="_LowMarkColor.Style" Value="{StaticResource WideLayoutTextBlock}" />
                        <Setter Target="LowMarkColor.Style" Value="{StaticResource WideLayoutComboBox}" />
                    </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 NarrowLayoutComboBox}" />
                        <Setter Target="_SeriesColor.Style" Value="{StaticResource NarrowLayoutTextBlock}" />
                        <Setter Target="SeriesColor.Style" Value="{StaticResource NarrowLayoutComboBox}" />
                        <Setter Target="_XAxisColor.Style" Value="{StaticResource NarrowLayoutTextBlock}" />
                        <Setter Target="XAxisColor.Style" Value="{StaticResource NarrowLayoutComboBox}" />
                        <Setter Target="_MarksColor.Style" Value="{StaticResource NarrowLayoutTextBlock}" />
                        <Setter Target="MarksColor.Style" Value="{StaticResource NarrowLayoutComboBox}" />
                        <Setter Target="_FirstMarkColor.Style" Value="{StaticResource NarrowLayoutTextBlock}" />
                        <Setter Target="FirstMarkColor.Style" Value="{StaticResource NarrowLayoutComboBox}" />
                        <Setter Target="_LastMarkColor.Style" Value="{StaticResource NarrowLayoutTextBlock}" />
                        <Setter Target="LastMarkColor.Style" Value="{StaticResource NarrowLayoutComboBox}" />
                        <Setter Target="_HightMarkColor.Style" Value="{StaticResource NarrowLayoutTextBlock}" />
                        <Setter Target="HightMarkColor.Style" Value="{StaticResource NarrowLayoutComboBox}" />
                        <Setter Target="_LowMarkColor.Style" Value="{StaticResource NarrowLayoutTextBlock}" />
                        <Setter Target="LowMarkColor.Style" Value="{StaticResource NarrowLayoutComboBox}" />
                        <Setter Target="_NegativeColor.Style" Value="{StaticResource NarrowLayoutTextBlock}" />
                        <Setter Target="NegativeColor.Style" Value="{StaticResource NarrowLayoutComboBox}" />
                        <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>