The Clock control is modeled on an analog type clock. It can function as both a regular clock which displays the current time, and as a time picker. It ships with two pre-defined styles.

You will find Clock in DevComponents.Silverlight.Controls namespace in library DevComponents.Silverlight.Controls.dll

Time picker mode

To use the clock control as a time picker, set the Mode property to ClockMode.TimePicker. In time picker mode, the clock does not update its display as current time changes, but remains fixed. If IsEditable is true, the end user is able to set the time by dragging the clock hands with the mouse. All three hands can be moved enabling to the second time selection. The selected time is retrieved via the clock control’s Value property. Value can also be set in code, which will cause the display to be updated. If IsEditable is false, the clock hands cannot be moved by the end user, regardless of the value of the Mode property.

Clock Mode

To use the clock control as a regular clock which displays the current time set the Mode property to ClockMode.Clock. When in Clock mode, the Value property is updated every second to the current time, causing the display to be updated, which provides the effect of a running analog clock.

Clock Style

Clock control ships with two pre-defined styles (in addition to the default style) which are applied using the ClockStyle property.

Set ClockStyle = ClockStyle.Classic to use the Classic style which looks like this:

image

Set ClockStyle = ClockStyle.Basic to use the Basic style which looks like this:

image

To use the default or themed style, or to define your own custom style, set ClockStyle = ClockStyle.Default.

Customizing the Clock face

Any of the resources used by the build-in styles can be replaced with resource with identical Key defined in your application’s resources. For example, the following resources are used by the Basic style:

<RadialGradientBrush x:Key="BasicClockFaceBrush" GradientOrigin="0.5,1" RadiusX="1.2" RadiusY="0.5">
    <GradientStop Color="#EFEFEF" Offset="1" />
    <GradientStop Color="#EBEBEB" Offset="0.66" />
    <GradientStop Color="#E5E5E5" Offset="0.65" />
    <GradientStop Color="#EFEFEF" Offset="0" />
</RadialGradientBrush>
<SolidColorBrush x:Key="BasicSecondHandBrush" Color="Red" />

To customize the colors of the Basic style, modify these brushes as you want and add them to your App.xaml resource dictionary. (Note: the Backgrounds of the hour and minute hands of the basic style are bound to the clock’s Foreground property.)

Clock control Style and Template

Here is the default style for Clock which you can use as a starting point for creating your own styles. The template contains all the elements of the Clock controls:

<Style TargetType="dc:Clock">
    <Setter Property="BorderBrush" Value="DarkGray" />
    <Setter Property="Background" Value="LightGray" />
    <Setter Property="Foreground" Value="DarkGray" />
    <Setter Property="FontFamily" Value="Times New Roman" />
    <Setter Property="FontSize" Value="22" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="dc:Clock">
                <Viewbox>
                    <Grid Width="200" Height="200" Name="Grd">
                        <Ellipse Fill="{TemplateBinding Background}"/>
                        <Ellipse Width="12" Height="12" HorizontalAlignment="Center" 
                                    VerticalAlignment="Center" Fill="{TemplateBinding BorderBrush}"/>
                        <Grid Name="HourMarkings">
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <Grid HorizontalAlignment="Center" VerticalAlignment="Stretch"
                                    RenderTransformOrigin="0.5,1" >
                                <TextBlock Margin="0,1,0,0" VerticalAlignment="Top" Text="III" />
                                <Grid.RenderTransform>
                                    <RotateTransform Angle="90" />
                                </Grid.RenderTransform>
                            </Grid>
                            <Grid HorizontalAlignment="Center" VerticalAlignment="Stretch"
                                    RenderTransformOrigin="0.5,1" >
                                <TextBlock Margin="0,1,0,0" VerticalAlignment="Top" Text="VI" />
                                <Grid.RenderTransform>
                                    <RotateTransform Angle="180" />
                                </Grid.RenderTransform>
                            </Grid>
                            <Grid HorizontalAlignment="Center" VerticalAlignment="Stretch"
                                    RenderTransformOrigin="0.5,1" >
                                <TextBlock Margin="0,1,0,0" VerticalAlignment="Top" Text="IX" />
                                <Grid.RenderTransform>
                                    <RotateTransform Angle="-90" />
                                </Grid.RenderTransform>
                            </Grid>
                            <Grid HorizontalAlignment="Center" VerticalAlignment="Stretch"
                                    RenderTransformOrigin="0.5,1" >
                                <TextBlock Margin="0,1,0,0" VerticalAlignment="Top" Text="XII" />
                            </Grid>
                        </Grid>
                        <dc:ClockHand x:Name="HourHand" Hand="Hour" Height="55" Width="8" 
                                        VerticalAlignment="Top" HorizontalAlignment="Center" 
                                        Background="{TemplateBinding BorderBrush}"
                                        Margin="0,45,0,0" RenderTransformOrigin="0.5,1">
                            <Control.RenderTransform>
                                <RotateTransform Angle="{Binding ElementName=HourHand, Path=Angle}" />
                            </Control.RenderTransform>
                        </dc:ClockHand>
                        <dc:ClockHand x:Name="MinuteHand" Hand="Minute" Height="80" Width="4" 
                                        VerticalAlignment="Top" HorizontalAlignment="Center" 
                                        Background="{TemplateBinding BorderBrush}"
                                        Margin="0,20,0,0" RenderTransformOrigin="0.5,1">
                            <dc:ClockHand.RenderTransform>
                                <RotateTransform Angle="{Binding ElementName=MinuteHand, Path=Angle}" />
                            </dc:ClockHand.RenderTransform>
                        </dc:ClockHand>
                        <dc:ClockHand x:Name="SecondHand" Hand="Second" Height="95" Width="2" 
                                        VerticalAlignment="Top" HorizontalAlignment="Center"  
                                        Background="{TemplateBinding BorderBrush}"
                                        Margin="0,5,0,0" RenderTransformOrigin="0.5,1">
                            <dc:ClockHand.RenderTransform>
                                <RotateTransform Angle="{Binding ElementName=SecondHand, Path=Angle}" />
                            </dc:ClockHand.RenderTransform>
                        </dc:ClockHand>
                    </Grid>
                </Viewbox>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Related posts:

  1. Circular Progress Control (Silverlight) Quick Start Guide
  2. Silverlight Toolbar Quick Start Guide
  3. Rating Control for Silverlight Quick Start Guide
  4. SuperToolTip Control
  5. Navigation Pane Quick Start Guide (Silverlight)