Windows Presentations Foundation (WPF) 2D Transformations

In the previous articles of this series, I introduced the Windows Presentation Foundation (formerly code-named 'Avalon'), XAML (the new language for designing user interfaces), the Microsoft Expression family of tools (Graphic, Interactive, and Web Designers) and you created two versions of a simple calculator using these new technologies and tools. Starting with this article, you will start getting into more advanced and detailed topics concerning WPF, XAML, and the Interactive Designer.

In this article, I will show how you can apply different types of 2-D transformations (translations, rotations, scaling, or skewing) on the elements of WPF.

Overview on Transformations

Transformations are available through the System.Windows.Media namespace. The base class for the transformations hierarchy is Transform.

Five derived classes perform specific transformation

Five derived classes perform specific transformation:

  • RotateTransform: Rotates an object in the two-dimensional plane by specifying an angle (property Angle) and a center point expressed in the coordinate space of the element being transformed (properties CenterX and CenterY).
  • ScaleTransform: Scales an object starting from a defined center point (properties CenterX and CenterY); different values for the two axes x- and y- can be specified with the ScaleX and ScaleY properties. By default, the scale transformation is centered to the (0, 0) point, but you may want to scale it to (Width/2, Height/2).
  • SkewTransform: Defines a two-dimensional skew that stretches the coordinate space in a non-uniform manner. CenterX and CenterY properties specify the center point for the transformation and AngleX and AngleY the x- and y-axis skew angle. The transformation skews the x- and y-axis values relative to the original coordinate system.
  • TranslateTransform: Translates an object in the two-dimensional space. The amount in pixels for translating the object is specified through the X and Y properties.
  • MatrixTransform: Creates an affine matrix transformation to manipulate the object in the two dimensional space using custom transformations not provided by the classes listed above.

Any of these transformations can be applied to any UIElement (Windows Presentation Foundation element). Of course, any number of transformations can be applied to an element. TransformGroup class (derived from Transform) represents a composite transformation. It contains a collection of Transforms. The transformations can be applied to the rendering position or the layout of an element.

If the transformations are set to the RenderTransform property (from UIElement), they affect the rendering position of the element (how the element is shown). If they are applied to the LayoutTransform property (from FrameworkElement), they affect the results of the layout, and could be useful for cases such as rotating the elements of a menu from horizontal to vertical or zooming elements on focus.

Sample Codes

To rotate an element (a text box for, example) 90 degrees clockwise, create a new RotateTransform object and set the angle to 90.

TextBox.RenderTransform = new RotateTransform(90);

To scale an element 200 percent on the y-axis, but not on the x-axis too, use a ScaleTransform object:

TextBox.RenderTransform = new ScaleTransform(1, 2);

To skew an element 45 degrees on the x-axis and 90 degrees on the y-axis, use a SkewTransform:

TextBox.RenderTransform = new SkewTransform(45, 90);

Translating 50 pixels on x-axis to the right and 100 pixels to the top is as simple as:

TextBox.RenderTransform = new TranslateTransform(50, -100);

If you want to apply all these transformations to a control, use a TransformGroup object:

TransformGroup group = new TransformGroup();
group.Children.Add(RotateTransform(90));
group.Children.Add(ScaleTransform(1, 2));
group.Children.Add(SkewTransform(45, 90));
group.Children.Add(TranslateTransform(50, -100));

TextBox.RenderTransform = group;

Putting It All Together

To see the transformation on action, you can create a simple application with the Expression Interactive Designer.

Create a new Standard Application with C# as the code-behind language and the sliders and labels you see in this image. Remember that you use the Library window to select the controls that you place in the scene. From the Properties window, you can set the Minimum and Maximum properties for the sliders (set the values indicated in the labels).

the values indicated in the labels

