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!

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read