RotateTransform in Blend/Windows Presentation Foundation (WPF) Apps using VB.NET

In this tutorial you are going to learn how to do a RotateTransform on an object created in Expression Blend. We shall be using a Windows Presentation Foundation (WPF) project type and to exemplify the use of RotateTransform we shall create a clock and rotate the minute and hour hand using VB.NET code. Basically a RotateTransform rotates an object by a specified angle about its center point.

Designing
We start off by designing our clock. The final work should look something like the following image;


I have kept the design very simple but you can embellish it to your taste and preference as long as you maintain its functionality. Let's start off;

  1. Open Expression Blend and create a new WPF Application project. Name it 'My Clock' and ensure that the Language is set to Visual Basic.
  2. Select Window in Objects and Timeline panel. In the layout section of the properties panel set the Width to 400 and the height to 400.

NB: You can double click on the Pan tool to center the window in the artboard.

  1. In the Appearance section of the properties panel select the AllowsTransparency checkbox.

  1. In the Brushes section ensure that Background is selected then click on the No brush tab.

  1. Select the Ellipse tool from the tool box. Draw out a circle in Window1 while holding the shift key to constrain the shape of the circle.

The size doesn't really matter as you draw it out. We will set it to fill the whole Window element next.

  1. While the circle is still selected change its margin properties in the Layout section of the properties panel to 0.

The circle should now be filling the whole LayoutRoot.

  1. With the circle still selected change its Fill to a Gradient brush. Change the gradient to a Radial gradient and adjust its properties to look like the following image. The first gradient stop is white.

Click on Stroke and click on the No Brush tab to remove the stroke.

  1. Click on the Brush Transform tool and adjust the gradient to look like the one in the following image.

  1. Rename the circle as Circle1 in the Objects and Timeline panel. You can do this by right clicking the Ellipse in the Objects and Timeline panel and selecting Rename from the context menu.
  2. Click on the Selection tool in the toolbox and ensure that Circle1 is still selected.Also make sure that the LayoutRoot is the active object in the Objects and Timeline panel. The active object has a yellow boundary.To make a content object the active object double click on it in the Objects and Timeline panel.

  1. Copy-paste a new circle either by right clicking on Circle1 in Objects and Timeline and selecting Copy from the context menu and then repeating the same procedure but selecting Paste instead or by pressing CTRL+C and then pressing CTRL+V.
  2. Rename the new circle as Circle2. 

  1. Resize Circle2 and make it slightly smaller than Circle1. Hold down ALT+SHIFT to constrain the shape of the circle while maintaining the center point. Resize by using Circle2s resize handles.

  1. Click on the Brush Transform tool and change the gradient to look like the following images;

NB: To create another gradient stop just click on an empty area of the gradient bar.

  1. With Circle2 still selected copy-paste another circle onto the artboard. Ensure that the LayoutRoot is the active object.
  2. Rename the new circle as Circle3 and resize it to make it slightly smaller than Circle2. Ensure that you have the Selection tool selected in order to do this.
  3. Change the Fill of Circle3 to a Linear gradient and adjust the gradient to look like the following image;

The gradient moves from a light shade of black to the darkest shade of black.

  1. Next we'll draw out the rectangle objects that will become the hour and minute hands. So select the Rectangle tool and draw out a rectangle whose height is greater than its width. Don't make it too high.
  2. Change the Fill to a solid brush that is white in color.

NB: You can use the zoom tool to zoom in on the rectangle.

  1. Rename the rectangle to MinuteHand.
  2. Change its center point by clicking on the bottom center point in the Translate tab of the Transform section.

  1. Move your cursor over the left corner radius resize diamond until it changes to a corner radius handle. Adjust the corner of the rectangle by dragging downwards until it looks something like the following image;

  1. We will now get our rectangle's center point to align with that of our circles. The method I use is quite manual but if you know a better method use it. Save your work, if you have not been doing so. Select Circle3 and copy-paste a new circle into our LayoutRoot. Change its Fill to a solid red color.
  2. Now while holding SHIFT+ALT resize our new circle until it is almost the size of its center point. Do this by dragging inwards.

Change the name of our new circle to Center Pnt and lock it so you do not accidentally move it.

  1. We will now try centering our rectangle with the circles. Select MinuteHand in Objects and Timeline and while holding the CTRL key select Circle3. Circle3 becomes your anchor as it is selected last.
  2. Right click your selection in Objects and Timeline and select Align > Horizontal Centers to align the two objects horizontally. Click on MinuteHand so that you have a single selection and using the down arrow key nudge it till its bottom center point is at the center of Center_Pnt. Zoom in if you have to for a clearer view. If your rectangle is too high adjust it to an appropriate size.

  1. With MinuteHand still selected do a copy paste to create a new rectangle. Rename it HourHand and change its Fill color to a shade of green. I used the settings R-145, G-153, B-0.
  2. Adjust HourHand's height by dragging downwards from the top middle resize handle in order to make it shorter than MinuteHand.

Our design work is now complete so save your work. We now move on to the fun stuff. Coding!

RotateTransform in Blend/Windows Presentation Foundation (WPF) Apps using VB.NET

