<UserControl
    x:Class="DateTimeSettings.C1ClockGauge"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DateTimeSettings"
    xmlns:common="using:DateTimeSettings.Common"
    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"
    d:DesignHeight="300"
    d:DesignWidth="400">
    <UserControl.Resources>
        <common:HoursConverter x:Key="hoursConverter" />
        <!-- Rectangular Pointer -->
        <Style x:Key="NeedleRectangle" TargetType="c1:C1RadialGaugePointer">
            <Style.Setters>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="c1:C1RadialGaugePointer">
                            <Rectangle x:Name="Root" Stretch="Fill" 
                                      Stroke="{TemplateBinding BorderBrush}"
                                      Fill="{TemplateBinding Background}"
                                      StrokeThickness="{TemplateBinding Thickness}" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>

        <!-- hour resources -->
        <DataTemplate x:Key="HourMark">
            <Rectangle Margin="-2 0 0 0" Width="4" Height="14" 
						  Fill="#FF4617B4" />
        </DataTemplate>

        <SolidColorBrush x:Key="HourBorderBrush" Color="#FF4617B4"/>

        <!-- Minute resources -->
        <DataTemplate x:Key="MinuteMark">
            <Ellipse Margin="-2 0 0 0" Height="4" Width="4">
                <Ellipse.Fill>
                    <SolidColorBrush Color="#FF969999"/>
                </Ellipse.Fill>
            </Ellipse>
        </DataTemplate>
        <SolidColorBrush x:Key="MinuteBackground" Color="#4C769297"/>
        <LinearGradientBrush x:Key="MinuteBorderBrush" EndPoint="0.884999990463257,0.822000026702881" StartPoint="0.156000003218651,0.128000006079674">
            <GradientStop Color="#FF000000"/>
            <GradientStop Color="#FFE4EAF0" Offset="0"/>
            <GradientStop Color="#FF898D90" Offset="1"/>
        </LinearGradientBrush>

    </UserControl.Resources>
    
    <Grid >
        <!-- Hours -->
        <c1:C1RadialGauge x:Name="clockHours"
								Value="{Binding MyTime, Converter={StaticResource hoursConverter}}"
								Minimum="0" Maximum="12" StartAngle="0" SweepAngle="360" Radius="0.8" 
								BorderThickness="50" 
                                PointerCapSize="0,0"
                                PointerStyle="{StaticResource NeedleRectangle}" PointerFill="#FF4617B4" PointerStrokeThickness="0" 
                                PointerLength="0.3" PointerWidth="0.015" PointerOffset="0"
								BorderBrush="{StaticResource HourBorderBrush}">
            <c1:C1GaugeMark From="0" To="12" Interval="1" Template="{StaticResource HourMark}" Location="0.95" />
            <c1:C1GaugeLabel From="3" To="12" Interval="3" Alignment="Center" Location="1.1" FontSize="32" Foreground="White" />
        </c1:C1RadialGauge>

        <!-- Minutes -->
        <c1:C1RadialGauge x:Name="clockMins" Grid.Row="3"
								Value="{Binding MyTime.Minutes}"
								Minimum="0" Maximum="60" StartAngle="0" SweepAngle="360" Radius="0.8" BorderThickness="4" 
								Background="{StaticResource MinuteBackground}" FaceVisibility="Collapsed"
								BorderBrush="{StaticResource MinuteBorderBrush}"
                                PointerCapSize="0,0"
                                PointerStyle="{StaticResource NeedleRectangle}" PointerFill="#FF969999" PointerStrokeThickness="0" 
                                PointerLength="0.4"  PointerWidth="0.0125" PointerOffset="0"
								Margin="1,1,1,1">
            <c1:C1GaugeMark Interval="1" From="1" To="4" Template="{StaticResource MinuteMark}"/>
            <c1:C1GaugeMark Interval="1" From="6" To="9" Template="{StaticResource MinuteMark}"/>
            <c1:C1GaugeMark Interval="1" From="11" To="14" Template="{StaticResource MinuteMark}"/>
            <c1:C1GaugeMark Interval="1" From="16" To="19" Template="{StaticResource MinuteMark}"/>
            <c1:C1GaugeMark Interval="1" From="21" To="24" Template="{StaticResource MinuteMark}"/>
            <c1:C1GaugeMark Interval="1" From="26" To="29" Template="{StaticResource MinuteMark}"/>
            <c1:C1GaugeMark Interval="1" From="31" To="34" Template="{StaticResource MinuteMark}"/>
            <c1:C1GaugeMark Interval="1" From="36" To="39" Template="{StaticResource MinuteMark}"/>
            <c1:C1GaugeMark Interval="1" From="41" To="44" Template="{StaticResource MinuteMark}"/>
            <c1:C1GaugeMark Interval="1" From="46" To="49" Template="{StaticResource MinuteMark}"/>
            <c1:C1GaugeMark Interval="1" From="51" To="54" Template="{StaticResource MinuteMark}"/>
            <c1:C1GaugeMark Interval="1" From="56" To="59" Template="{StaticResource MinuteMark}"/>
        </c1:C1RadialGauge>

        <!-- Seconds -->
        <c1:C1RadialGauge x:Name="clockSecs" Grid.Row="2"
								Value="{Binding MyTime.Seconds}"
								Minimum="0" Maximum="60" StartAngle="0" SweepAngle="360" Radius="0.8" 
								Background="Transparent" BorderThickness="0" FaceVisibility="Collapsed"  
                                PointerCapSize="0.045,0.045" PointerCapFill="#FF4617B4" PointerCapStrokeThickness="0" 
                                PointerStyle="{StaticResource NeedleRectangle}" PointerFill="#FF999EA0" PointerStrokeThickness="0" 
                                PointerLength="0.55"  PointerWidth="0.008" PointerOffset="-0.15" />
    </Grid>
</UserControl>
