<UserControl
    x:Class="SalesDashboard.TypeGauge"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SalesDashboard"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" xmlns:c1="using:C1.Xaml.Gauge"
    d:DesignHeight="300"
    d:DesignWidth="400">
    <UserControl.Resources>
        <Style TargetType="local:AnimatedGauge">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Margin" Value="20 25 20 -80" />
            <Setter Property="Minimum" Value="0" />
            <Setter Property="Maximum" Value="50" />
            <Setter Property="StartAngle" Value="-90" />
            <Setter Property="SweepAngle" Value="180" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="PointerCapSize" Value="0.15,0.15" />
            <Setter Property="PointerCapStrokeThickness" Value="0" />
            <Setter Property="PointerFill" Value="#FFF29A13" />
            <Setter Property="PointerStrokeThickness" Value="0" />
            <Setter Property="PointerWidth" Value="0.05" />
            <Setter Property="PointerCapFill">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFF9B314"/>
                        <GradientStop Color="#FFEA8511" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid>
        <local:AnimatedGauge x:Name="gauge">
            <local:AnimatedGauge.EasingFunction>
                <ElasticEase Oscillations="3" Springiness="3" />
            </local:AnimatedGauge.EasingFunction>
            <c1:C1GaugeRange From="0" To="100" Width=".8" Location=".4" Opacity="0.3">
                    <c1:C1GaugeRange.Fill>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <LinearGradientBrush.RelativeTransform>
                                <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
                            </LinearGradientBrush.RelativeTransform>
                            <GradientStop Color="#FFF20901"/>
                            <GradientStop Color="#FF1F681E" Offset="1"/>
                        </LinearGradientBrush>
                    </c1:C1GaugeRange.Fill>
                </c1:C1GaugeRange>
                <c1:C1GaugeRange From="0" To="100" Width=".25" Location=".6" >
                    <c1:C1GaugeRange.Fill>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <LinearGradientBrush.RelativeTransform>
                                <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
                            </LinearGradientBrush.RelativeTransform>
                            <GradientStop Color="#FFF20901"/>
                            <GradientStop Color="#FF1F681E" Offset="1"/>
                        </LinearGradientBrush>
                    </c1:C1GaugeRange.Fill>
                </c1:C1GaugeRange>
                <c1:C1GaugeMark Interval="5" />
                <c1:C1GaugeMark Interval="2.5" />
        </local:AnimatedGauge>
    </Grid>
</UserControl>
