<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="GaugeSamples.Thermometer" mc:Ignorable="d" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
    <UserControl.Resources>

        <Storyboard x:Name="AnimateGauge">
            <DoubleAnimationUsingKeyFrames 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.Stroke>
                    <LinearGradientBrush EndPoint="0.996999979019165,0.564000010490417" StartPoint="0.0020000000949949,0.486999988555908">
                        <GradientStop Color="#FF505760" Offset="0.2" />
                        <GradientStop Color="#FF18222D" Offset="0.2" />
                        <GradientStop Color="#FF18222D" Offset="0.8" />
                        <GradientStop Color="#FF505760" Offset="0.8" />
                    </LinearGradientBrush>
                </Rectangle.Stroke>
            </Rectangle>
        </DataTemplate>

        <DataTemplate x:Key="MarkMedium">
            <Rectangle Height="40" Width="1" VerticalAlignment="Bottom" Fill="#FF7E8389" Stretch="Fill" StrokeThickness="1">
                <Rectangle.Stroke>
                    <LinearGradientBrush EndPoint="0.996999979019165,0.564000010490417" StartPoint="0.0020000000949949,0.486999988555908">
                        <GradientStop Color="#FF505760" Offset="0.25" />
                        <GradientStop Color="#FF18222D" Offset="0.25" />
                        <GradientStop Color="#FF18222D" Offset="0.75" />
                        <GradientStop Color="#FF505760" Offset="0.75" />
                    </LinearGradientBrush>
                </Rectangle.Stroke>
            </Rectangle>
        </DataTemplate>

        <DataTemplate x:Key="MarkBig">
            <Rectangle Height="46" Width="1" VerticalAlignment="Bottom" Fill="#FFACB0B3" Stretch="Fill" StrokeThickness="1">
                <Rectangle.Stroke>
                    <LinearGradientBrush EndPoint="0.996999979019165,0.564000010490417" StartPoint="0.0020000000949949,0.486999988555908">
                        <GradientStop Color="#FFACB0B3" Offset="0.28" />
                        <GradientStop Color="#FF18222D" Offset="0.28" />
                        <GradientStop Color="#FF18222D" Offset="0.72" />
                        <GradientStop Color="#FFACB0B3" Offset="0.72" />
                    </LinearGradientBrush>
                </Rectangle.Stroke>
            </Rectangle>
        </DataTemplate>

    </UserControl.Resources>

    <Border BorderThickness="2" BorderBrush="Gray" Background="#FF151515" CornerRadius="10" Margin="3" Width="150" Height="300">
            <Grid HorizontalAlignment="Stretch">
                <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" Foreground="Gray" Alignment="Center" Format="0°" />
                    <!-- ranges -->
                    <c1:C1GaugeRange Fill="#FF00773A" To="40" Width="1" />
                    <c1:C1GaugeRange Fill="#FFDCCC00" From="40" To="80" Width="1" />
                    <c1:C1GaugeRange Fill="#FF890000" From="80" To="100" Width="1" />
                    <c1:C1GaugeRange ValueBinding="From" Fill="#18222D" Width="1" />
                </c1:C1LinearGauge>
                <!-- END Gauge -->

                <!-- START green ball-->
                <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="#FF00773A" Stretch="Fill" Stroke="#CCFFFFFF" 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="#1EFFFFFF" 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="bright_ball" HorizontalAlignment="Stretch" Margin="16,4,16,24" VerticalAlignment="Stretch" Stretch="Fill" Stroke="#FF000000" StrokeThickness="0" Data="M30.169998,15.085 C30.169998,23.416216 23.416214,12.962884 15.084999,12.962884 C6.7537842,12.962884 0,23.416216 0,15.085 C0,6.7537847 6.7537842,0 15.084999,0 C23.416214,0 30.169998,6.7537847 30.169998,15.085 z" Grid.Column="2" Grid.Row="2">
                    <Path.Fill>
                        <RadialGradientBrush SpreadMethod="Pad" GradientOrigin="0.495000004768372,0.0320000015199184">
                            <RadialGradientBrush.RelativeTransform>
                                <TransformGroup>
                                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.205" ScaleY="1.205" />
                                    <SkewTransform CenterX="0.5" CenterY="0.5" />
                                    <RotateTransform CenterX="0.5" CenterY="0.5" />
                                    <TranslateTransform Y="0.016" X="-0.017" />
                                </TransformGroup>
                            </RadialGradientBrush.RelativeTransform>
                            <GradientStop Color="#4CFFFFFF" />
                            <GradientStop Color="#00000000" Offset="1" />
                        </RadialGradientBrush>
                    </Path.Fill>
                </Path>
                <!-- END green ball-->
                
                <!-- START white perimeter -->
                <Path HorizontalAlignment="Stretch" Margin="18.7819995880127,10,18.7919998168945,-1" x:Name="termometer_body" VerticalAlignment="Stretch" Grid.Column="2" Grid.Row="1" RenderTransformOrigin="1.25,-0.532000005245209" Data="M0,1.3288655 C0,0.22429664 -0.24064608,0 0.86392403,0 L18.065069,0 C19.16964,0 19,0.17267096 19,1.2772398 L19,200.98299 C18.991484,200.97821 0.014171544,200.97803 0,200.98299 z" Fill="#1EFFFFFF" Stretch="Fill" StrokeThickness="2">
                    <Path.Stroke>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFFFFFFF" Offset="0.98" />
                            <GradientStop Color="#00FFFFFF" Offset="0.98" />
                        </LinearGradientBrush>
                    </Path.Stroke>
                </Path>
                <Path x:Name="termometer_bottomstroke" VerticalAlignment="Top" 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,-28,0,0" Width="31">
                    <Path.Fill>
                        <SolidColorBrush />
                    </Path.Fill>
                    <Path.Stroke>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#00FFFFFF" Offset="0.02" />
                            <GradientStop Color="#FFFFFFFF" Offset="0.02" />
                        </LinearGradientBrush>
                    </Path.Stroke>
                </Path>
                <!-- END white perimeter -->
                
                <!-- START bright -->
                <Path x:Name="bright" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Data="M0,3.013633 C0,2.4613481 0.44771525,2.013633 1,2.013633 L4,2.013633 C4.5522847,2.013633 5,2.4613481 5,3.013633 L5,224.03978 C5,226.24715 5.1436501,227.07208 4.3491297,227.06459 C3.2134652,227.07208 1.9790094,227.01746 0.90793651,227.06107 C-0.31612918,227.07208 1.4911368E-16,227.02731 0,224.03978 z" Stretch="Fill" Stroke="#FF000000" StrokeThickness="0" Grid.Column="2" Grid.Row="1" Margin="22,10,30,0">
                    <Path.Fill>
                        <LinearGradientBrush EndPoint="1.03299999237061,0.00499999988824129" StartPoint="0.0700000002980232,0.00499999988824129">
                            <GradientStop Color="#33FFFFFF" />
                            <GradientStop Color="#00FFFFFF" Offset="1" />
                        </LinearGradientBrush>
                    </Path.Fill>
                </Path>
                <!-- END bright -->
            </Grid>
    </Border>
</UserControl>