In a world of Model View View Model, dependency injection and MEF you might not use this feature too frequently but Blend’s always had a feature for creating an instance of a real type for you and dropping it into your XAML.
Over on the data tab there are the 2 key (albeit tiny) buttons;
Now, the blue button on the left is to do with creating sample data. The red button on the right (which has a little connector going into the icon) is about creating a data source and I talked about in the previous post as a way of creating a data store but you can also use it to create a real data object.
Taking that menu option;
drops me into a dialog box;
based on me having a Person class in my project;
public class Address { public string House { get; set; } public string Street {get; set; } public string PostCode {get; set;} } public class Person { public Person() { } public Address Address { get; set; } public string FirstName {get; set;} public string LastName {get; set;} public string Age {get;set;} }
and then Blend will throw in an instance of that into my XAML ( I think always at the root of the XAML file );
<UserControl.Resources> <local:Person x:Key="PersonDataSource" d:IsDataSource="True"/> </UserControl.Resources>
and the d:IsDataSource controls whether Blend displays it in the data tab. Then that instance shows up in my Data tab;
and I can drag/drop elements from it onto the design surface. If I drag something like House onto the design surface then, by default, Blend will offer to drop me a TextBlock and will do something like this with my XAML;
<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource PersonDataSource}}"> <TextBlock Text="{Binding Address.House}" /> </Grid>
and so it sets up the DataContext ( on the root container as far as I know ) to point to the particular data source and it sets up a Binding on the TextBlock.
Because the DataContext is set up, the other part of the Data tab springs into life and shows me the DataContext for the selected element (naturally, this might change as I move that selection around my UI containers);
If I already had a control on the design surface and dropped onto that control;
then Blend would offer to bind to a sensible property there.
This is all great in that these bindings will kick into gear but there’s a couple of problems with it;
- The object that I’ve dragged onto the design surface here is getting created and if it did something “heavy” as part of creation like called across the network or something then that’d be a problem for me here in the design surface.
- The object that I’ve dragged onto the design surface may well not provide suitable data for me to see what I’m doing at design-time.
For instance, in the UI below I’ve made a little Grid to display the Address data and I’ve dragged the Address to it to make it into a DataContext. I’ve also dragged out House, Street and PostCode and made TextBlocks for them but I’m left staring at this seemingly empty screen;
so that’s not-so-pretty and one way around it is to use a different, design-time data context and the Data tab in Blend can also help with that but I’ll push that into a later post…