Expression Blend and Design

The team blog of the Expression Blend and Design products.

A/C Controls - Skinning the RotaryControl

A/C Controls - Skinning the RotaryControl

  • Comments 9

Download the RotaryControl source code

Download the ACControls source code

As promised, in this post I’ll show how to customize the template of the RotaryControl. I wanted to model automobile A/C controls and the result is shown below.

accontrols

If you want to open and examine the project files as I describe the steps, download the source code and unzip it so that the RotaryControl and ACControls folders are siblings. Then open the ACControls solution in Blend 2 September Preview.

For the button design work I went to see Sam Paye, one of our designers, and he used Expression Design to create the visuals. Knowing that the control template requires three specially-named parts, Sam separated out the graphics into three top-level layers, or groups, each named after a template part. We then exported the graphics as three XAML files and opened those directly in Blend. After drawing out three instances of RotaryControl on the artboard and then making a copy of the template for each, it was very easy to copy all three layers from each XAML file and paste them directly into a Grid at the root of the corresponding template. Because the layer names matched the part names, and the Expression Design graphics were the same size (in pixels) as the Grid at the root of the templates, everything worked like a charm. The control code automatically turned off mouse hit testing on the topmost 'shine' layer and allowed the middle 'dial' layer to rotate in response to mouse gestures.

When you select a RotaryControl, a number of custom properties are listed in the Miscellaneous category of the property inspector. None of the controls are meant to spin freely through 360 degrees: all are constrained, so for each I set RotationIsConstrained to true and CounterClockwiseMostAngle and ClockwiseMostAngle to suitable values. For the leftmost control, the mode control, I set SnapToSnapAngle to true and SnapAngle to 40. For the other two controls I set SnapToSnapAngle to false so that they roll smoothly. When SnapToSnapAngle is false, both SnapAngle and RotationIsAnimated are ignored.

The mode control has five positions, and therefore five values, so I used Blend’s collection editor in the property inspector to enter five strings in the SnapValues property – one to describe each position in clockwise order. I then bound a TextBlock’s Text property to the mode control’s SnapValue property so that the current position is always translated into some meaningful string value beneath the mode control.

I hope you find the RotaryControl, and the example templates given here, of use.

Steve White

Leave a Comment
  • Please add 4 and 4 and type the answer here:
  • Post
  • Download the RotaryControl source code Download the ACControls source code As promised, in this post

  • Some old, some new: XamlArchive.com -- great idea for archiving cool XAML to use!; The Expression team

  • This is a really cool control...the only thing I feel is missing is the logic to auto-position the dial knob whenever the Angle property is updated. In fact, a ValueChanged event would fit in well with this control in the same way it does with a Slider. Any chance you can add this functionality?

  • Update: I was able to achieve the functionality requested above by exposing the _desiredTheta property and setting it directly. I realized that this property was saving the last Angle set on the dial and thus overwriting values written to Angle via code...dunno if that's the correct way of going about it but it works now. It would still be nice to have a ValueChanged event, similar to ThetaChanged that you have in the class definition :-)

  • I've only got one beef with this.  If I change the window to a "lookless" style with no border, then write a function to left-click and drag to move the window, it breaks the rotary control functionality.  I can't drag on the control face to rotate it this way.  The only way I can get the control to turn is by clicking...perhaps there is a way to rewrite something.

  • Great control, really useful - One question, when I set an angular value via C# i.e. RotaryDial1.Angle = 180; the graphic updates to that position, but, if I then try to drag the dial around again it jumps back to its previously dragged-to-position.  Any suggestions?

    Cheers, -RJ-

  • Is there an event for the rotation?

    How do we detect the rotation?

  • Great control.  You'll want to change both of the RotateTransform() calls to use the value of 0 for the last two parameters, not 0.5d, since this is the offset of the rotation from the center.  With the 0.5d in there the dial is a hair off balance.

  • Cannot download source code. How can I download them?

Page 1 of 1 (9 items)