<Page
    x:Class="GaugeSamples.Thermometer"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GaugeSamples"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c1="using:C1.Xaml.Gauge"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    <Page.Resources>
        <Storyboard x:Name="AnimateGauge">
            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" RepeatBehavior="Forever" AutoReverse="True" BeginTime="00:00:00" Duration="00:00:14" Storyboard.TargetName="gauge" Storyboard.TargetProperty="(c1Gauge.Value)">
                <SplineDoubleKeyFrame KeyTime="00:00:14.00" Value="100" KeySpline="0,0.5,0.5,1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <DataTemplate x:Key="MarkSmall">
            <Rectangle Height="30" Width="1" VerticalAlignment="Bottom" 
					Fill="#FFACB0B3" Stretch="Fill" StrokeThickness="1" >
             </Rectangle>
        </DataTemplate>

        <DataTemplate x:Key="MarkMedium">
            <Rectangle Height="40" Width="1" VerticalAlignment="Bottom" 
					Fill="#FF7E8389" Stretch="Fill" StrokeThickness="1">
            </Rectangle>
        </DataTemplate>

        <DataTemplate x:Key="MarkBig">
            <Rectangle Height="46" Width="1" VerticalAlignment="Bottom" 
					Fill="#FFACB0B3" Stretch="Fill" StrokeThickness="1" >
            </Rectangle>
        </DataTemplate>

    </Page.Resources>
        <Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" Height="350">
            <Grid.RowDefinitions>
                <RowDefinition Height="8"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="8"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="8"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="55"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="8"/>
            </Grid.ColumnDefinitions>

            <!-- START Gauge -->
            <c1:C1LinearGauge x:Name="gauge" 
                                Margin="18.7999992370605,12,18.7999992370605,0" Grid.Column="2" Grid.Row="1" 
                                Orientation="Vertical"
								PointerVisibility="Collapsed" 
								FaceVisibility="Collapsed"
								Background="Transparent"
								XAxisLocation="1" XAxisLength="-1"  YAxisLocation="0"
								Minimum="0" Maximum="100" 
								Value="0" >
                <!-- marks -->
                <c1:C1GaugeMark From="0" To="100" Interval="25" Template="{StaticResource MarkBig}" Location=".5" />
                <c1:C1GaugeMark From="0" To="100" Interval="12.5" Template="{StaticResource MarkMedium}" Location=".5" />
                <c1:C1GaugeMark From="0" To="100" Interval="2.5" Template="{StaticResource MarkSmall}" Location=".5" />
                <!-- Labels -->
                <c1:C1GaugeLabel Location="3.5" Interval="25" Alignment="Center" Format="0°" />
                <!-- ranges -->
                <c1:C1GaugeRange Fill="#90CD97" To="40" Width="1" />
                <c1:C1GaugeRange Fill="#EDDD46" From="40" To="80" Width="1" />
                <c1:C1GaugeRange Fill="#F6AAC9" From="80" To="100" Width="1" />
                <c1:C1GaugeRange ValueBinding="From" Fill="#FFFFFFFF" Width="1"/>
            </c1:C1LinearGauge>
            <!-- END Gauge -->
        <Path x:Name="termometer_bottom_green" VerticalAlignment="Stretch" Data="M9,14.633293 L26.999998,14.633293 L26.999998,17.30018 C31.81513,20.267839 35,25.597235 35,31.670473 C35,41.059067 27.388842,48.669998 18,48.669998 C8.6111584,48.669998 0.99999917,41.059067 1,31.670473 C0.99999917,25.597235 4.1848688,20.267839 9,17.30018 z" Fill="#F6AAC9" Stretch="Fill" Stroke="#BEBEBE" StrokeThickness="0" Margin="12,0.1,12,10" Grid.Column="2" Grid.Row="2"/>
        <Path x:Name="termometer_bottom" VerticalAlignment="Stretch" Grid.Column="2" Grid.Row="2" Data="M9,14.633293 L26.999998,14.633293 L26.999998,17.30018 C31.81513,20.267839 35,25.597235 35,31.670473 C35,41.059067 27.388842,48.669998 18,48.669998 C8.6111584,48.669998 0.99999917,41.059067 1,31.670473 C0.99999917,25.597235 4.1848688,20.267839 9,17.30018 z" Fill="#BEBEBE" Stretch="Fill" StrokeThickness="0" Margin="12,0,12,10">
                    <Path.Stroke>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#00FFFFFF" Offset="0"/>
                            <GradientStop Color="#FFFFFFFF" Offset="0"/>
                        </LinearGradientBrush>
                    </Path.Stroke>
                </Path>
            <Path x:Name="termometer_bottomstroke" VerticalAlignment="Bottom" Data="M9,-19.806 L26.999998,-19.806 L26.999998,17.30018 C31.81513,20.267839 35,25.597235 35,31.670473 C35,41.059067 27.388842,48.669998 18,48.669998 C8.6111584,48.669998 0.99999917,41.059067 1,31.670473 C0.99999917,25.597235 4.1848688,20.267839 9,17.30018 z" Stretch="Fill" StrokeThickness="2" Grid.Column="2" Grid.Row="2" Height="58" HorizontalAlignment="Left" Margin="12,-10,0,10" Width="31" Fill="#FF78AA1C"/>
        <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's window size -->
            <VisualStateGroup>
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="540" />
                    </VisualState.StateTriggers>
                </VisualState>
                <!-- Visual states reflect the Windows Phone Wide window size -->
                <VisualState x:Name="MiddleLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="480" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="LayoutRoot.Height" Value="246" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
