<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="GaugeSamples.Clock" 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>

        <!-- 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="-1 0 0 0" Width="2" Height="8" Fill="#7f929b" />
		</DataTemplate>
		<DataTemplate x:Key="HourLabel">
			<TextBlock Width="24" Height="13" Margin="-3 -8 0 0" VerticalAlignment="Top" TextAlignment="Left" FontFamily="Arial" FontSize="13" Foreground="#FFADC5D9" Text="{Binding Value}" TextWrapping="Wrap" />
		</DataTemplate>
		<RadialGradientBrush x:Key="HourBackground" GradientOrigin="0.247999995946884,0.488999992609024">
			<RadialGradientBrush.RelativeTransform>
				<TransformGroup>
					<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.273" ScaleY="1.173" />
					<SkewTransform CenterX="0.5" CenterY="0.5" />
					<RotateTransform CenterX="0.5" CenterY="0.5" Angle="53.223" />
					<TranslateTransform Y="0.13" X="0.085" />
				</TransformGroup>
			</RadialGradientBrush.RelativeTransform>
			<GradientStop Color="#00FFFFFF" Offset="0.647" />
			<GradientStop Color="#99B1C1CE" Offset="0.879" />
			<GradientStop Color="#7FB1C1CE" Offset="1" />
		</RadialGradientBrush>
		<LinearGradientBrush x:Key="HourBorderBrush" EndPoint="0,1">
			<GradientStop Color="#FF808FA1" />
			<GradientStop Color="#FF808285" Offset="1" />
		</LinearGradientBrush>

		<!-- Minute resources -->
		<DataTemplate x:Key="MinuteMark">
			<Ellipse Margin="-1 0 0 0" Height="2" Width="2">
				<Ellipse.Fill>
					<RadialGradientBrush>
						<RadialGradientBrush.RelativeTransform>
							<TransformGroup>
								<ScaleTransform />
								<SkewTransform />
								<RotateTransform />
								<TranslateTransform X="0.138" Y="-0.092" />
							</TransformGroup>
						</RadialGradientBrush.RelativeTransform>
						<GradientStop Color="#FF7D9197" Offset="0.5" />
						<GradientStop Color="#FFFFFFFF" Offset="1" />
					</RadialGradientBrush>
				</Ellipse.Fill>
			</Ellipse>
		</DataTemplate>
        <RadialGradientBrush x:Key="MinuteBackground">
			<GradientStop Color="#00FFFFFF" Offset="0.29" />
			<GradientStop Color="#4C769297" Offset="0.942" />
			<GradientStop Color="#00FFFFFF" Offset="1" />
		</RadialGradientBrush>
		<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>


		<!-- Seconds resources -->
 		<DataTemplate x:Key="GlassEffect">
			<Grid>
				<Grid.RowDefinitions>
					<RowDefinition Height=".4*" />
					<RowDefinition Height=".6*" />
				</Grid.RowDefinitions>
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width=".13*" />
					<ColumnDefinition Width=".8*" />
					<ColumnDefinition Width=".07*" />
				</Grid.ColumnDefinitions>
				<Path RenderTransformOrigin="0.5,0.600000023841858" Grid.Row="1" Grid.Column="1" Data="M108,0.5 C125.21802,0.49999928 144.27174,7.3084793 158.64531,14.745525 C159.79529,36.62101 159.06741,43.381516 157.07854,54.759068 C150.33452,93.338905 119.46741,147.38158 65.839401,149.05733 C36.257538,149.98169 13.429331,135.90892 3.0853901,124.48584 C1.2306149,119.87174 0.50000012,115.47794 0.5,110.017 C0.50000012,49.532429 48.629391,0.49999928 108,0.5 z" Stretch="Fill" Margin="0,0,2.30699992179871,-3.59999990463257">
					<Path.RenderTransform>
						<TransformGroup>
							<ScaleTransform />
							<SkewTransform />
							<RotateTransform Angle="14.197" />
							<TranslateTransform X="-0.49460484754694889" Y="-0.34892082202527419" />
						</TransformGroup>
					</Path.RenderTransform>
					<Path.Fill>
						<RadialGradientBrush GradientOrigin="0.483000010251999,0.504000008106232">
							<RadialGradientBrush.RelativeTransform>
								<TransformGroup>
									<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.464" ScaleY="1.493" />
									<SkewTransform CenterX="0.5" CenterY="0.5" AngleX="-3.121" />
									<RotateTransform Angle="-45.066" CenterX="0.5" CenterY="0.5" />
									<TranslateTransform X="0.324" Y="0.16" />
								</TransformGroup>
							</RadialGradientBrush.RelativeTransform>
							<GradientStop Color="#66FFFFFF" Offset="0.21400000154972076" />
							<GradientStop Color="#19698DAC" Offset="0.884" />
							<GradientStop Color="#26698DAC" Offset="0.902" />
						</RadialGradientBrush>
					</Path.Fill>
				</Path>
			</Grid>
		</DataTemplate>
	</UserControl.Resources>

	<Grid x:Name="LayoutRoot" Margin="20">
	
		<!-- Hours -->
        <c1:C1RadialGauge x:Name="clockHours" Value="9" Minimum="0" Maximum="12" StartAngle="0" SweepAngle="360" Radius="0.8" BorderThickness="6,0,0,0" PointerCapSize="0,0" PointerStyle="{StaticResource NeedleRectangle}" PointerFill="#FF555859" PointerStrokeThickness="0" PointerLength="0.3" PointerWidth="0.015" PointerOffset="0" BorderBrush="{StaticResource HourBorderBrush}">
            <c1:C1GaugeMark From="0" To="11" Interval="1" Template="{StaticResource HourMark}" />
		</c1:C1RadialGauge>

		<!-- Minutes -->
		<c1:C1RadialGauge x:Name="clockMins" Grid.Row="3" Value="0" 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="20" Minimum="0" Maximum="60" StartAngle="0" SweepAngle="360" Radius="0.8" Background="Transparent" BorderThickness="0" FaceVisibility="Collapsed" PointerCapSize="0.045,0.045" PointerCapFill="#FF555859" PointerCapStrokeThickness="0" PointerStyle="{StaticResource NeedleRectangle}" PointerFill="#FF999EA0" PointerStrokeThickness="0" PointerLength="0.55" PointerWidth="0.008" PointerOffset="-0.15" CoverTemplate="{StaticResource GlassEffect}" />
		
	</Grid>
</UserControl>