It’s easy to forget how different the editing experience for Silverlight applications is in Visual Studio 2010 over and above what we had in Visual Studio 2008 Sp1. This isn’t necessarily Silverlight 4 specific but I suspect a lot of people coming to the Silverlight 4 bits will be doing Silverlight in VS 2010 for the first time so I thought a few things were worth pointing out.

Firstly, there’s multi-targeting. Visual Studio 2010 is the first version of Visual Studio to support building applications for multiple versions of Silverlight ( namely V3 and V4 ). Note that a user ( or developer ) can only have one version of the Silverlight runtime installed so you’d still need to have multiple machines or VPCs in order to test on Silverlight 3 and/or Silverlight 4 but you can explicitly choose which version you’re targeting in the IDE at build time. If you’re doing this you need to be aware that when you create a project you need to ignore the .NET Framework setting on the New Project dialog;

and, instead, on the “New Silverlight Application” dialog that follows you need to select which Silverlight version you’re working with;

Secondly, there’s a graphical designer 🙂 for XAML files and a Toolbox of controls to drag-drop onto that design surface – no small thing.

The designer has some neat tricks around layout. If we drag out a button for instance;

then the XAML view and Visual Studio do the right thing in terms of selection tracking and XAML highlighting below;

and, naturally, the XAML view and the design surface as kept in sync as you’d expect. I actually like working with them both open as I’m a bit keen to see what XAML is being generated by the designer and the Document Outline view also syncs itself up nicely and provides preview too which is pretty useful if you like to work with just the XAML editor open and find yourself lost in there from time to time;

There’s nice features for layout. When you’re looking at that button it’s not immediately obvious what those arrows and dots mean;

and note that in a Canvas moving the button around will set Canvas.Top and Canvas.Left rather than Margin and you won’t see the arrows and dots. These dots/arrows take a bit of getting used to as they do different things. For instance, let’s take this orange grid within a white grid;

Now, if I select the Orange grid and drag its resize handles what properties am I changing?

It looks like I’m setting the margins. So what if I wanted to set width/height? If I go and click the little arrows to turn them into circles;

then the editor changes the margin into Width/Height values and dragging now changes Width/Height ( in this case );

Note also the handy right-mouse-menu;

and my personal favourite ( because margins tend to bug me 🙂 );

which is a quick way of resetting stuff you’ve set around size/alignments/margin and is great when you’ve copied a lump of XAML from somewhere.

If you’ve got the “root” element of a UserControl selected ( i.e. the UserControl ) then you’ll see a little highlight on the bottom right;

what this does is switch between your UserControl not specifying a Width/Height ( which is 99.9% of the time what you want imho ) and your UserControl copying its Width and Height from the current value for d:DesignWidth and d:DesignHeight

If it’s not obvious what these things are – DesignWidth/Height are just what VS/Blend will use to display your control while you work with it. They’re not used at runtime. Width/Height are used at runtime and leaving them unset generally means “stretch to fill” dependent on who your parent is and what they’ve done about your sizing.

Selection works pretty well for me. If I have a couple of grids like the white/orange ones below then clicking the orange one makes it fairly obvious which grid I’m working with and clicking in the white area behind it ( or in the XAML ) makes it clear I’m now dealing with the white grid;

Also, dragging elements from one Grid to another is pretty easy. As I drag this button from the Orange grid to the white grid there’s a clear, blue indicator that shows me which Grid I’m targeting;

Note also that if you just double click on a control in the toolbox, it’ll go into the currently selected layout panel ( just like in Blend ) and so if you have a Grid selected and double click a Button a few times then you’ll get buttons inserted pretty quickly with a little margin put around them ( don’t like the layout? drag select them and right mouse and Reset what you don’t like 🙂 );

You might also notice a little red line with a couple of numbers on it – as you approach the edge of “other objects” this little snap lines appear and tell you how far away you are from those other objects as in;

I use Grids a lot and I find typing in Grid.RowDefinitions and Grid.ColumnDefinitions painful and it’s good to see that VS has decent support for Grid layout. If I take a Grid like this orange one within a white one and hover over the blue area to the left or top of the grid then I see a little triangle and an insertion marker;

If I click then my grid gets a now Row/Column definition;

Now, I’d not usually type in 172* and 80* myself 🙂 What if I’m trying to set up one row which is Auto and the other which is just *? I can affect those choices by hovering over the Grid/Row in the blue area;