You want to handle the value change event for each slider and perform a specific action (change the transformation's properties). To add handlers, open the Events window, and use the Add button to add a method for the ValueChanged event for each slider. The designer will create an empty method automatically:

private void OnValueChanged(object sender,
   System.Windows.RoutedPropertyChangedEventArgs<double> e)
{
}

You also will need to handle the Loaded event for the scene itself because in that method you will set the RenderTransform property.



Windows Presentations Foundation (WPF) 2D Transformations

The scene code listed below is rather self explaining. I declared an object of each of the four simple transformations and an object to group them. The RenderTransform is set in the OnSceneLoaded() method; whenever the value of a slider changes, the appropriate property of a transformation object is set.

using System;
using System.IO;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;

namespace TranslationsDemo
{
   public partial class TranslationsScene
   {
      private TransformGroup group = new TransformGroup();
      private RotateTransform rotate = new RotateTransform(0);
      private ScaleTransform scale = new ScaleTransform(1, 1);
      private SkewTransform skew = new SkewTransform(0, 0);
      private TranslateTransform trans = new TranslateTransform(0, 0);

      public TranslationsScene()
      {
         this.InitializeComponent();

         // add the transformations to the group
         group.Children.Add(rotate);
         group.Children.Add(scale);
         group.Children.Add(skew);
         group.Children.Add(trans);
      }

      private void OnSceneLoaded(object sender,
                                 System.Windows.RoutedEventArgs e)
      {
         // set the transformation property of the TextBox to the
         // transformations group
         TextBox.RenderTransform = group;
      }

      private void OnAngleChanged(object sender,
         System.Windows.RoutedPropertyChangedEventArgs<double> e)
      {
         // change the angle
         rotate.Angle = e.NewValue;
      }

      private void OnScaleChanged(object sender,
         System.Windows.RoutedPropertyChangedEventArgs<double> e)
      {
         // change the values of ratio on the two axes
         scale.ScaleX = e.NewValue / 100;
         scale.ScaleY = e.NewValue / 100;
      }

      private void OnSkewXChanged(object sender,
         System.Windows.RoutedPropertyChangedEventArgs<double> e)
      {
         skew.AngleX = e.NewValue;
      }

      private void OnSkewYChanged(object sender,
         System.Windows.RoutedPropertyChangedEventArgs<double> e)
      {
         skew.AngleY = e.NewValue;
      }

      private void OnTranslateX(object sender,
         System.Windows.RoutedPropertyChangedEventArgs<double> e)
      {
         trans.X = e.NewValue;
      }

      private void OnTranslateY(object sender,
         System.Windows.RoutedPropertyChangedEventArgs<double> e)
      {
         trans.Y = e.NewValue;
      }
   }
}

Here are several snapshots of transformations applied to the text box.

Transforms in XAML with Interactive Designer

With the Expression Interactive Designer you can directly apply transformations into the XAML code by using the Transforms window (available from the View menu). It provides basic transformations such as position change, rotation, scaling, skewing, center point change flipping.

Conclusions

WPF provides a very simple way of applying 2-D transformations on the WPF elements, including both well-defined transformations (scaling, rotating, skewing, and translating) and custom transformation (by defining a special matrix). All these are provided from the within the System.Windows.Media namespace.

Previous Series Articles





About the Author

Marius Bancila

Marius Bancila is a Microsoft MVP for VC++. He works as a software developer for a Norwegian-based company. He is mainly focused on building desktop applications with MFC and VC#. He keeps a blog at www.mariusbancila.ro/blog, focused on Windows programming. He is the co-founder of codexpert.ro, a community for Romanian C++/VC++ programmers.

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

  • Event Date: April 15, 2014 The ability to effectively set sales goals, assign quotas and territories, bring new people on board and quickly make adjustments to the sales force is often crucial to success--and to the field experience! But for sales operations leaders, managing the administrative processes, systems, data and various departments to get it all right can often be difficult, inefficient and manually intensive. Register for this webinar and learn how you can: Align sales goals, quotas and …

  • "Security" is the number one issue holding business leaders back from the cloud. But does the reality match the perception? Keeping data close to home, on premises, makes business and IT leaders feel inherently more secure. But the truth is, cloud solutions can offer companies real, tangible security advantages. Before you assume that on-site is the only way to keep data safe, it's worth taking a comprehensive approach to evaluating risks. Doing so can lead to big benefits.

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds