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

        <Storyboard x:Name="AnimateGauge">
            <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" AutoReverse="True" BeginTime="00:00:00" Duration="00:00:04" Storyboard.TargetName="gauge" Storyboard.TargetProperty="(c1Gauge.Value)">
                <SplineDoubleKeyFrame KeyTime="00:00:05.00" Value="100" KeySpline="0,0.5,0.5,1" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <DataTemplate x:Key="GenericMark">
            <Border BorderBrush="{Binding BorderBrush}" BorderThickness="{Binding BorderThickness}">
                <Rectangle Height="10" Width="5" Fill="{Binding Background}" Visibility="{Binding Visibility}" RenderTransformOrigin="0.5, 0.5" />
            </Border>
        </DataTemplate>

        <DataTemplate x:Key="GenericLabel">
            <TextBlock FontSize="{Binding FontSize}" Foreground="{Binding Foreground}" FontFamily="{Binding FontFamily}" FontStretch="{Binding FontStretch}" FontWeight="{Binding FontWeight}" Text="{Binding Value}" TextAlignment="Center" Visibility="{Binding Visibility}" />
		</DataTemplate>

        <Style x:Key="Pointer" TargetType="c1:C1LinearGaugePointer">
            <Style.Setters>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="c1:C1LinearGaugePointer">
                            <Path x:Name="Root" Stretch="Fill" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" StrokeThickness="{TemplateBinding Thickness}" Data="M1,3 C1,1.8954304 1.8954304,1 3,1 L11,1 C12.104569,1 13,1.8954304 13,3 C13,3 8.5457163,13 7.4411469,13 L7.4514785,89.679596 L6.5580759,89.667915 L6.5588531,13 C5.4542832,13 1,3 1,3 z" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>
       
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Width="300" Height="100">

        <c1:C1LinearGauge x:Name="gauge" XAxisLocation="0.1" XAxisLength="0.8" YAxisLocation="0.5" PointerWidth="0.05" PointerLength="1" PointerOffset="0" PointerStyle="{StaticResource Pointer}" PointerStrokeThickness="1" BorderThickness="2" Value="37" BorderBrush="#FF99C1D1">
            <c1:C1LinearGauge.PointerFill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF99C1D1" Offset="0.85" />
                    <GradientStop Color="#FFD1E5ED" Offset="0.9" />
                    <GradientStop Color="#FFF1F8FB" Offset="1" />
                    <GradientStop Color="#FFB8CED6" Offset="0.75" />
                    <GradientStop Color="#FFB8CED6" Offset="0.004" />
                </LinearGradientBrush>
            </c1:C1LinearGauge.PointerFill>
            <c1:C1LinearGauge.PointerStroke>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF095575" Offset="0" />
                    <GradientStop Color="#33095575" Offset="0.147" />
                </LinearGradientBrush>
            </c1:C1LinearGauge.PointerStroke>
            <c1:C1LinearGauge.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFE4E4E4" Offset="0.85" />
                    <GradientStop Color="#FFF2F2F2" Offset="0.9" />
                    <GradientStop Color="#FFFFFFFF" Offset="1" />
                    <GradientStop Color="#FFEEEEEE" Offset="0.751" />
                </LinearGradientBrush>
            </c1:C1LinearGauge.Background>
            <!-- Colored Ranges -->
            <c1:C1GaugeRange From="0" To="40" Fill="SkyBlue" Width="0.2" Location="-0.1" Stroke="Black" StrokeThickness="1" Opacity="0.15" />
            <c1:C1GaugeRange From="40" To="100" Fill="DarkCyan" StartWidth="0.2" EndWidth="0.6" StartLocation="-0.1" EndLocation="-0.3" Stroke="Black" StrokeThickness="1" Opacity="0.15" />
            <!-- Marks -->
            <c1:C1GaugeMark Interval="20" />
            <c1:C1GaugeMark Interval="10" />
            <c1:C1GaugeMark Interval="5" />
            <c1:C1GaugeMark Interval="1" />
            <!-- Labels -->
            <c1:C1GaugeLabel Interval="20" Foreground="#FF4E7383" Format="n0" Alignment="In" AlignmentOffset="5" />
            <!-- Axis -->
            <c1:C1GaugeRange Fill="#FF4E7383" Width="0.01" Stroke="#FF4E7383" />
        </c1:C1LinearGauge>
    </Grid>
</UserControl>