and I can quickly change between Auto/Fixed/* sizing by just clicking the relevant button. It’s worth saying that if you do select a RowDefinition (in the XAML editor) then its properties do pop up in the properties window;

Speaking of which, over in the property grid, there’s a nice search feature;

and I can also group properties by where their value is coming from – i.e. is the value set locally or inherited or data-bound or…?

and then there are proper editors for properties such as brushes and masks;

And the editor has support for the ideas of using Resources and Data-Binding. Taking some examples. Let’s say that I want to do a bit of quick Element binding. I drag out a Slider and a Rectangle;

now if I want to set the width of the Rectangle so that it binds to ( say ) the value of the Slider I can go to the properties window where a visual cue gives a hint as to whether the property value is coming from ( resource/binding/local value/inherited/etc );

and I can change this to be data-bound as in;

and I’m done. What if I have some class that I want to bind to? Let’s add a class;

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.ComponentModel;

namespace SilverlightApplication48
{
  public class RectangleData : INotifyPropertyChanged
  {
    public event PropertyChangedEventHandler PropertyChanged;

    public RectangleData()
    {
      Width = 96;
      Height = 96;
    }

    public double Width
    {
      get
      {
        return (width);
      }
      set
      {
        width = value;
        FirePropertyChanged("Width");
      }
    }
    public double Height
    {
      get
      {
        return (height);
      }
      set
      {
        height = value;
        FirePropertyChanged("Height");
      }
    }
    void FirePropertyChanged(string property)
    {
      if (PropertyChanged != null)
      {
        PropertyChanged(this, new PropertyChangedEventArgs(property));
      }
    }
    double width;
    double height;
  }
}

Ok, so that’s simple enough – let’s go and add one of those as a resource into my XAML;

and then see if I can pick that up as the DataContext for my Grid;

neat – so can I pick up Width/Height for my Rectangle if I go and select that? Well, firstly, I can see that the Rectangle picks up its DataContext by inheritance;

and then I can go to its Height and something pretty clever happened in that this dialog launched with the right stuff pretty much set in it;

Nice, nice, nice – it knows about the inherited DataContext, it knows that it is a RectangleData and it knows what one of those looks like. Like it 🙂

Naturally, I can then do the same thing for Width and my job’s done. I can also specify Converters in this dialog and Options like;

Similarly, in terms of resources – if I have something like my Rectangle and I set its fill to some colour;

then I can go and extract that out into a resource;

which gives me a dialog that lets me choose which resource dictionary we’re targetting;

and then if I draw out another Rectangle and want to use the same resource I can just drop to its Fill property;

and graphically select that thing;

Nice dialogs – will save me a bunch of typing and a bunch of errors around mistakenly typed property names and keep me out of Blend for some things.

Another thing you should notice is that controls have a design-time experience for Visual Studio. So, for instance if you drag a TabControl out onto the design surface then it has sensible additions like “Add Tab”;

and you can easily edit the headers and so controls are doing more work to offer up a design time experience rather than expecting you to just type XAML.

There’s also support for the Data-Sources window so you can drop out to that window and add a new data-source;

and then choose where the data’s coming from;

( I’m not sure what Database does here as it’s not-so-easy to get Silverlight connected to a database directly but it might have a meaning that I’ve not “understood” just yet ). I went for object source then selected a little Customer type;

and that gives me a new source;

where I can alter whether I want a Grid/Details view on the drop-down;

and choose the controls that I want to generate on the other drop-downs for field;

and then drag-drop to my design surface to create UI pretty quickly;

where the Grid version is using DataGrid and the Details version is using a bunch of standard controls in a Grid – the data sources stuff is smarter than this in that it can figure out related properties and help with master-detail kind of scenarios as well.

The other thing that you’re going to notice for Silverlight is new templates when it comes to starting new projects and adding items to projects. For instance, my “New Project” dialog currently includes;

so there’s 3 new templates there including a starting point for a RIA Services Application ( “Silverlight Business Application” ) and one for a RIA Services library along with a new project type for in-browser unit testing with Silverlight.

The add new items dialog also has more items to it for Silverlight applications;

I’m sure there’s a lot more to the tooling support but that’s as far as I’ve gone so far – a big leap forward from what was in VS 2008 Sp1 for Silverlight.

My only plea – could I have XAML snippet support please? 🙂