Coding
In order to make our clock work we shall write some code that will rotate triangles HourHand and MinuteHand by certain angles at specific intervals. To achieve this we shall create two RotateTransform objects and set their Angle properties to various values at a set interval. The rotation of the two triangles will take place about their center point which, you will recall, we set to their bottom centers in Step 21 of the design phase. We shall then set the RenderTransform property of the two triangles to their respective RotateTransform objects.

NB: Since WPF does not have a Timer class or control we shall make use of the DispatcherTimer class, defined in System.Windows.Threading, to achieve the transforms at a specific interval.

  1. In the Project panel right click Solution and select 'Edit In Visual Studio' from the context menu. If you are using Blend 3 expand Window1.xaml and double click on Window1.xaml.vb to open the code behind file in Blend's code editor.
  2. If you opened your file in Visual Studio double click on Window1.xaml.vb in the Solution Explorer to open it.
  3. Right before the class constructor type in the following code;
   Private MinHandTr As New RotateTransform
   Private HourHandTr As New RotateTransform
  1. Import System.Windows.Threading. Write the following code before the class declaration;
   Imports System.Windows.Threading
  1. Type in the following code right before the constructor;
   'Create an instance of DispatcherTimer
   Private dT As New DispatcherTimer()
  1. Next we shall create the event handler for our DispatcherTimer object's Tick event. Type in the following code right before End Class;
   Public Sub dispatcher_Tick(ByVal source As Object, _
 		ByVal e As EventArgs)
        'Rotate MinuteHand by six degrees per minute
        MinHandTr.Angle = (DateTime.Now.Minute * 6)
        'Rotate HourHand by thirty degrees per hour
        'and 0.5 degrees every minute
        HourHandTr.Angle = (DateTime.Now.Hour * 30) + _
                        (DateTime.Now.Minute * 0.5)
        'Set the RenderTransform properties
        MinuteHand.RenderTransform = MinHandTr
        HourHand.RenderTransform = HourHandTr
   End Sub
  1. Select Window1 Events from the Class Name combo box and Loaded from the Method Name combo box. In the Window1_Loaded event procedure type in the following code;
     AddHandler dT.Tick, AddressOf dispatcher_Tick
     'Set the interval of the Tick event to 1 sec
     dT.Interval = New TimeSpan(0, 0, 1)
     'Start the DispatcherTimer
     dT.Start()

Your Window1 class should now look like this;

   Imports System
   Imports System.IO
   Imports System.Net
   Imports System.Windows
   Imports System.Windows.Controls
   Imports System.Windows.Data
   Imports System.Windows.Media
   Imports System.Windows.Media.Animation
   Imports System.Windows.Navigation
   Imports System.Windows.Threading

   Partial Public Class Window1
       'Create an instance of RotateTransform objects
       Private MinHandTr As New RotateTransform
       Private HourHandTr As New RotateTransform
       'Create an instance of DispatcherTimer
       Private dT As New DispatcherTimer()
       Public Sub New()
           MyBase.New()

           Me.InitializeComponent()

           ' Insert code required on object creation 
	     ' below this point.
       End Sub

       Public Sub dispatcher_Tick(ByVal source As Object, _
	    ByVal e As EventArgs)
           'Rotate MinuteHand by six degrees per minute
           MinHandTr.Angle = (DateTime.Now.Minute * 6)
           'Rotate HourHand by thirty degrees per hour
           'and 0.5 degrees every minute
           HourHandTr.Angle = (DateTime.Now.Hour * 30) + _
                           (DateTime.Now.Minute * 0.5)
           'Set the RenderTransform properties
           MinuteHand.RenderTransform = MinHandTr
           HourHand.RenderTransform = HourHandTr
       End Sub

       Private Sub Window1_Loaded(ByVal sender As Object, _
	    ByVal e As System.Windows.RoutedEventArgs) _
	    Handles Me.Loaded
           AddHandler dT.Tick, AddressOf dispatcher_Tick
           'Set the interval of the Tick event to 1 sec
           dT.Interval = New TimeSpan(0, 0, 1)
           'Start the DispatcherTimer
           dT.Start()
       End Sub

   End Class
  1. Run the application. Your clock should show the current time based on your system clock. Look at it for a minute or two to make sure it's working. Press ALT+F4 to close the application.

That completes this tutorial. If you want you can add some extras to your clock to make it more user friendly. Like a context menu when the user right-clicks the clock face that provides the user with options to exit the application or access a help file. You can also enable the user to drag the clock around the screen. Embellish it as you see fit but keep it functional.

 



Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Corporate e-Learning technology has a long and diverse pedigree. As far back as the 1980s, companies were adopting computer-based training to supplement traditional classroom activities. More recently, rich web-based applications have added streaming audio and video, real-time collaboration and other new tools to the e-Learning mix. At the same time, the growing availability of informal learning tools--a category that includes everything from web searches to social media posts--are having a major impact on …

  • Live Event Date: August 14, 2014 @ 2:00 p.m. ET / 11:00 a.m. PT Data protection has long been considered "overhead" by many organizations in the past, many chalking it up to an insurance policy or an extended warranty you may never use. The realities of today makes data protection a must-have, as we live in a data-driven society -- the digital assets we create, share, and collaborate with others on must be managed and protected for many purposes. Check out this upcoming eSeminar and join Seagate Cloud …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds