Changes to the Visual Designer in Visual Studio 2012

The visual designer for Visual Studio 2012 is fundamentally similar to the designers for XAML in earlier versions, with one major exception: The Properties window has been totally replaced. Otherwise, though there are numerous cosmetic differences, the operation of the drag-and-drop visual designer and the associated XAML editor are fundamentally similar. That means, unfortunately, that dragging elements from the toolbox to your XAML surface still isn't very helpful; more often than not you are better off editing XAML directly to get the layout you need.

The new Properties window is a significant improvement, however. It shares many features with Expression Blend, and thus offers a better experience at configuring many property values. Here are some of the improvements.

Better Resource Selector

The Resource selector has been improved for all properties. The glyph that brings up a menu of Advanced Property options for setting a property is similar to the one in Visual Studio 2010, but it has now been moved to the right side of the property value. It is shown circled in Figure 13.12. Figure 13.13 then shows the menu that results from pressing the glyph, with a submenu of system resources.

Figure 13.12 The glyph that calls up advanced settings for a property has been moved to the far right in Visual Studio 2012.

Figure 13.13 The advanced settings menu has several options for working with resources. The Local Resource and System Resource options now have a scrollable list of resources.

It's also easier to choose resources to associate with a property of type Brush. The Brush editor, which automatically appears in the Properties windows for properties that take a Brush such as Background, Foreground, and Fill, now has easier access to available Brush resources. At the top of the Brush editor, where the brush type is selected, a new option appears at the far right to get a tab showing all the available Brush resources.

Common vs. Advanced Property Categories

Each category of properties is now divided into Common and Advanced properties. Common properties are those the Visual Studio team decided that you are likely to set frequently. Advanced properties are expected to be set less frequently, and are available by pressing the down arrow at the bottom of the category.

As in Expression Blend, if you search for a property by name, it appears in the Properties window regardless of whether it is in the Common or Advanced group for its category. Unlike past versions of Expression Blend, the Properties window in Visual Studio 2012 retains the ability to sort properties alphabetically.

Transform Properties

You can now set Transform properties in the Visual Studio 2012 Properties window. The two properties in the Transform category are RenderTransform and Projection. Even though Chapter 12 did not include coverage of transforms and projections, most experienced XAML developers will be familiar with them.

Visual Studio 2010 had no ability to set RenderTransform or Projection property values in the Properties window, and developers were forced to either use Expression Blend or fall back on hand-coded XAML. Now the Expression Blend property editor for those properties is available in Visual Studio. Figure 13.14 shows a RenderTransform being set with a rotation angle of 15 degrees.

Figure 13.14 The Properties window now includes the ability to set Transform properties such as RenderTransform. Here, a rotation angle of 15 degrees is being set.

Animation

One of the more difficult aspects of developing in earlier XAML platforms was working with animation. While those platforms had very rich animation support, using it required a high level of expertise.

Windows 8 shares the rich animation support supported by earlier versions, but it adds an entry point that makes commonly used animations very accessible. A set of animations called ThemeTransitions are available merely by adding them to the Transitions property for an element, or the ChildTransitions property for a panel.

To use a ThemeTransition, in the Properties window, locate the Transitions property and click the button with the ellipsis on the right. You will see a dialogue similar to Figure 13.15.

Figure 13.15 Setting transitions in the Visual Studio 2012 Properties window. The drop-down of available transitions is shown open.

To add a transition animation, first select the kind of transition you want to work with by picking an option in the drop-down on the bottom right. This drop-down has been opened in Figure 13.15. For example, suppose you choose EntranceThemeTransition. You can then add animation for that transition by pressing the Add button.

At that point the dialogue will look like Figure 13.16. Notice that the transition has several properties you can use to tweak the animation. In this case, you can specify the amount of horizontal and vertical animation applied to the animation when it appears.

Figure 13.16 The transitions editor with an EntranceThemeTransition added

If you add such a transition to an element, when the element is added to the UI, or when the element changes in visibility from Collapsed to Visible, the transition will be animated. The code download for the chapter includes a sample program that animates a rectangle when it appears.