WPF Designer “Cider” in Visual Studio Orcas Beta 1

Visual Studio “Orcas” will have a new and improved WPF designer, codenamed “Cider “. I’ve been using the November 2006 CTP of Cider in Visual Studio 2005 up until now, which is adequate, but not feature complete by far. Furthermoew, development on the WPF extensions for Visual Studio 2005 is not continued as you can read in the November CTP release notes:

This November CTP is the last planned release of Cider as an extension to Visual Studio 2005. Future CTPs of Cider will be available in the preview releases of the next full version of Visual Studio which is currently code named “Orcas”.

This evening I took my first longer look at Cider as it is in Visual Studio Orcas Beta 1 (April 2007 release) and decided to post some screenshots. Cider is definitely starting to look good.

For full appreciation and understanding of what is new check out the release notes for the March 2007 CTP of Cider. The differences between Beta 1 and the March 2007 CTP are minimal. There wasn’t any information on Cider Beta 1 at the time of this writing. As you read this there might be some at the Cider wiki, though.

Here we go. In the first screenshot you can see that the designer now supports zooming in (and out) of the surface.

While editing there are a lot of visual aids, such as the snaplines for alignment and preview of the displacement of controls on the designer surface. The latter is visible as the rectangle that is laid over the form at the top left corner. The larger shape is the shape of WIndow1, and the two red blocks in it mark the distance that the Cancel button has been moved.

The split screen for viewing both XAML and Design has been around in the November CTP as well. In case you hadn’t seen them, here’s the middle of the split screen. You can see the Design and upside-down XAML tab, plus the button in between to swap them around. At the right you can change the orientation of the split to left/right or top/bottom and collapse the bottom one is you want just one pane.

Collapsing one will give you the two tabs next to each other. 

At the bottom the path to the currently selected WPF element is shown. The arrows at the left allow you to navigate to the child elements our traverse the parents back to the root. What’s also pretty cool is that you can hover a certain element in the path and get a preview if that’s available.

The property grid is also brand new. It has a somewhat different layout at the top featuring another preview of the currently selected WPF element (again, if available).

A very obvious caveat in the November 2006 CTP is the omission of a context menu when you right-click an element on the designer. It is available now and Cut, Copy and Paste actions are available here, as well as shortcuts to switch from code to XAML and vice versa. It also allows you to alter the zoom level.

One other available options is the Document Outline, that you can open up. This gives you a view into the logical WPF element tree. It gives you a nice overview of the current XAML document and also has the handy preview thumbnails whenever you hover a node in the tree.

One very big improvement is the IntelliSense of the XAML code editor. Instead of a XML Schema based suggestions the editor now uses a XAML language service, that is able to give much better IntelliSense information. For one it can take the current context of the element into account.


And finally, adding XML namespaces based on CLR namespaces (the XAML variant to a C# using or VB Imports statement) to XAML is now a piece of cake. Simply select the desired namespace from the IntelliSense context menu. This will appear as soon as you type the opening quotes after a namespace prefix declaration. As easy as that.


So, the Cider designer is coming together quite nicely. Still a long way to go. For example, there is no editor support to create an event handler. You will have to create on in code or by hand-editing the XAML. Being able to do that the ASP.NET or WinForms way would be very welcome.

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s