 <Page
    x:Class="GaugeSamples.SpeedometerGauge"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GaugeSamples"
    xmlns:c1="using:C1.Xaml.Gauge"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Storyboard x:Name="AnimateSpeed">
            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" RepeatBehavior="Forever" BeginTime="00:00:00" Duration="00:00:10" AutoReverse="True" Storyboard.TargetName="myGauge" Storyboard.TargetProperty="(c1Gaugeauge.Value)">
                <SplineDoubleKeyFrame KeyTime="00:00:10.00" Value="100" KeySpline="0,0,1,0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Page.Resources>
    <Grid >
        <c1:C1SpeedometerGauge x:Name="myGauge" Height="300" Value="80" 
                               BorderBrush="#BEBEBE" BorderThickness="2" Background="#F5F5F5" Foreground="#888888"
                               PointerFill="#FBB258" CoverVisibility="Collapsed">
            <c1:C1GaugeRange To="40" Location="0.95" Fill="#88BDE6" Width="0.1" Opacity="0.2" />
            <c1:C1GaugeRange From="0" To="80" Location="0.9" Fill="#88BDE6" Width="0.05" Opacity="0.4" />
            <c1:C1GaugeRange From="0" To="100" Location="0.88" Fill="#88BDE6" Width="0.025" Opacity="0.6" />
            <c1:C1GaugeMark Interval="20" Location="0.95"/>
            <c1:C1GaugeMark Interval="10" Location="0.95"/>
            <c1:C1GaugeMark Interval="5"  Location="0.95"/>
            <c1:C1GaugeLabel Interval="20" Alignment="Out" AlignmentOffset="10" FontSize="16" />
        </c1:C1SpeedometerGauge>
        <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="myGauge.Height" Value="220" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>

