0 comments
.NET 
On Monday Microsoft released Visual Studio 2010, the newest edition of their integrated development for .NET, Native Windows Development and Silverlight.
One of the things that has improved greatly is the Cider designer. This designer is the core component in Visual Studio that developers will use when working on WPF and Silverlight projects. It allows you to design and edit XAML files that will ultimately represent the user interface of your application.
In this article I will show the new features of the designer and show you how you can use those features to make developing for Silverlight and WPF more fun.
The graphical design surface is back
The graphical design surface for Silverlight was gone for quite a while, but Microsoft fixed a large number of issues that made it impossible to show Silverlight 3 components graphically inside the cider designer. For WPF you could see the control, but editing it was somewhat spartan so they improved that too in this release of Visual Studio 2010.
The result is a greatly improved design interface that not only allows you to see what your interface looks like, but also allows you to edit the components in the user interface by dragging them around.
A revamped property editor
Along with the design surface Microsoft has changed the way the property editor works for WPF and Silverlight user interfaces. Lets walk through them one by one.
Care to search for that property?
A feature that’s really cool is the possibility to search for a specific property. You could already search for a property inside Expression Blend, but Visual Studio was lacking this option.
If you take a close look at the property editor you will notice that it has changed shape a bit. It contains a new search box at the top of the editor that allows you to type in a part of the name of the property that you’re looking for.
When you have entered a small portion of the property name, the property editor will filter the properties on the control and display only those that fit the term you entered.
To clear the filter you can select the little cross inside the search box. This will reset the search filter and the property editor will display all available properties on the control.
Databinding gets even better
Binding data in Silverlight and WPF already is really powerful, you can do almost anything with it. It’s cool even without a proper user interface to edit the bindings.
If you’re using databinding a lot you might like the next new feature. The property editor now supports the possibility to graphically bind data to specific properties.
You can bind data by either selecting the icon to the right of the property name and click the Databinding menuitem or by clicking the databinding button on properties that support only databinding.
When you edit a binding the property editor will show a new kind of editor that allows you to configure all aspects of the binding.
In the source panel of the binding editor you can choose between different kinds of sources. Default is the DataContext, but you can also create an elementbinding, a binding with a relative source or bind to a static resource. The right-hand side of the panel will display a preview of the data source.
After selecting a source you can click the Path panel to choose the property on the source to bind to the selected property in the property editor. This part of the binding editor allows you to graphically find the property you need. This helps especially in cases where you know the name of the property, but not exactly the casing or the location of the property.
The third panel on the binding editor allows you to specify a converter that is used for converting the input provided in the control to the type of the bound property.
The last panel lets you configure several options for the binding. Here you can choose between the various directions of bindings (OneWay,TwoWay, OneWayToSource, OneTime). Also you can specify how you want to handle exceptions and update notifications for the binding.
Slapping a new color on the UI
Expression Blend features a color picker that allows you to pick colors and adjust it’s shade by dragging a selection dot. Now Visual Studio 2010 has that too.
When you select a property of type Color or Brush you will get the color picker editor. You can either use the editor to specify the color or enter a color code manually in the textbox.
Also when you’re editing a brush property you can choose to create a gradientbrush or an imagebrush using the buttons positioned above the shaded rectangle.
Finally when you’re unsure what color to use, you can pick a color of the screen by selecting the droplet tool in the bottom-right of the shaded rectangle. This is a great tool when you want the brush to be the same as an already existing brush.
Choosing the right font for a control
Similar to the new color picker there’s also a new editor for the fonts of a control. When you select a control in the designer there will be a category named Text in the property editor. Inside this category you won’t find the traditional listing of properties, but instead there’s a Microsoft Word like editor for selecting a font and setting various text related settings.
There is however one catch. In Expression Blend you’re allowed to select any font. When you select a font that’s not embedded or doesn’t belong to the standard fonts you get a dialog that lets you embed that font inside the application.
This option is not available in Visual Studio 2010. When you want a font that’s not embedded you will have to manually embed it into the application before you can select it in the text section of the property editor.
Binding properties to resources
Another feature that is new on the property editor is the possibility to assign resources to specific properties. For this you need to select the icon to the right of the property name and choose the option Assign resource. You will then get the resource editor that you can use to select an existing resource within the current document or application.
To make it easier to find the right resource Microsoft has added a searchbox to the editor that works the same as the one used to find properties in the property editor.
Use the Key field to enter the resource key if you know there’s a resource with a specific key, but you don’t see it in the editor. This also works great when you know what you need and don’t want to plow through a large collection of resources.
Icons in the property editor
You may have noticed that the screenshots of the property editor are littered with icons of various shapes and sizes. All of these icons have meanings and can help you to gather a little more information on a specific property and the value of the property without having to fiddle with the menu options or need to look at the XAML.
Here’s a list of the icons that are shown in the editor and their meaning:
Property value is inherited either from the parent or it’s a default value.
Property allows databinding or another advanced option.
Property is bound to a local value. 
Property is databound.
Layout for your controls
Not only is the property editor renewed and improved, there are also improvements in the possibility to layout controls inside the various layout contains of WPF and Silverlight.
Resetting layout aspects for controls
For example, when you add a new control to a layout container you can right-click on the control and choose the option Reset layout and choose between the following options to reset the various layout aspects of that control.
- All – Resets both margins, sizing and alignment properties of the control
- Sizing – Resets the height and width of the control
- Alignment – Resets the alignment of the control
- Margins – Resets the margins of the control
This makes setting up a good looking layout a lot easier. No more fiddling in the property editor to reset the margins, alignment and size by hand.
Snaplines
The Windows Forms designer has had snaplines ever since the Visual Studio 2005 release. It allows you to get things aligned properly without having to calculate how much pixels to add as the margin of a control.
The cider designer however didn’t have this feature, so you had to setup the margins correctly yourself by calculating the pixels needed line everything up correctly. This has changed however in Visual Studio 2010.
When you drag a control around inside the designer, you will see that there are little snaplines showing up that are somewhat “magnetic”. This makes lining up controls quite a bit easier. It even shows what the distance is between the two controls that snap.
Modifying the Z-Order of controls
Every developer doing Silverlight and WPF development today knows that the traditional Z-ordering of controls doesn’t work for these technologies. Instead the Z-order is determined by the order in which the controls occur in the XAML.
Previously if you want to change the Z-order of a control or a set of controls you had to manually copy and paste the XAML snippets for the controls and hope you didn’t overwrite something.
In the new designer however you can right-click on a control and select the Order menuitem to move the control to the front, back or move a control forward or backward in the Z-order. The designer will rearrange the XAML for you so you don’t have to worry about messing things up.
Fixed size vs dynamic size
In the section on resetting layout parameters I showed you how you can reset the layout parameters of a control. There is one more trick that you can use in the designer.
Sometimes you want to change from a dynamic sizing control to a control with a fixed height or width. Microsoft added a small gesture to the designer to make this job easier to perform.
Notice the really tiny arrow in the picture above. Click this arrow to make the control fixed height. The arrow will now change to a small circle. Click that circle again and the control converts back to a margin based mode.
The arrow that is shown for switching between dynamic and fixed height is also displayed for switching between dynamic and fixed width.
Fixing the size of the root
Most of the time you want your controls to have a dynamic size so they fit automatically in the space provided to them. There are however scenarios where you might want not want to do that.
The cider designer has a UI hint to switch between a fixed size for the root or a dynamically sizing root.
In practice this means that when you click the icon with the arrows Visual Studio will assign a fixed width and height to the user control or window that you’re designing. After clicking the UI hint it will change into a crosshair to indicate that the root has a fixed size. Click the crosshair and it will change back to a dynamic size.
Improvements in the XAML editor
Not all chances to the cider designer are actually in the graphics department. Microsoft also spend time to improve the XAML editor.
Better text rendering performance
The editor was already written in WPF, but you still may notice a big difference in the fuzziness of the text displayed in the editor. Microsoft has implemented a new text technology called DirectWrite. This new technology makes the text rendering a lot better for both Silverlight and WPF. This change helps to improve the user experience offered by the XAML editor so you are less likely to get a headache watching XAML all day (Well at least not because of fuzzy fonts).
Improved intellisense
Not everybody likes to bind their objects using the property editor, but binding data in XAML was somewhat cumbersome in the previous release of Visual Studio.
In Visual Studio 2010, Microsoft has improved the intellisense for binding various sources so you will get hints to tell you what options you can specify.
For example if you enter a Binding expression, you will get all the possible options for the binding. This makes binding data in XAML easier to learn and apply.
Conclusion
The new designer adds a lot of features that make working on a Silverlight or WPF application a more fun experience for frontend developers. Does this mean that it’s perfect? Well, probably not, but it’s there for at least 95% and most of you will find it a really good tool to do Silverlight development with.
There’s still loads more stuff to talk about, for example I haven’t showed you what you can do to make the design experience for your own controls richer using the new designer components. I will talk about that some other time however, so bear with me.