Xaml design time data: Radical.Design setup

We have introduced concepts behind the design time experience in the Xaml designer. We have also promised that Radical provides a new approach to design time data: Radical.Design.
How to

Create a new WPF project in VS 2010 (at the time of this writing VS 2012 RC is not fully supported due to a known bug in the RC);
Create a new ViewModel such as the following:
```
class PersonViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged = ( s, e ) => { };

    private void OnPropertyChanged( string propertyName )
    {
        var h = this.PropertyChanged;
        h( this, new PropertyChangedEventArgs( propertyName ) );
    }

    String _firstName;

    public String FirstName
    {
        get { return _firstName; }
        set
        {
            _firstName = value;
            this.OnPropertyChanged( "FirstName" );
        }
    }

    String _lastName;

    public String LastName
    {
        get { return _lastName; }
        set
        {
            _lastName = value;
            this.OnPropertyChanged( "LastName" );
        }
    }
}
```
In order to keep things simple we are not using any framework to do the ViewModel stuff, but this is not a requirement, you can use whatever you want.
Add a reference to Radical.Design via Nuget;
Open the MainWindow.xaml and add the following attributes in the root xml tag:
```
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
mc:Ignorable="d"
```
Those three lines, automatically added by Microsoft Expression Blend, add the support for 3 really interesting properties: d:DesignHeight, d:DesignWidth and d:DataContext; those properties are valid, and evaluated only at design time, and the ignorable attribute tells to the Xaml parser to ignore the “d” xml namespace at runtime;
Blend for example utilizes the DesignHeight and DesignWidth properties to set the size of a UserControl at design time so that is can be easily designed;

Leverage the power of d:DataContext
let’s move on, the designer is ready to host design time data (remember that if you use Blend the step #4 is done by the designer for you), next steps:

create a new folder in your project called “Design”, the name is up to you and the folder is just to keep things organized is not a requirement;
Add a DesignTimePersonViewModel class to the newly created Design folder, now your solution explorer should look like the following screenshot:

Change the DesignTimePersonViewModel class in the following manner:

class DesignTimePersonViewModel : DesignTimeHost<PersonViewModel>
{

}

Build your project (this is not required in Visual Studio 2012)
go back to the MainWindow.xaml designer and add the following xml namespace definition:
```
xmlns:design="clr-namespace:DesignTimeSampleProject.Design"
```
Change it accordingly to the namespace of your project;
Change to root grid definition in the following manner:
```
<Grid>
    <d:DesignProperties.DataContext>
        <design:DesignTimePersonViewModel />
    </d:DesignProperties.DataContext>
</Grid>
```
we are telling to the designer that the design time data context of the grid is an instance of our class;

What can we do now?
if we drop a TextBox on the window design surface and try to use the “Apply DataBinding” menu item in the Text property designer we can see the following:

The source data context is what we expect to be, the DesignTimePersonViewModel, but there is no properties exposed by that ViewModel.
Expose data

go back to the DesignTimePersonViewModel and add a public default constructor with the following code:
```
public DesignTimePersonViewModel()
{
    this.Expose( vm => vm.FirstName )
        .WithStaticValue( "Mauro" );
}
```
rebuild your project (once again won’t be required with VS 2012) and go back to the designer…

Wow! we now have a property to choose from and the amazing thing is that as soon as we choose it the designer immediately reflects the change on the design time surface:

As we can see in the designer the value of the TextBox is the value we statically typed in the constructor of our design time class.
Everything is setup, in the next post we’ll see the full power of this approach, stay tuned!
.m