Creating a Silverlight Project with or without RIA enabled

1. Create project in Visual Studio and open the solution in Expression Blend 3.
2. The following figure will guide you for that.

Figure 1.2 Create a new Silverlight project



Figure 1.3 Uncheck the bottom checkbox to create the project without RIA support

Designing the User Control in Expression Blend 3

The User Control we are going to make should contain a background which matches an analog clock. I am taking a simple .png file which is looking simple.



Figure 1.4 Analog Clock Background.

Now our task is to create hour hand, minute hand and second hand. We will take rectangle control and design a simple second hand; as you can see from the figure. We will further modify it to create our next two shapes that is minute hand and hour hand the below figure and XAML code will help you regarding this.



Figure 1.5 Designing the rectangular shapes.

The XAML will look like the following after all the design changes above.

<UserControl
    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" x:Class="AnalogClockSilverlight.MainPage"
    Width="260" Height="260" mc:Ignorable="d">

      <Grid x:Name="LayoutRoot">
      <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>

            <Image Source="images/myClock.png" d:IsLocked="True"/>

            <Path x:Name="SecondHand" Stretch="Fill" Stroke="#00000000" Height="88" Margin="128.47,48,126.808,0" VerticalAlignment="Top" RenderTransformOrigin="0.394,0.941" Data="M0.5,0.5 L4.5,0.5 L4.5,95.5 L0.5,95.5 z" UseLayoutRounding="False" d:IsLocked="True">
            <Path.Fill>
                  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFF80500" Offset="0.274"/>
                        <GradientStop Color="#FFDBA63C" Offset="0.9"/>
                  </LinearGradientBrush>
            </Path.Fill>
            <Path.RenderTransform>
                  <TransformGroup>
                        <RotateTransform  x:Name="SecondRotate" Angle="0"/>
                  </TransformGroup>
            </Path.RenderTransform>
      </Path>
      <Path x:Name="MinuteHand" Stretch="Fill" Stroke="#00000000" Height="76.25" Margin="128.331,59.75,126.669,0" VerticalAlignment="Top" RenderTransformOrigin="0.4,0.923" Data="M0.5,0.5 L4.5,0.5 L4.5,95.5 L0.5,95.5 z" UseLayoutRounding="False" d:IsLocked="True">
            <Path.Fill>
                  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF80AACF" Offset="0.509"/>
                        <GradientStop Color="#FF46B644" Offset="1"/>
                  </LinearGradientBrush>
            </Path.Fill>
            <Path.RenderTransform>
                  <TransformGroup>
                        <RotateTransform  x:Name="MinuteRotate" Angle="0"/>
                  </TransformGroup>
            </Path.RenderTransform>
      </Path>
      <Path x:Name="HourHand" Stretch="Fill" Stroke="#00000000" Height="52.5" Margin="128.331,83.5,126.669,0" VerticalAlignment="Top" RenderTransformOrigin="0.4,0.889" Data="M0.5,0.5 L4.5,0.5 L4.5,95.5 L0.5,95.5 z" UseLayoutRounding="False" d:IsLocked="True">
            <Path.Fill>
                  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF539DDE" Offset="0.73"/>
                        <GradientStop Color="#FF46B644" Offset="1"/>
                        <GradientStop Color="#FF47B546" Offset="1"/>
                  </LinearGradientBrush>
            </Path.Fill>
            <Path.RenderTransform>
                  <TransformGroup>
                        <RotateTransform  x:Name="HourRotate" Angle="0"/>
                  </TransformGroup>
            </Path.RenderTransform>
      </Path>
    </Grid>
</UserControl>

Rotating the Second Hand

This is simple mathemtics for rotating second hand. As it travels 360 degrees in 60seconds so it will rotate 6 degrees in each second. See the below code.

double secondRotateValue = Convert.ToDouble(DateTime.Now.Second.ToString());
secondRotateValue = Convert.ToDouble(DateTime.Now.Second.ToString())*6;
//SecondRotate is the rectangle name
SecondRotate.Angle = secondRotateValue;

Rotating the Minute Hand & Hour Hand

Now we have to go back to our college days and find out the logic for finding out the angle rotated by the minute hand or the hour hand. Or you can search it in google. The formula says as follows:

double hourRotateValue = Convert.ToDouble(DateTime.Now.Hour.ToString());
double minuteRotateValue = Convert.ToDouble(DateTime.Now.Minute.ToString());
minuteRotateValue = (minuteRotateValue + secondRotateValue/60)* 6;
SecondRotate.Angle = secondRotateValue;
MinuteRotate.Angle = minuteRotateValue;

Ticking in Real Time

If you want to tick your second hand in real time, then you need to add the following event and write the following codes.

public partial class ClockWidget : UserControl
    {
        public ClockWidget()
        {
            InitializeComponent();
            StartTimer(null, null);
        }

        public void StartTimer(object o, RoutedEventArgs sender)
        {
            System.Windows.Threading.DispatcherTimer myDispatcherTimer = new System.Windows.Threading.DispatcherTimer();
            myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 1000); // 100 Milliseconds
            myDispatcherTimer.Tick += new EventHandler(Each_Tick);
            myDispatcherTimer.Start();
        }