Editing Visual States in Blend with Render Transform Mode

Did you know you can control how Blend interprets your drag’n dropping of UI elements when modifying your Visual State changes? Until recently I did not, so let me show you what I just discovered.

Visual States are a great tool for controlling the UI states of Windows Phone, Windows, WPF and Silverlight apps. A great model for working with them was recently demonstrated by my colleague Johan in his post A MVVM Visual State solution for your Windows Phone app.

I have been using Blend since it’s birth and love it – but I’ve always been annoyed by that I cannot (=have not been able to find how to) visually drag/drop UI elements when recording my Visual States so that the movement becomes animateable, due to the fact that the modifications result in layout changes. BUT – after a brownbag lunch series at Jayway with the excellent Blend series by Jerry and Unni: http://blog.jerrynixon.com/2014/01/the-most-comprehensive-blend-for-visual.html (can’t remember what episode) – Jerry showed how easy it is!

The solution

Blend has a nifty switcher for what mode the visual states are modified in: Layout Property Mode or Render Transform Mode. Layout property mode is default, and layout properties are seldom able to animate – but render transforms are.

layout property mode     render transform mode

So – simply flipping this to Render Transform Mode will give you render transforms instead of layout changes when moving your objects around.

The result

We start with an app with a rectangle:

full before

XAML:

 

Layout property mode

Creating a visual state and just dragging and resizing the rectangle results in the screenshot below. Notice the recorded transform in the object graph, is has affected height, width and margin:

full after layout

And the XAML has changed to this:

 

Render Transform Mode

Here comes the neat part; a quick undo and flipping the toggle to Render transform mode and re-doing the UI modifications, we now have this:

full after transform

 

XAML:

Hence, instead of modifying the UI with ObjectAnimationUsingKeyFrames on the Width, Height and Margin as the Layout property mode does, the UI is modified using DoubleAnimations on RenderTransforms, which can animate nicely.

 

Animate away!

Leave a Reply

Close Menu