WPF & Silverlight Designer

Debugging Data Bindings in a WPF or Silverlight Application

karl140.6 — Thu, 01 Jul 2010 03:41:21 GMT

The WPF and Silverlight platforms use late bound data binding resolution for bindings in XAML files. This feature allows a DataContext to be set at run-time and the objects within that DataContext to resolve their property bindings then. This late binding enables cool features like DataTemplates, composable applications and run-time loading of loose XAML.

A side effect of late bound binding resolution that can cause developers some minor frustration is that their controls do not display the expected data at run-time.

This article will explain troubleshooting techniques that can help you locate and correct the problem.

Data Binding Overview

Data binding is fundamental to WPF and Silverlight. You will struggle with your application designs, coding and troubleshooting until you understand data binding in these platforms.

The best data binding resource available is the MSDN Data Binding Overview topic. If you have not read or don't fully understand the material in this topic, please take the required amount of time to learn this material.

Ounce of Prevention is Worth a Pound of Cure

Visual Studio 2010 has great tooling to wire up data bindings and checked them at design-time. Please read this article: How to Enable Using the Binding Builder in WPF and Silverlight Applications.

Visual Studio 2010 has excellent design-time sample data support. If you use design-time sample data, you'll immediately see controls that don't have expected data values at design-time.

For a detailed examination of sample data in the WPF and Silverlight Designer for Visual Studio 2010, please read this article: Sample Data in the WPF and Silverlight Designer.

Troubleshooting List

Verify that DataContext is set in either XAML or code
Run the application and view the output in the Debug Output Window
- For WPF applications you can increase or decrease the amount of information displayed in the Debug Output Window by changing the WPF Trace Settings, Data Binding value
Name the control that has DataContext assigned, set a break point in the code, and view the named control's DataContext property in the debugger
If binding to a CLR object, put a breakpoint in the source property getter to see that its actually being queried
Add a converter to a binding, then put a breakpoint in the converter

Verify that DataContext is set in either XAML or Code

This tip is along the lines of, "if the TV won't turn on, check that it's plugged in."

This is important for many reasons, but one is easily overlooked; if a DataContext is null, the Debug Output Window will not display any error messages in Silverlight or in WPF.

In WPF you can use the below PresentationTraceSources on a binding and set the TraceLevel to High to view errors related to a null DataContext.

View the Debug Output Window

If you have the DataContext set, any data bindings within that DataContext that can't be resolved will be listed in the Debug Output Window at run-time.

Sample Debug Output Window Data Binding Error

Sample One

System.Windows.Data Error: 40 : BindingExpression path error: 'FirstName' property not found on 'object' ''Object' (HashCode=62178992)'. BindingExpression:Path=FirstName; DataItem='Object' (HashCode=62178992); target element is 'TextBox' (Name=''); target property is 'Text' (type 'String')

Sample Two

System.Windows.Data Error: 40 : BindingExpression path error: 'FirstName' property not found on 'object' ''Customer' (HashCode=13640894)'. BindingExpression:Path=FirstName; DataItem='Customer' (HashCode=13640894); target element is 'TextBox' (Name=''); target property is 'Tag' (type 'Object')

While the above messages look verbose and complex, you can glean several interesting points of information that will help you correct this data binding:

The Binding Path is FirstName. Search your XAML file for FirstName and see if you expect the DataContext to expose a FirstName property whose scope will allow this binding to resolve this property.
The Source object in Sample One is of Type Object. There is a good chance the Type Object does not have a FirstName property.
The Source object in Sample Two is of Type Customer. Check your Customer Type; does it have a FirstName property?
Notice in Sample Two, the target property is Tag. In all likelihood, the Text property was the desired target property and not Tag. Also the Type of Tag is Object; you would probably be expecting String when binding to the FirstName property.

Review

Verify the property name is spelled correctly
Verify the property name has the correct character casing. FirstName is not the same as firstName.
Verify the property is a member of the DataContext Type
Verify the target element is the correct Type
Verify the target property name and Type are correct

Important

Data binding property path names are Case Sensitive.

WPF Trace Settings, Data Binding

Important

The default value of the WPF Trace Settings, Data Binding is "Error." It is recommended that you change this setting to "Warning." Please read this short blog post for more information.

This is required if you use the attached property PresentationTraceSources.TraceLevel. If the value is set to "Error" you won't see any of the PresentationTraceSources.TraceLevel warning messages.

To change the WPF Trace Settings, Data Binding value to "Warning," navigate to Tools, Options, Debugging, Output Window, WPF Trace Settings, Data Binding and set the value to Warning as I've done in the below image.

Note

This setting affects all bindings in WPF the application. For a more targeting approach, see the PresentationTraceSources.TraceLevel section below.

Important

If this setting is set to, "Off" you will not see any WPF Data Binding Errors in the Debug Output Window.

PresentationTraceSources.TraceLevel

Introduced to WPF in .NET 3.5 SP1, the PresentationTraceSources.TraceLevel attached property allows developers to dial up the amount of information outputted in the Debugger Output Window for a binding.

The below XAML snippet shows how to apply the PresentationTraceSources.TraceLevel attached property to a binding.

<Window 
    xmlns:diag="clr-namespace:System.Diagnostics;assembly=WindowsBase"
    xmlns:local="clr-namespace:DebugDataBindings"
    x:Class="DebugDataBindings.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Grid x:Name="layoutRoot">
        <Grid.Resources>
            <local:DebugConverter x:Key="debugConverter" /> 
        </Grid.Resources>
        <TextBox 
            Text="{Binding Path=Customer.FirstName, diag:PresentationTraceSources.TraceLevel=High}"   
            Height="23" HorizontalAlignment="Left" Margin="90,18,0,0" VerticalAlignment="Top" Width="120"/>
    </Grid>
</Window>

Use the Debugger Quick Watch to View the DataContext

If the above suggestions to do not solve your problem:

Locate the control's parent panel like a Grid in your XAML
Apply a x:Name to the control
Set a break point in your code, and view the named panel control's DataContext property in the debugger

Open the QuickWatch dialog, change the Expression to the named control in the XAML and look at the control's DataContext property.

In the below image, I have changed the Expression to, "this.layoutRoot.DataContext" in VB.NET you would change it to, , "Me.layoutRoot.DataContext"

This information will at least confirm the shape (Type) of the DataContext and the values inside the DataContext.

This tip provides value in two ways:

If the DataContext had been set then subsequently changed by some other code, you'll be expecting the initial value but will see another value
If the property was nested within another class, you can easily see the shape of your DataContext and then ensure that your bindings are properly dotted in.
- Notice the path to the FirstName property is DataContext.Customer.FirstName.
- This means that if you wanted to data bind to the Text property on a TextBox that was a child of the Grid named layoutRoot, the binding expression must read:
  
  <TextBox Text="{Binding Path=Customer.FirstName}" ... />

Place a Breakpoint inside the Source Property Getter

If you are binding to a CLR object, put a breakpoint in the source property getter to see that it's actually being queried.

If it's not be queried, you have a mismatch in the property name, property is not properly dotted in, DataContext is null or does not contain this property.

Add a Converter to a binding, then put a Breakpoint in the Converter

Important

The use of a converter to troubleshoot a data binding only works if the DataContext is not null, and the DataContext Type exposes a property with the same name in the binding expression.

A ValueConverter allows you to view the data as its being moved between the target and source. In the below image the converter in the middle is named "ColorBrushConverter."

The below converter is a no-op converter named, "DebugConverter." This reusable converter will allow you to place a breakpoint in the Convert and ConvertBack methods and then view the value of the "value" parameter at debug time.

using System;
using System.Windows.Data;

namespace DebugDataBindings {
    public class DebugConverter : IValueConverter {

        public Object Convert(Object value, Type targetType, Object parameter, System.Globalization.CultureInfo culture) {

            //set a breakpoint here
            return value;
        }

        public Object ConvertBack(Object value, Type targetType, Object parameter, System.Globalization.CultureInfo culture) {

            //set a breakpoint here
            return value;
        }
    }
}

The below XAML show the above converter being applied to the TextBox.Text property binding.

<Grid x:Name="layoutRoot">
        <Grid.Resources>
            <local:DebugConverter x:Key="debugConverter" /> 
        </Grid.Resources>
        <TextBox Text="{Binding Path=Customer.FirstName, Converter={StaticResource debugConverter}}"   
            Height="23" HorizontalAlignment="Left" Margin="90,18,0,0" VerticalAlignment="Top" Width="120"/>
    </Grid>

Comments

Microsoft values your opinion about our products and documentation. In addition to your general feedback it is very helpful to understand:

How the above features enable your workflow
What is missing from the above features that would be helpful to you

Thank you for your feedback and have a great day,

Karl Shifflett
Expression Team

Tips and Tricks for working with the WPF and Silverlight Designer in Visual Studio 2010

karl140.6 — Thu, 01 Jul 2010 01:32:00 GMT

This article is a collection of tips and tricks that we have gathered over the time we've spent building and using the Visual Studio 2010 WPF and Silverlight Designer, which you might not find elsewhere. We think they make working in the designer more fun and productive experience – we hope you'll agree!

Tip 1: Install Silverlight 4 Tools even if you are building WPF apps
Tip 2: The Properties Window works when just editing XAML too.
Tip 3: Getting the Properties Window to work when working with Resource Dictionaries and App.xaml
Tip 4: Use Sample Data for a happier design experience in your templates
Tip 5: Quick way to add the d: namespace for Sample Data
Tip 5: Pressing Alt key while move/resize hides the snaplines:
Tip 6: Pressing the Spacebar lets you Pan the Design Surface with the Mouse
Tip 8: Easy ways to select hard-to-select things on the design surface
Tip 9: Use Bring to Front / Send to Back to set tab order within a panel
Tip 10: Use the new multi-monitor support to open my XAML and Design panes in separate windows
For more Tips & Tricks…
Comments

Tip 1: Install Silverlight 4 Tools even if you are building WPF apps

The Silverlight 4 Tools for Visual Studio 2010 contain many features and several bug fixes that are useful for WPF developers too (see this blog post for details of the features) – you should install it even if you are not working on Silverlight applications.

Tip 2: The Properties Window works when just editing XAML too.

The Properties Window has a lot of useful features such as the Binding and Resource Pickers, Go To Definition, and various useful editors like the Brush Editor. Lots of people assume the only time you can use these features is when you're working on the Design pane – but that's not true! Open up the Properties Window next time you are in XAML view for your Page or Window, and you'll see that the XAML element your cursor is in is shown in the Properties Window, so you can use those features there too. You can see this tip illustrated in this video.

Note that if you have set your Tools-Options to open in XAML-only mode, or are working with a view that is XAML-only by default such as App.XAML or a Resource Dictionary, you'll need to use Tip 3 below to activate the properties window before you can use it.

Tip 3: Getting the Properties Window to work when working with Resource Dictionaries and App.xaml

Closely linked to Tip 2 – for reasons of performance, by design the WPF and Silverlight Designer does not load the Properties Window (or the design view) for app.xaml and resource dictionary XAML files. In addition, users may have set their Tools-Options settings to open XAML in XAML only view (i.e. with no designer visible).

However if you want to make use of the useful Properties Window features (such as the Go To Definition feature for instance) when in such a file, all you need to do is activate the design pane (use the splitter bar controls to activate split view, then click anywhere on the grey "Intentionally Left Blank" design pane screen). Then you can shift the splitter so that only a tiny part of the designer is visible to avoid wasting screen real-estate.

The designer will remember this setting on a per-file basis, so next time you open that file, it will activate the designer too. You can see this tip illustrated in this video.

Tip 4: Use Sample Data for a happier design experience in your templates

You may have had the frustrating experience of attempting to edit an item template with no data in it – it is nearly impossible to work out how your design will actually look based on the design-time experience, especially when your design sizes to the content it is bound to. Fortunately it is now possible to add sample data to your application. We show you how in this video, and you should also check out Sample Data in the Visual Studio 2010 WPF and Silverlight Designer for more details. This not only makes this sort of design easier, it can also help you avoid typos in your data binding statements by enabling the use of the Binding Builder.

Tip 5: Quick way to add the d: namespace for Sample Data

When working with Sample Data, you will need the d: namespace in your XAML. Entering the exact namespace and other required document heading definitions such as mc:ignorable for this is a pain – but you don't have to!

If you need to add these definitions to a Page, Window or UserControl in the designer:

Select the root-most item (see Tip 8 below for selection tips)
Click the root size mode button twice

Clicking the root size mode button twice, will insert the necessary XAML header information but leave your design's root width/height behavior unaltered. For detailed information about the root size mode button please see this blog post.

Tip 5: Pressing Alt key while move/resize hides the snaplines:

For a complex form, move/resize of an element on the designer surface might result in a lot of snaplines being shown. If you don't want to see them, you can easily turn them OFF by pressing and holding the ALT key during drag move/resize.

Tip 6: Pressing the Spacebar lets you Pan the Design Surface with the Mouse

When you have a large design or are zoomed in, it can be very helpful to be able to pan with the mouse to get to the area you want to view. When you're over the Design Surface, just press the Spacebar and move your mouse to get panning.

Tip 8: Easy ways to select hard-to-select things on the design surface

Most of the time you can just click on an object to select it. Upon selection you'll notice that the element is also selected in the XAML Editor, Properties Window and Document Outline.

However there are tricky scenarios where this isn't always possible to click on an object to select it. In those cases, these tips will come in handy:

Use Tab Key To Go To The Next Control On Design Surface

When a control on the design surface is selected, pressing the Tab key will change selection to the next control in the tabbing order. Pressing SHIFT+TAB will select the previous control in the tabbing order.

Pressing ESC Key or right click and use the Selection menu to Select Parent Control

With a control selected on the design surface, pressing the ESC key will cause selection to be changed it its parent control. Continued pressing will continue to change selection to the next parent control. There's also a right-click menu action that lets you quickly select parent items of the selected item.

Use the Document Outline or the Path Control to view the XAML tree structure and select objects

The Document Outline window has a very useful view of the XAML tree and can be used to select any point in the tree. The Path Control at the bottom of the XAML editor also allows selection of parent controls (and children via the button at its right-hand end).

Tip 9: Use Bring to Front / Send to Back to set tab order within a panel

Because WPF and Silverlight use the Document Order (the order in which elements appear in the XAML) to set both Z Order AND Tab Order in a document by default, you can use the right click context menu to move items in a form forward and backward in the Tab Order as well as changing their Z-order. This is significantly easier than individually setting the Tab Order of items one by one.

Tip 10: Use the new multi-monitor support to open my XAML and Design panes in separate windows

Visual Studio 2010 has great multi-monitor support with tear-off windows etc. We would like to add real support for tearing off the two parts of the split view of the WPF and Silverlight Designer in a future release – meanwhile there are a couple of workarounds:

If your goal is multi-monitor with code on the right and design surface on the left (for instance), then you can maximize VS2010 across both screens, set the splitter to be VERTICAL (there are buttons in the splitter bar that let you do this), then place the splitter at the join between the two screens (quickest approach)

If you want more flexibility, you can:

Open a second tab group (right click on a tab and open new Vertical Tab Group)
Open the XAML as normal in one of the tab groups
Open the XAML again using "Open With"…"Source Code Editor"
Put the XAML and the designer in different tab groups, maximize the designer in the first, and now you've got full, tearable-window, multi-monitor friendly goodness for your XAML and designer views

For more Tips & Tricks…

You might also want to check out the video from our session at TechEd USA 2010, which shows many of the tips and tricks in this list in action.

Comments

We hope you find these tips useful. We plan to update this post when we discover new tips and tricks that we think are useful. You can send us your own tips, your feedback on this article, or discuss any other WPF & Silverlight Designer topic, over on the WPF and Silverlight Designer Forums!

Microsoft values your opinion about our products and documentation. In addition to your general feedback it is very helpful to understand:

How the above features enable your workflow
What is missing from the above features that would be helpful to you

Thank you for your feedback and have a great day,

Mark Wilson-Thomas
Expression Team

Sample Data in the WPF and Silverlight Designer

karl140.6 — Wed, 30 Jun 2010 22:58:00 GMT

Objective

Requirements

Retail release of Visual Studio 2010 and the latest Silverlight 4 tools for Visual Studio 2010.

Background
Faux Types and Real Types
Images in Sample Data Files
Adding New Sample Data File
Consuming Sample Data File
WPF Sample Data Scenarios
Silverlight Sample Data Scenarios
WCF RIA Services Sample Data Scenario
Choosing Sample Data Loading Technique
Comments

Background

Cider and Blend 4

Developers using a visual Designer use sample data to light up their UI at design-time; to cause the Designer to render like it will at run-time. This time saving feature is especially important when designing DataTemplates or adjusting the layout of a DataGrid since the developer will not have to actually run the application to see what it will render like with data.

Sample data in Cider and Blend is easy to understand and wire up.

Sample data files are XAML files. Each sample data file contains one or more instances of user type's instantiated in XAML. The XAML sample data file and resulting instances of data are connected to the UI using the d:DesignData MarkupExtension. d:DesignData can be applied to a data source declared in XAML like a CollectionViewSource, DomainDataSource or can be assigned to a d:DataContext property.

Each sample data file has an associated Build Action that determines if d:DesignData will create actual instances of the types in the sample data file or if faux types will be created. Faux types are necessary when the types in the sample data file are not creatable or if read-only properties need to be populated with sample data values.

Blend 4

Blend has tooling to create and modify XAML sample data for a class. Blend also provides a sample data drag and drop experience to wire up the d:DataContext and appropriate properties.

Blend provides an additional feature that enables creating XML sample data on the fly without a predefined class. The XML sample data can then be easily be configured and modified. This XML sample data only works in Blend.

To learn more about Blend please see the Expression Blend Blog, Unni's Blog, Kirupa's Blog or Christian Schormann's Blog.

Faux Types and Real Types

The term faux type is used in this document to indicate that a cloned type will be created instead of your actual type. Benefits of faux types include the ability to create an otherwise non-creatable type in sample data, the ability to set read-only properties in sample data and the by-passing of code in the real type's constructor.

When using real types in sample data, be aware that any code in the type's constructor will be executed at design-time. For an entity object this would not normally be an issue, but if the real type is a ViewModel, the code in that ViewModel's constructor will be executed. If that constructor's code loads data from a database for example, problems could occur in the Designer when the sample data is loaded. User code running at design-time is responsible for over 20% of all Designer load failures. You can read up on running code in a constructor in this blog post.

Images in Sample Data Files

WPF Sample Data Files Only

If the image is part of the project, it can be referenced using the below relative folder syntax.

<m:Customer FirstName="Alfons" LastName="Parovszky" Photo="../Images/image01.png">

WPF and Silverlight Sample Data Files

All images in Silverlight sample data files require the pack syntax. WPF projects must use this syntax if the image is located in another assembly:

<m:Customer FirstName="Alfons" LastName="Parovszky" 
            Photo="/SLSampleDataScenarios;component/Images/image01.png">

If the image is not part of any project, you can use the below file:/// URI syntax to use an image in a sample data file.

<m:Customer FirstName="Alfons" LastName="Parovszky" 
            Photo="file:///c:/Images/markbou.jpg">

Adding New Sample Data File

The following applies to both WPF and Silverlight applications.

Add a new ResourceDictionary or Text File to the project.
- If ResourceDictionary delete the default file content.
- If Text File, change file extension to .xaml
Using the file properties, set build action to either:
- DesignData – will create faux types
- DesignDataWithDesignTimeCreatableTypes – will create actual types
Using the file properties, set Copy to Output Directory to: Do not copy
Using the file properties, set Custom Tool: <blank>
Using XAML Editor add your sample data content to the file.

Sample Data File Properties

Single Instance Sample Data Example

<m:Customer 
    xmlns:m="clr-namespace:SampleDataScenarios.Model" 
    FirstName="Alfons" LastName="Parovszky" 
    Photo="../Images/image01.png">
</m:Customer>

Multiple Instance Sample Data Example

<m:Customers xmlns:m="clr-namespace:SampleDataScenarios.Model">
    <m:Customer FirstName="Alfons" LastName="Parovszky" Photo="../Images/image01.png">
        <m:Customer.Addresses>
            <m:Address LineOne="125 North St" City="Greatville" State="CA" Zip="98004" />
            <m:Address LineOne="3000 1st St NE" City="Coolville" State="CA" Zip="98004" />
        </m:Customer.Addresses>
    </m:Customer>
    <m:Customer FirstName="Lori" LastName="Penor" Photo="../Images/image02.png">
        <m:Customer.Addresses>
            <m:Address LineOne="126 East St" City="Greatville" State="CA" Zip="98004" />
            <m:Address LineOne="3001 2st St NE" City="Coolville" State="CA" Zip="98004" />
        </m:Customer.Addresses>
    </m:Customer>
    <m:Customer FirstName="Justin" LastName="Harrison" Photo="../Images/image03.png">
        <m:Customer.Addresses>
            <m:Address LineOne="127 West St" City="Greatville" State="CA" Zip="98004" />
            <m:Address LineOne="3002 3st St NE" City="Coolville" State="CA" Zip="98004" />
        </m:Customer.Addresses>
    </m:Customer>
</m:Customers>

WPF Supported Sample Data File Scenarios

For sample data files where the root object is a single instance, simply add the type to the sample data file as done in Single Instance Sample Data Example above.

For collections, the root object can be an ArrayList or a custom type that derives from a collection or generic collection as done in Multiple Instance Sample Data Example above. Notice that WPF can also use the same technique as outlined below in Silverlight Scenarios. The Multiple Instance Sample Data Example uses the below DesignSampleDataCollection class as the root instead of an ArrayList.

Silverlight Supported Sample Data File Scenarios

For sample data files where the root object is a single instance, simply add the type to the sample data file as done in Single Instance Sample Data Example above.

For collections, the root object must be a type that derives from a collection or generic collection.

Non-WCF RIA Services Scenario

If the project does not have a collection object for the desired root type and the type does not derive from the RIA Services Entity object, you need to create a generic reusable collection like the below DesignSampleDataCollection.

namespace SampleDataScenarios.Model {
  public class DesignTimeSampleDataCollection : List<Object> {

    public DesignTimeSampleDataCollection() { }
  }
}

VB.NET

Public Class DesignTimeSampleDataCollection
  Inherits List(Of Object)

  Public Sub New()

  End Sub

End Class

WCF RIA Services Scenario

If the project does not have a collection object for the desired root type and the type derives from the RIA Services Entity object, you need to create a generic reusable collection like the below DesignRIAEntitySampleDataCollection.

namespace ContosoSales.SampleData {
    public class DesignRIAEntitySampleDataCollection : 
          List<System.ServiceModel.DomainServices.Client.Entity> {

        public DesignRIAEntitySampleDataCollection() { }
    }
}

Consuming Sample Data File

The d:DesignData Markup Extension assumes the role of a sample data file loader and parser that provides instantiated or faux types to the consumer.

Sample Data Consumers

The following design-time properties can consume the sample data provided by d:DesignData:

d:DataContext can be set on any FrameworkElement
d:DesignSource can be set on a CollectionViewSource
d:DesignData can be set on a DomainDataContext (RIA Services data object)

WPF Sample Data Scenarios

Open either solution: CS-SampleDataScenarios or VB-SampleDataScenarios.

Rebuild solution.

The WPF samples are in the SampleDataScenarios project.

Demo-01 Single Customer

Open Demo01SingleCustomer.xaml.

This is an example of a single instance sample data file consumed by a form. The single instance of Customer has 2 instances of Address.

<m:Customer 
    xmlns:m="clr-namespace:SampleDataScenarios.Model" 
    FirstName="Alfons" LastName="Parovszky" 
    Photo="../Images/image01.png">
    <m:Customer.Addresses>
        <m:Address LineOne="125 North St" City="Greatville" State="CA" Zip="98004" />
        <m:Address LineOne="3000 1st St NE" City="Coolville" State="CA" Zip="98004" />
    </m:Customer.Addresses>
</m:Customer>

In the below form, the Customer type is available in the root Grid's DataContext. This is important because the presence of d:DesignData and sample data not only feeds the DataContext to render data, but also enables the Designer tooling for creating and editing bindings using the Binding Builder.

Connecting Sample Data

In the below XAML the CustomerSampleData.xaml file is loaded and parsed by the d:DesignData Markup Extension and assigned to the d:DataContext for the Grid. Child controls of the Grid can data bind to properties on the DataContext and the Designer Binding Builder tooling is enabled.

<Grid d:DataContext="{d:DesignData Source=/SampleData/CustomerSampleData.xaml}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <TextBlock Text="Demo-01 Single Customer" Grid.ColumnSpan="2" FontWeight="Bold" FontSize="14" Margin="11" />

    <Grid Grid.Row="1" Margin="6">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <TextBlock Text="First Name:" VerticalAlignment="Center" Width="75" />
        <TextBox Text="{Binding Path=FirstName}" VerticalAlignment="Center" Grid.Column="1"/>

        <TextBlock Text="Last Name:" VerticalAlignment="Center" Width="75" Grid.Row="1" />
        <TextBox Text="{Binding Path=LastName}" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" />

        <TextBlock Text="Ranking:" VerticalAlignment="Center" Width="75" Grid.Row="2" />
        <TextBlock Text="{Binding Path=Ranking}" VerticalAlignment="Center"  Grid.Row="2" Grid.Column="1" />

        <TextBlock Margin="7" Text="Addresses" FontWeight="Bold" Grid.Row="3" Grid.ColumnSpan="2" />

        <ListBox ItemsSource="{Binding Path=Addresses}" Grid.Row="4" Grid.ColumnSpan="2">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="75" />
                            <ColumnDefinition Width="30" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Path=LineOne}" />
                        <TextBlock Text="{Binding Path=City}" Grid.Column="1" />
                        <TextBlock Text="{Binding Path=State}" Grid.Column="2" />
                        <TextBlock Text="{Binding Path=Zip}" Grid.Column="3" />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

    </Grid>

    <Image VerticalAlignment="Top" Source="{Binding Path=Photo}" Grid.Row="1" Grid.Column="1" Margin="6" />
</Grid>

Demo-02 Single Not Creatable Customer

Open Demo02SingleNotCreatableCustomer.xaml and NotCreatableCustomer.cs.

This is an example of a single instance sample data file where the entity object is not creatable. The NotCreatableCustomer class has a private constructor. The single instance of NotCreatableCustomer has 2 instances of Address.

Non-creatable types are common scenario in .NET, making this feature a very important addition to the Designer tooling. For example, RIA Services Entity types or types that are created by factories cannot be instantiated. Without this feature sample data would not work and the Designer tooling would be unable to provide DataContext and property name lists for a type.

Important

Sample data files that contain non-creatable types must have their Build Action set to: DesignData and not DesignDataWithDesignTimeCreatableTypes.

<m:Customer 
    xmlns:m="clr-namespace:SampleDataScenarios.Model" 
    FirstName="Alfons" LastName="Parovszky" 
    Photo="../Images/image01.png" Ranking="101">
    <m:Customer.Addresses>
        <m:Address LineOne="125 North St" City="Greatville" State="CA" Zip="98004" />
        <m:Address LineOne="3000 1st St NE" City="Coolville" State="CA" Zip="98004" />
    </m:Customer.Addresses>
</m:Customer>

In the below form, the NotCreatableCustomer type is available in the root Grid's DataContext. Again, even though the NotCreatableCustomer type has a private constructor the sample data displays and the Binding Builder works normally.

Connecting Sample Data

In the below XAML the NotCreatableCustomerSampleData.xaml file is loaded and parsed by the d:DesignData Markup Extension and assigned to the d:DataContext for the Grid. Child controls of the Grid can data bind to properties on the DataContext and the Designer Binding Builder tooling is enabled.

<Grid d:DataContext="{d:DesignData Source=/SampleData/NotCreatableCustomerSampleData.xaml}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
        
    <TextBlock Text="Demo-02 Single Not Creatable Customer" Grid.ColumnSpan="2" FontWeight="Bold" FontSize="14" Margin="11" />
        
    <Grid Grid.Row="1" Margin="6">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <TextBlock Text="First Name:" VerticalAlignment="Center" Width="75" />
        <TextBox Text="{Binding Path=FirstName}" VerticalAlignment="Center" Grid.Column="1"/>

        <TextBlock Text="Last Name:" VerticalAlignment="Center" Width="75" Grid.Row="1" />
        <TextBox Text="{Binding Path=LastName}" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" />

        <TextBlock Text="Ranking:" VerticalAlignment="Center" Width="75" Grid.Row="2" />
        <TextBlock Text="{Binding Path=Ranking}" VerticalAlignment="Center"  Grid.Row="2" Grid.Column="1" />

        <TextBlock Margin="7" Text="Addresses" FontWeight="Bold" Grid.Row="3" Grid.ColumnSpan="2" />

        <ListBox ItemsSource="{Binding Path=Addresses}" Grid.Row="4" Grid.ColumnSpan="2">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="75" />
                            <ColumnDefinition Width="30" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Path=LineOne}" />
                        <TextBlock Text="{Binding Path=City}" Grid.Column="1" />
                        <TextBlock Text="{Binding Path=State}" Grid.Column="2" />
                        <TextBlock Text="{Binding Path=Zip}" Grid.Column="3" />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

    </Grid>
        
    <Image VerticalAlignment="Top" Source="{Binding Path=Photo}" Grid.Row="1" Grid.Column="1" Margin="3" />
</Grid>

Demo-03 Customer ViewModel

Open Demo03CustomerViewModel.xaml.

This is an example of using a design-time ViewModel as the d:DataContext. DesignTimeCustomerViewModel derives from CustomerViewModel. In its constructor it populates the ViewModel properties and collection. Since the DesignTimeCustomerViewModel's properties are populated, they are rendered on the design surface.

The below code demonstrates creating sample data instead of using the typical sample data XAML file.

namespace SampleDataScenarios.ViewModel {
  public class DesignTimeCustomerViewModel : CustomerViewModel {

    public DesignTimeCustomerViewModel()
      : base() {

      base.Customer = new Customer() {
        FirstName = "Alfons", LastName = "Parovszky", Photo = "../Images/image01.png"
      };
      base.Customer.CalculateRank();
      base.Customer.Addresses.Add(
          new Address() { LineOne = "125 North St", City = "Greatville", State = "CA", Zip = "98004" });
      base.Customer.Addresses.Add(
          new Address() { LineOne = "3000 1st St NE", City = "Coolville", State = "CA", Zip = "98004" });
    }
  }
}

VB.NET

Public Class DesignTimeCustomerViewModel
  Inherits CustomerViewModel

  Public Sub New()
    MyBase.New()

    MyBase.Customer = New Customer With {.FirstName = "Alfons", .LastName = "Parovszky", .Photo = "../Images/image01.png"}
    MyBase.Customer.CalculateRank()
    MyBase.Customer.Addresses.Add(New Address With {.LineOne = "125 North St", .City = "Greatville", .State = "CA", .Zip = "98004"})
    MyBase.Customer.Addresses.Add(New Address With {.LineOne = "3000 1st St NE", .City = "Coolville", .State = "CA", .Zip = "98004"})

  End Sub

End Class

Connecting Sample Data

The below XAML demonstrates using d:DesignInstance with IsDesignTimeCreatable set to true to have Visual Studio instantiate DesignTimeCustomerViewModel and assign the instance as the d:DataContext. Since the instantiated instance has properties populated with data, that data will render exactly like other XAML file sample data in the Designer. This works because the DesignTimeCustomerViewModel is creatable at design-time and the below DesignInstance has IsDesignTimeCreatable set to true. Child controls of the Grid can data bind to properties on the DataContext and the Designer Binding Builder tooling is enabled.

<Grid d:DataContext="{d:DesignInstance vm:DesignTimeCustomerViewModel, IsDesignTimeCreatable=True}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <TextBlock Text="{Binding Path=FormTitle}" Grid.ColumnSpan="2" FontWeight="Bold" FontSize="14" Margin="11" />

    <Grid Grid.Row="1" Margin="6" DataContext="{Binding Path=Customer}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <TextBlock Text="First Name:" VerticalAlignment="Center" Width="75" />
        <TextBox Text="{Binding Path=FirstName}" VerticalAlignment="Center" Grid.Column="1"/>

        <TextBlock Text="Last Name:" VerticalAlignment="Center" Width="75" Grid.Row="1" />
        <TextBox Text="{Binding Path=LastName}" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" />

        <TextBlock Text="Ranking:" VerticalAlignment="Center" Width="75" Grid.Row="2" />
        <TextBlock Text="{Binding Path=Ranking}" VerticalAlignment="Center"  Grid.Row="2" Grid.Column="1" />

        <TextBlock Margin="7" Text="Addresses" FontWeight="Bold" Grid.Row="3" Grid.ColumnSpan="2" />

        <ListBox ItemsSource="{Binding Path=Addresses}" Grid.Row="4" Grid.ColumnSpan="2">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="75" />
                            <ColumnDefinition Width="30" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Path=LineOne}" />
                        <TextBlock Text="{Binding Path=City}" Grid.Column="1" />
                        <TextBlock Text="{Binding Path=State}" Grid.Column="2" />
                        <TextBlock Text="{Binding Path=Zip}" Grid.Column="3" />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

    </Grid>

    <Image VerticalAlignment="Top" Source="{Binding Path=Customer.Photo}" Grid.Row="1" Grid.Column="1" Margin="6" />
</Grid>

Demo-04 Northwind Master Details Details

Open Demo04NorthwindMasterDetailsDetails.xaml.

This is an example of using chained CollectionViewSources where the top level CollectionViewSource is the DataContext for a form. It is assumed that the CollectionViewSources will be populated at run-time from a code-behind method.

This example uses an EntityFramework model for the entity types.

The below sample data file has 2 instances of Customer each with 1 instance of Order and each Order has three instances of Order_Detail.

<sysCol:ArrayList xmlns:sysCol="clr-namespace:System.Collections;assembly=mscorlib"
                  xmlns:nw="clr-namespace:SampleDataScenarios.NorthwindModel">
    <nw:Customer Contact_Name="Jim Hance" Company_Name="Adatum" Contact_Title="Software Developer" Customer_ID="1">
        <nw:Customer.Orders>
            <nw:Order Order_Date="12/12/2009" Ship_Name="Jim Hance" Customer_ID="1" Order_ID="1"
                      Ship_Address="125 North St" Employee_ID="74">
                <nw:Order.Order_Details>
                    <nw:Order_Detail Product_ID="125" Discount="50" Order_ID="1" Quantity="5" 
                                     Unit_Price="75.99" />
                    <nw:Order_Detail Product_ID="742" Order_ID="1" Quantity="9" Unit_Price="5.99" />
                    <nw:Order_Detail Product_ID="2555" Order_ID="1" Quantity="50" Unit_Price="6.25" />
                </nw:Order.Order_Details>
            </nw:Order>
        </nw:Customer.Orders>
    </nw:Customer>
    <nw:Customer Contact_Name="Michael Patten" Company_Name="Contoso" Contact_Title="Sales Manager" Customer_ID="2">
        <nw:Customer.Orders>
            <nw:Order Order_Date="12/12/2009" Ship_Name="Michael Patten" Customer_ID="2" Order_ID="71"
                      Ship_Address="125 North St" Employee_ID="55">
                <nw:Order.Order_Details>
                    <nw:Order_Detail Product_ID="547" Discount="50" Order_ID="71" Quantity="5" 
                                     Unit_Price="75.99" />
                    <nw:Order_Detail Product_ID="62" Order_ID="71" Quantity="9" Unit_Price="5.99" />
                    <nw:Order_Detail Product_ID="11" Order_ID="71" Quantity="50" Unit_Price="6.25" />
                </nw:Order.Order_Details>
            </nw:Order>
        </nw:Customer.Orders>
    </nw:Customer>
</sysCol:ArrayList>

Connecting Sample Data

In the below XAML the NorthwindSampleData.xaml file is loaded and parsed by the d:DesignData Markup Extension and assigned to the d:DesignSource for the top level customersViewSource CollectionViewSource. The two remaining CollectionViewSources chain to collection properties on the customersViewSource.

Child controls of the Grid can data bind to properties on the DataContext and the Designer Binding Builder tooling is enabled. Notice the two DataGrid ItemsSource's are the two chained CollectionViewSources. The two DataGrid's also have their sample data populated and the Designer Binding Builder tooling is enabled.

<UserControl.Resources>
  <CollectionViewSource 
    x:Key="customersViewSource" 
    d:DesignSource="{d:DesignData Source=../SampleData/NorthwindSampleData.xaml}" />
  <CollectionViewSource 
    x:Key="customersOrdersViewSource" 
    Source="{Binding Path=Orders, Source={StaticResource customersViewSource}}" />
  <CollectionViewSource 
    x:Key="customersOrdersOrder_DetailsViewSource" 
    Source="{Binding Path=Order_Details, Source={StaticResource customersOrdersViewSource}}" />
</UserControl.Resources>
<Grid DataContext="{StaticResource customersViewSource}">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="200" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>

  <TextBlock Text="Demo-04 Northwind Master Details Details" Grid.ColumnSpan="2" FontWeight="Bold" FontSize="14" Margin="11" />

  <ListView 
    SelectedIndex="0" ItemsSource="{Binding}" Name="customersListView" SelectionMode="Single" 
    Margin="3.5,4" Grid.RowSpan="2" Grid.Row="1">
    <ListView.ItemContainerStyle>
      <Style>
        <Setter Property="Control.HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="Control.VerticalContentAlignment" Value="Stretch" />
      </Style>
    </ListView.ItemContainerStyle>
    <ListView.View>
      <GridView>
        <GridViewColumn x:Name="company_NameColumn" Header="Company Name" Width="90">
          <GridViewColumn.CellTemplate>
            <DataTemplate>
              <TextBox 
                Margin="-6,-1" 
                Text="{Binding Path=Company_Name, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" />
            </DataTemplate>
          </GridViewColumn.CellTemplate>
        </GridViewColumn>
        <GridViewColumn x:Name="contact_NameColumn" Header="Contact Name" Width="90">
          <GridViewColumn.CellTemplate>
            <DataTemplate>
              <TextBox 
                Margin="-6,-1" 
                Text="{Binding Path=Contact_Name, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}" />
            </DataTemplate>
          </GridViewColumn.CellTemplate>
        </GridViewColumn>
      </GridView>
    </ListView.View>
  </ListView>

  <Grid Grid.Column="1" Margin="3.5" Grid.Row="1">
    <DataGrid 
      AutoGenerateColumns="False" EnableRowVirtualization="True" 
      ItemsSource="{Binding Source={StaticResource customersOrdersViewSource}}" 
      Name="ordersDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" Margin="3.5">
      <DataGrid.Columns>
        <DataGridTextColumn 
          x:Name="order_IDColumn" Binding="{Binding Path=Order_ID}" Header="Order ID" Width="SizeToHeader" />
        <DataGridTextColumn 
          x:Name="customer_IDColumn" Binding="{Binding Path=Customer_ID}" 
          Header="Customer ID" Width="SizeToHeader" />
        <DataGridTextColumn 
          x:Name="employee_IDColumn" Binding="{Binding Path=Employee_ID}" 
          Header="Employee ID" Width="SizeToHeader" />
        <DataGridTextColumn 
          x:Name="ship_NameColumn" Binding="{Binding Path=Ship_Name}" 
          Header="Ship Name" Width="SizeToHeader" />
        <DataGridTextColumn 
          x:Name="ship_AddressColumn" Binding="{Binding Path=Ship_Address}" 
          Header="Ship Address" Width="SizeToHeader" />
        <DataGridTextColumn 
          x:Name="ship_CityColumn" Binding="{Binding Path=Ship_City}" 
          Header="Ship City" Width="SizeToHeader" />
        <DataGridTextColumn 
          x:Name="ship_RegionColumn" Binding="{Binding Path=Ship_Region}" 
          Header="Ship Region" Width="SizeToHeader" />
        <DataGridTextColumn 
          x:Name="ship_Postal_CodeColumn" Binding="{Binding Path=Ship_Postal_Code}" 
          Header="Ship Postal Code" Width="SizeToHeader" />
        <DataGridTextColumn 
          x:Name="ship_CountryColumn" Binding="{Binding Path=Ship_Country}" 
          Header="Ship Country" Width="SizeToHeader" />
        <DataGridTextColumn 
          x:Name="ship_ViaColumn" Binding="{Binding Path=Ship_Via}" 
          Header="Ship Via" Width="SizeToHeader" />
        <DataGridTemplateColumn 
          x:Name="order_DateColumn" Header="Order Date" Width="SizeToHeader">
          <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
              <DatePicker 
                SelectedDate="{Binding Path=Order_Date, Mode=TwoWay, 
                                ValidatesOnExceptions=true, NotifyOnValidationError=true}" />
            </DataTemplate>
          </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTemplateColumn x:Name="required_DateColumn" Header="Required Date" Width="SizeToHeader">
          <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
              <DatePicker 
                SelectedDate="{Binding Path=Required_Date, Mode=TwoWay, 
                                ValidatesOnExceptions=true, NotifyOnValidationError=true}" />
            </DataTemplate>
          </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTemplateColumn x:Name="shipped_DateColumn" Header="Shipped Date" Width="SizeToHeader">
          <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
              <DatePicker 
                SelectedDate="{Binding Path=Shipped_Date, Mode=TwoWay, 
                                ValidatesOnExceptions=true, NotifyOnValidationError=true}" />
            </DataTemplate>
          </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTextColumn 
          x:Name="freightColumn" Binding="{Binding Path=Freight}" 
          Header="Freight" Width="SizeToHeader" />
      </DataGrid.Columns>
    </DataGrid>
  </Grid>
  <DataGrid 
    AutoGenerateColumns="False" EnableRowVirtualization="True" Grid.Column="1" Grid.Row="2" 
    ItemsSource="{Binding Source={StaticResource customersOrdersOrder_DetailsViewSource}}" 
    Name="order_DetailsDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" Margin="3.5">
    <DataGrid.Columns>
      <DataGridTextColumn 
        x:Name="order_IDColumn1" Binding="{Binding Path=Order_ID}" 
        Header="Order ID" Width="SizeToHeader" />
      <DataGridTextColumn 
        x:Name="product_IDColumn" Binding="{Binding Path=Product_ID}" 
        Header="Product ID" Width="SizeToHeader" />
      <DataGridTextColumn 
        x:Name="unit_PriceColumn" Binding="{Binding Path=Unit_Price}" 
        Header="Unit Price" Width="SizeToHeader" />
      <DataGridTextColumn 
        x:Name="quantityColumn" Binding="{Binding Path=Quantity}" 
        Header="Quantity" Width="SizeToHeader" />
      <DataGridTextColumn 
        x:Name="discountColumn" Binding="{Binding Path=Discount}" 
        Header="Discount" Width="SizeToHeader" />
    </DataGrid.Columns>
  </DataGrid>
</Grid>

Demo-05 Select Customer From List

Open Demo05SelectCustomerFromList.xaml.

This is an example of a multiple instance sample data file consumed by a form. The sample data consists of 3 Customers, each with 2 Addresses.

<m:Customers xmlns:m="clr-namespace:SampleDataScenarios.Model">
    <m:Customer FirstName="Alfons" LastName="Parovszky" Photo="../Images/image01.png">
        <m:Customer.Addresses>
            <m:Address LineOne="125 North St" City="Greatville" State="CA" Zip="98004" />
            <m:Address LineOne="3000 1st St NE" City="Coolville" State="CA" Zip="98004" />
        </m:Customer.Addresses>
    </m:Customer>
    <m:Customer FirstName="Lori" LastName="Penor" Photo="../Images/image02.png">
        <m:Customer.Addresses>
            <m:Address LineOne="126 East St" City="Greatville" State="CA" Zip="98004" />
            <m:Address LineOne="3001 2st St NE" City="Coolville" State="CA" Zip="98004" />
        </m:Customer.Addresses>
    </m:Customer>
    <m:Customer FirstName="Justin" LastName="Harrison" Photo="../Images/image03.png">
        <m:Customer.Addresses>
            <m:Address LineOne="127 West St" City="Greatville" State="CA" Zip="98004" />
            <m:Address LineOne="3002 3st St NE" City="Coolville" State="CA" Zip="98004" />
        </m:Customer.Addresses>
    </m:Customer>
</m:Customers>

In the below form, the collection of Customers is available in the root Grid's DataContext. This is important because the presence of d:DesignData and sample data not only feeds the DataContext to render data, but also enables the Designer tooling for creating and editing bindings in the Binding Builder.

The data entry form to the right of the ListBox, has its DataContext set to the ListBox.SelectedItem. When ListBox selection changes the form data automatically changes.

Connecting Sample Data

In the below XAML the CustomersSampleData.xaml file is loaded and parsed by the d:DesignData Markup Extension and assigned to the d:DataContext for the Grid. Child controls of the Grid can data bind to properties on the DataContext and the Designer Binding Builder tooling is enabled.

<Grid d:DataContext="{d:DesignData Source=/SampleData/CustomersSampleData.xaml}">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="126" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>

  <TextBlock Text="Demo-05 Select Customer From List" Grid.ColumnSpan="3" 
                  FontWeight="Bold" FontSize="14" Margin="11" />

  <ListBox SelectedIndex="0" x:Name="lbCustomers" Grid.Row="1" Margin="6" ItemsSource="{Binding}">
    <ListBox.ItemTemplate>
      <DataTemplate>
        <StackPanel Orientation="Horizontal">
          <TextBlock Text="{Binding Path=FirstName}" Margin="0,0,4,0" />
          <TextBlock Text="{Binding Path=LastName}" />
        </StackPanel>
      </DataTemplate>
    </ListBox.ItemTemplate>
  </ListBox>

  <Grid Grid.Row="1" Margin="6" Grid.Column="1" DataContext="{Binding ElementName=lbCustomers, Path=SelectedItem}">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <TextBlock Text="First Name:" VerticalAlignment="Center" Width="75" />
    <TextBox Text="{Binding Path=FirstName}" VerticalAlignment="Center" Grid.Column="1"/>

    <TextBlock Text="Last Name:" VerticalAlignment="Center" Width="75" Grid.Row="1" />
    <TextBox Text="{Binding Path=LastName}" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" />

    <TextBlock Text="Ranking:" VerticalAlignment="Center" Width="75" Grid.Row="2" />
    <TextBlock Text="{Binding Path=Ranking}" VerticalAlignment="Center"  Grid.Row="2" Grid.Column="1" />

    <TextBlock Margin="7" Text="Addresses" FontWeight="Bold" Grid.Row="3" Grid.ColumnSpan="2" />

    <ListBox ItemsSource="{Binding Path=Addresses}" Grid.Row="4" Grid.ColumnSpan="2">
      <ListBox.ItemTemplate>
        <DataTemplate>
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="100" />
              <ColumnDefinition Width="75" />
              <ColumnDefinition Width="30" />
              <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBlock Text="{Binding Path=LineOne}" />
            <TextBlock Text="{Binding Path=City}" Grid.Column="1" />
            <TextBlock Text="{Binding Path=State}" Grid.Column="2" />
            <TextBlock Text="{Binding Path=Zip}" Grid.Column="3" />
          </Grid>
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>

  </Grid>

  <Image VerticalAlignment="Top" Source="{Binding Path=Photo}" Grid.Row="1" Grid.Column="2" Margin="6" />
</Grid>

Demo-06 Typed DataTemplate

Open Demo06TypedDataTemplate.xaml.

The example demonstrates the requirements for displaying sample data when that data is rendered using a typed DataTemplate in a Resource. The key point here is that the DataTemplate is typed and in a Resource.

<m:Customer 
    xmlns:m="clr-namespace:SampleDataScenarios.Model" 
    FirstName="Alfons" LastName="Parovszky" 
    Photo="../Images/image01.png">
    <m:Customer.Addresses>
        <m:Address LineOne="125 North St" City="Greatville" State="CA" Zip="98004" />
        <m:Address LineOne="3000 1st St NE" City="Coolville" State="CA" Zip="98004" />
    </m:Customer.Addresses>
</m:Customer>

Typed DataTemplates are looked up based on DataType. If WPF cannot match the DataTemplate.DataType property with the sample data type, the DataTemplate will not be used to render the sample data. Additionally, any mismatch will also affect using the Designer Binding Builder as it won't be able to resolve properties in the DataContext. The results of a mismatch are pictured in the right column of the two below tables.

When the sample data file Build Action is DesignDataWithDesignTimeCreatableTypes, the DataTemplate must have the d:IsDesignTimeCreatable property set to True or not set at all.

Correct Setting on Data Template When
Build Action = DesignDataWithDesignTimeCreatableTypes

Incorrect Setting on the DataTemplate When
Build Action = DesignDataWithDesignTimeCreatableTypes

Notice that ListBox is not using the typed DataTemplate to render the Address items.

<DataTemplate DataType="{x:Type m:Address}"

d:IsDesignTimeCreatable="True" >

---or---

<DataTemplate DataType="{x:Type m:Address}"

d:IsDesignTimeCreatable="False" >

When the sample data file Build Action is DesignData, the DataTemplate must have the d:IsDesignTimeCreatable property set to False.

Correct Setting on the DataTemplate
Build Action = DesignData

Incorrect Setting on the DataTemplate
Build Action = DesignData

Notice that ListBox is not using the typed DataTemplate to render the Address items.

<DataTemplate DataType="{x:Type m:Address}"

d:IsDesignTimeCreatable="False" >

<DataTemplate DataType="{x:Type m:Address}"

d:IsDesignTimeCreatable="True" >

---or---

Connecting Sample Data

<UserControl.Resources>
  <!--Because the sample data is using the DesignDataWithDesignTimeCreatableTypes build action, the 
      DataTemplate must have the property d:IsDesignTimeCreatable="True" or not at all so that the  
      types will match and be resolved correctly by the designer.-->
  <DataTemplate DataType="{x:Type m:Address}" d:IsDesignTimeCreatable="True" >
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="75" />
        <ColumnDefinition Width="30" />
        <ColumnDefinition Width="Auto" />
      </Grid.ColumnDefinitions>
      <TextBlock Text="{Binding Path=LineOne}" />
      <TextBlock Text="{Binding Path=City}" Grid.Column="1" />
      <TextBlock Text="{Binding Path=State}" Grid.Column="2" />
      <TextBlock Text="{Binding Path=Zip}" Grid.Column="3" />
    </Grid>
  </DataTemplate>

</UserControl.Resources>
<Grid d:DataContext="{d:DesignData Source=/SampleData/CustomerSampleData.xaml}">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>

  <TextBlock Text="Demo-06 Typed DataTemplate" Grid.ColumnSpan="2" FontWeight="Bold" FontSize="14" Margin="11" />

  <Grid Grid.Row="1" Margin="6">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <TextBlock Text="First Name:" VerticalAlignment="Center" Width="75" />
    <TextBox Text="{Binding Path=FirstName}" VerticalAlignment="Center" Grid.Column="1"/>

    <TextBlock Text="Last Name:" VerticalAlignment="Center" Width="75" Grid.Row="1" />
    <TextBox Text="{Binding Path=LastName}" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" />

    <TextBlock Text="Ranking:" VerticalAlignment="Center" Width="75" Grid.Row="2" />
    <TextBlock Text="{Binding Path=Ranking}" VerticalAlignment="Center"  Grid.Row="2" Grid.Column="1" />

    <TextBlock Margin="7" Text="Addresses" FontWeight="Bold" Grid.Row="3" Grid.ColumnSpan="2" />

    <ListBox ItemsSource="{Binding Path=Addresses}" Grid.Row="4" Grid.ColumnSpan="2" />

  </Grid>

  <Image VerticalAlignment="Top" Source="{Binding Path=Photo}" Grid.Row="1" Grid.Column="1" Margin="6" />
</Grid>

Silverlight Sample Data Scenarios

The above WPF scenarios are also valid for Silverlight and won't be repeated here. The biggest difference between the two platforms with respect to sample data is the required pack syntax for images in sample data files.

Open either solution: CS-SampleDataScenarios or VB-SampleDataScenarios.

Rebuild solution.

The WPF samples are in the SLSampleDataScenarios project.

Demo-01 Single Customer

Open Demo01SingleCustomer.xaml.

This is an example of a single instance sample data file consumed by a form. The single instance of Customer has 2 instances of Address. Notice the assembly name; component syntax is used to identify an image in the project that has its Build Action set to Resource.

<m:Customer 
    xmlns:m="clr-namespace:SLSampleDataScenarios.Model" 
    FirstName="Alfons" LastName="Parovszky" 
    Photo="/SLSampleDataScenarios;component/Images/image01.png">
    <m:Customer.Addresses>
        <m:Address LineOne="125 North St" City="Greatville" State="CA" Zip="98004" />
        <m:Address LineOne="3000 1st St NE" City="Coolville" State="CA" Zip="98004" />
    </m:Customer.Addresses>
</m:Customer>

Connecting Sample Data

<Grid d:DataContext="{d:DesignData Source=../SampleData/CustomerSampleData.xaml}">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>

  <TextBlock Text="Demo-01 Single Customer" Grid.ColumnSpan="2" FontWeight="Bold" FontSize="14" Margin="11" />

  <Grid Grid.Row="1" Margin="6">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <TextBlock Text="First Name:" VerticalAlignment="Center" Width="75" />
    <TextBox Text="{Binding Path=FirstName}" VerticalAlignment="Center" Grid.Column="1"/>

    <TextBlock Text="Last Name:" VerticalAlignment="Center" Width="75" Grid.Row="1" />
    <TextBox Text="{Binding Path=LastName}" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" />

    <TextBlock Text="Ranking:" VerticalAlignment="Center" Width="75" Grid.Row="2" />
    <TextBlock Text="{Binding Path=Ranking}" VerticalAlignment="Center"  Grid.Row="2" Grid.Column="1" />

    <TextBlock Margin="7" Text="Addresses" FontWeight="Bold" Grid.Row="3" Grid.ColumnSpan="2" />

    <ListBox ItemsSource="{Binding Path=Addresses}" Grid.Row="4" Grid.ColumnSpan="2">
      <ListBox.ItemTemplate>
        <DataTemplate>
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="100" />
              <ColumnDefinition Width="75" />
              <ColumnDefinition Width="30" />
              <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBlock Text="{Binding Path=LineOne}" />
            <TextBlock Text="{Binding Path=City}" Grid.Column="1" />
            <TextBlock Text="{Binding Path=State}" Grid.Column="2" />
            <TextBlock Text="{Binding Path=Zip}" Grid.Column="3" />
          </Grid>
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>

  </Grid>

  <Image VerticalAlignment="Top" Source="{Binding Path=Photo}" Grid.Row="1" Grid.Column="1" Margin="6" />
</Grid>

Demo-02 Customers DataSources Window

Open Demo02CustomersDataSourcesWindow.xaml.

This is an example of using a CollectionViewSource that has sample data as the DataContext for a form. It is assumed that the CollectionViewSource will be populated at run-time from a code-behind method.

The below sample data file has 3 instances of Customer, each with 2 instances of Address. Notice the root collection.

<m:Customers xmlns:m="clr-namespace:SLSampleDataScenarios.Model">
<m:Customer FirstName="Alfons" LastName="Parovszky" 
            Photo="/SLSampleDataScenarios;component/Images/image01.png">
        <m:Customer.Addresses>
            <m:Address LineOne="125 North St" City="Greatville" State="CA" Zip="98004" />
            <m:Address LineOne="3000 1st St NE" City="Coolville" State="CA" Zip="98004" />
        </m:Customer.Addresses>
    </m:Customer>
    <m:Customer FirstName="Lori" LastName="Penor" 
                Photo="/SLSampleDataScenarios;component/Images/image02.png">
        <m:Customer.Addresses>
            <m:Address LineOne="126 East St" City="Greatville" State="CA" Zip="98004" />
            <m:Address LineOne="3001 2st St NE" City="Coolville" State="CA" Zip="98004" />
        </m:Customer.Addresses>
    </m:Customer>
    <m:Customer FirstName="Justin" LastName="Harrison" 
                Photo="/SLSampleDataScenarios;component/Images/image03.png">
        <m:Customer.Addresses>
            <m:Address LineOne="127 West St" City="Greatville" State="CA" Zip="98004" />
            <m:Address LineOne="3002 3st St NE" City="Coolville" State="CA" Zip="98004" />
        </m:Customer.Addresses>
    </m:Customer>
</m:Customers>

In the below form, the ComboBox is used to set the CurrentItem for the CollectionViewSource. The Grid that contains the Customer data entry form has its DataContext set to the CollectionViewSource. When the ComboBox selection changes the CollectionViewSource CurrentItem, the data entry form CurrentItem will automatically change. This is one technique for providing record selection.

Connecting Sample Data

In the below XAML, the CustomersSampleData.xaml file is loaded and parsed by the d:DesignData Markup Extension and assigned to the d:DesignSource for the CollectionViewSource.

<UserControl.Resources>
  <CollectionViewSource 
    x:Key="customerViewSource" 
    d:DesignSource="{d:DesignData Source=../SampleData/CustomersSampleData.xaml}" />
</UserControl.Resources>
<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>

  <TextBlock 
    Text="Demo-02 Customers Data Sources Window" FontWeight="Bold" 
    FontSize="14" Margin="11" />

  <StackPanel 
    Margin="6" Orientation="Horizontal" Grid.Row="1" 
    DataContext="{StaticResource customerViewSource}">
    <TextBlock VerticalAlignment="Center" Text="Select Customer:" Margin="7,0"  />
    <ComboBox Width="200" VerticalAlignment="Center" ItemsSource="{Binding}">
      <ComboBox.ItemTemplate>
        <DataTemplate>
          <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Path=FirstName}" Margin="0,0,7,0" />
            <TextBlock Text="{Binding Path=LastName}" />
          </StackPanel>
        </DataTemplate>
      </ComboBox.ItemTemplate>
    </ComboBox>
  </StackPanel>

  <Grid Grid.Row="2" Margin="6" DataContext="{StaticResource customerViewSource}">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <TextBlock Text="First Name:" VerticalAlignment="Center" Width="75" />
    <TextBox Text="{Binding Path=FirstName}" VerticalAlignment="Center" Grid.Column="1"/>

    <TextBlock Text="Last Name:" VerticalAlignment="Center" Width="75" Grid.Row="1" />
    <TextBox Text="{Binding Path=LastName}" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" />

    <TextBlock Text="Ranking:" VerticalAlignment="Center" Width="75" Grid.Row="2" />
    <TextBlock Text="{Binding Path=Ranking}" VerticalAlignment="Center"  Grid.Row="2" Grid.Column="1" />

    <TextBlock Margin="7" Text="Addresses" FontWeight="Bold" Grid.Row="3" Grid.ColumnSpan="2" />

    <ListBox ItemsSource="{Binding Path=Addresses}" Grid.Row="4" Grid.ColumnSpan="2">
      <ListBox.ItemTemplate>
        <DataTemplate>
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="100" />
              <ColumnDefinition Width="75" />
              <ColumnDefinition Width="30" />
              <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBlock Text="{Binding Path=LineOne}" />
            <TextBlock Text="{Binding Path=City}" Grid.Column="1" />
            <TextBlock Text="{Binding Path=State}" Grid.Column="2" />
            <TextBlock Text="{Binding Path=Zip}" Grid.Column="3" />
          </Grid>
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>

    <Image VerticalAlignment="Top" Source="{Binding Path=Photo}" Grid.RowSpan="5" Grid.Column="2" Margin="6" />
  </Grid>
    
</Grid>

WCF RIA Services Sample Data Scenario

The below scenario will concentrate on surfacing design-time sample data in the Designer.

Open solution: ContosoSales.Mix10.

Rebuild solution.

Open \Views\Home.xaml.

This is an example form from the PDC 2010 RIA Services Demo. This demo has been upgraded to display design-time sample data.

The sample data file contains 2 Store records that each contains 2 Contacts.

Important

In WCF RIA Services, types deriving from Entity are not creatable. As a result, all sample data files must have their Build Action set to: DesignData and not DesignDataWithDesignTimeCreatableTypes.

Note

Blend does not support the DomainDataSource d:DesignData property. As a result, sample data applied to the DomainDataSource will not render in Blend on the art board (design surface).

<ria:DesignRIAEntitySampleDataCollection 
    xmlns:web="clr-namespace:ContosoSales.Web"
    xmlns:ria="clr-namespace:ContosoSales.SampleData">

  <web:Store City="Bellevue" StateProvince="CA" StoreID="1" StoreName="A. Datum Corporation"
            StoreImage="/ContosoSales;component/SampleDataImages/StoreFront.png" >
    <web:Store.StoreContacts>
      <web:StoreContact ContactID="55" Position="Artist" StoreID="1">
        <web:StoreContact.Contact>
          <web:Contact ContactPhoto="/ContosoSales;component/SampleDataImages/jeffhand.jpg" 
                       ContactID="55" FirstName="Alfons" LastName="Parovszky" SalesTarget="900" 
                       WorkEmail="alfons@adatum.com" WorkPhone="411" />
        </web:StoreContact.Contact>
      </web:StoreContact>
      <web:StoreContact ContactID="655" Position="Artist" Store="A. Datum Corporation" StoreID="1">
        <web:StoreContact.Contact>
          <web:Contact ContactPhoto="/ContosoSales;component/SampleDataImages/dineshku.jpg" 
                       ContactID="655" FirstName="Lori" LastName="Penor" SalesTarget="900" 
                       WorkEmail="lori@adatum.com" WorkPhone="411" />
        </web:StoreContact.Contact>
      </web:StoreContact>
    </web:Store.StoreContacts>
  </web:Store>
  <web:Store City="Bellevue" StateProvince="CA" StoreID="12" StoreName="Adventure Works"
               StoreImage="/ContosoSales;component/SampleDataImages/StoreFront.png" >
    <web:Store.StoreContacts>
      <web:StoreContact ContactID="15" Position="Sales" StoreID="2" Store="Adventure Works">
        <web:StoreContact.Contact>
          <web:Contact ContactPhoto="/ContosoSales;component/SampleDataImages/jeffhand.jpg" 
                       ContactID="15" FirstName="Justin" LastName="Harrison" SalesTarget="000" 
                       WorkEmail="justin@adventure-works.com" WorkPhone="411" />
        </web:StoreContact.Contact>
      </web:StoreContact>
      <web:StoreContact ContactID="655" Position="Artist" Store="Adventure Works" StoreID="1">
        <web:StoreContact.Contact>
          <web:Contact ContactPhoto="/ContosoSales;component/SampleDataImages/dineshku.jpg"
                       ContactID="655" FirstName="Mark" LastName="Harrington" SalesTarget="900" 
                       WorkEmail="mark@adventure-works.com" WorkPhone="411" />
        </web:StoreContact.Contact>
      </web:StoreContact>
    </web:Store.StoreContacts>
  </web:Store>
</ria:DesignRIAEntitySampleDataCollection>

Another important distinction is that the root collection must derive from List<Entity>. This is a requirement of RIA Services. Developers must create a class similar to the below class to act as a container for RIA Services sample data objects. Note, this collection does not actually care which type of entity is in the collection so long as the object derives from Entity.

namespace ContosoSales.SampleData {
    public class DesignRIAEntitySampleDataCollection : 
          List<System.ServiceModel.DomainServices.Client.Entity> {

        public DesignRIAEntitySampleDataCollection() { }
    }
}

This Store class comes from the code that Visual Studio generates in the Silverlight client application. This is contained in the hidden Generated_Code folder.

public sealed partial class Store : Entity

Connecting Sample Data

Sample data in a RIA Services application is applied to the d:DesignData property of the DomainDataSource.

<riaControls:DomainDataSource 
    SubmittedChanges="storeDomainDataSource_SubmittedChanges"  Name="storeDomainDataSource" AutoLoad="True"
    LoadedData="storeDomainDataSource_LoadedData" 
    d:DesignData="{d:DesignData Source=../SampleData/RIASampleData.xaml}"
    QueryName="GetStoresQuery" FilterOperator="Or">
    <riaControls:DomainDataSource.DomainContext>
        <my:ContactContext />
    </riaControls:DomainDataSource.DomainContext>
    ...
</riaControls:DomainDataSource>

The Home.xaml file listing is long, nested and complex so I won't display the XAML here.

The way the Home UserControl works at design-time is very similar to the previous WPF or Silverlight examples. The major difference is that the DomainDataSource is the control that receives the sample data. From here, other CollectionViewSources can "dot" into the data exposed by the Data property to populate their CollectionView and ultimately the bound UI objects.

Have a look at the below storeStoreContactsViewSource CollectionViewSource. Its Source is set to the Data.StoreContacts. In this case, Data is actually pointing to the selected Store from the left hand ListBox in the UI. The below Grid contains the data entry form on the right hand side of the form. When the ListBox selection changes the DataContext of the data entry form changes to the SelectedItem in the ListBox.

<CollectionViewSource 
    x:Key="storeStoreContactsViewSource" 
    Source="{Binding Path=Data.StoreContacts, ElementName=storeDomainDataSource}" />

<ListBox 
    ItemsSource="{Binding Source={StaticResource storeStoreContactsViewSource}}" 
    Name="storeContactsListBox" Style="{StaticResource ContactListBox}" />

<Grid BindingValidationError="Home_BindingValidationError" 
    DataContext="{Binding Source={StaticResource storeStoreContactsViewSource}}" Name="grid1">

This UI synchronization was accomplished without a single line of code.

Choosing Sample Data Loading Technique

From the document you can see there are a number of ways to structure your applications and thus load sample data. One of the goals for the Design-Time Sample Data Feature for Visual Studio 2010 was to not limit or box developers in from using a technique that made business sense for the type of application they are writing. For example, many developers like the power of CollectionViewSources while other developers prefer to have their XAML files DataContext set to a ViewModel. This feature combined with the above techniques easily handles these and most other scenarios.

Using d:DesignData with a corresponding XAML Sample Data file is the recommended technique for surfacing sample data in WPF and Silverlight line of business applications. This technique surfaces design-time instances of your data classes and enables the Designer Binding Builder tooling. None of the sample data files or design-time XAML is compiled into your applications, making this technique simple and clean.

Choosing to surface sample data using d:DesignData leaves open endless possibilities for your application architecture and in-fact decouples sample data from the rest of your application.

However, as a developer you are not limited to just d:DesignData as the WPF Demo-03 Customer ViewModel demonstrated.

Comments

Microsoft values your opinion about our products and documentation. In addition to your general feedback it is very helpful to understand:

How the above features enable your workflow
What is missing from the above features that would be helpful to you

Thank you for your feedback and have a great day,

Karl Shifflett
Expression Team

Known Issue: Control Design-Time Assemblies File Locking When Using WPF and Silverlight Designer

karl140.6 — Fri, 18 Jun 2010 20:09:07 GMT

File Locking Issues when using WPF and Silverlight Designer

When creating and testing a registered assembly (e.g. an assembly registered via TCI), it is possible to run into a file locking issue that causes compilation to fail. While there are a few different manifestations of this particular issue, the root cause is the same. Visual Studio 2010 treats any assembly found in the GAC, Private Assemblies folder, or Registry as a framework assembly and thus locks these files. Once these assemblies are loaded by the designer, any attempt to copy over them will fail with the following error message:

Unable to copy file "obj\Debug\<Assembly Name>" to "..\..\<Assembly Name>". The process cannot access the file '..\..\<Assembly Name>' because it is being used by another process.

It does not matter if this copy is happening as the result of a compilation; build action, or manual copy. Once these assemblies are loaded by Visual Studio, they will be locked and attempts to overwrite these files will fail.

Recommended Rules to Avoid Locking Issue

To avoid this scenario, you should follow these rules for development and deployment testing of your registered assemblies:

If at all possible, assembly deployment testing (e.g. assembly registration) should not be done on the same machine as development of the assembly. This is the definitive way to avoid this issue. Also, if the assembly you're building is using a public key and has already been registered on your development box, you have no choice but to follow this rule. There is no other reliable way around this issue. Two popular examples of projects that use a public key are the WPF toolkit and the Silverlight toolkit. If you download and install these toolkits, you will see this locking issue (regardless of what the project output path is set to) if you attempt to also build these toolkits on the same machine.
If, however, your assembly does not use a public key, and you must do development and deployment testing on the same box, you will need to follow these rules instead:
- Make sure your project output does not write directly to a path which has been registered in any way. For example, your output path should never be to any path that's registered in AssemblyFoldersEx.
- Any Visual Studio instance which has already loaded your assembly must be closed before you can either rebuild the assembly, or copy a new version of the assembly to the registered path. For example, if you're using a different Visual Studio instance for testing, you will need to close this test instance of VS before you can rebuild or replace the assemblies that have been loaded by this instance.

Recommended Pattern for Testing Controls During Development

First, it's important to point out that TCI registration is not required to develop/test/debug design-time features. It is recommended that you separate out the functional testing of control libraries from the testing of deployment scenarios. One easy way to accomplish this is to create a test project directly in your working solution. This will allow you to take full advantage of the Toolbox Auto-pop and will make it easy to create controls from the toolbox, all without the need for TCI registration. You do need to ensure that the controls that you are building have not been placed in the GAC, Private Assemblies Folder, or in the registry (such as under the AssembyFoldersEx node).

Please contact us if you need additional help with this issue.

WPF & Silverlight Designer Team

Three New WPF and Silverlight Designer Videos Posted

karl140.6 — Wed, 16 Jun 2010 17:41:06 GMT

The WPF and Silverlight Designer Team has posted the following new widescreen videos:

Each video has a link to a corresponding article.

Videos can be viewed using the Silverlight player or downloaded to your computer in 5 formats.

Comments

Microsoft values your opinion about our products and documentation. In addition to your general feedback it is very helpful to understand:

How the above features enable your workflow
What is missing from the above features that would be helpful to you

Thank you for your feedback and have a great day,

Karl Shifflett
Expression Team

How to Enable Using the Binding Builder in WPF and Silverlight Applications

karl140.6 — Mon, 14 Jun 2010 23:25:00 GMT

When the Data Sources Window is used to generate the UI, the generated XAML injects design-time information so that the Binding Builder can be used to create bindings for the UI controls.

What if your application was written in Visual Studio 2005 or 2008; or you used the XAML Editor, the Designer or Expression Blend without the Data Sources Window and you now want to take advantage of the new Binding Builder?

What if your coding style is to assign the DataContext for your forms in code and not data bind to CollectionViewSources in your XAML?

This very short walk-though will demonstrate the simple requirements to enable you to use the new Binding Builder in a variety of scenarios like the ones mentioned above.

Requirements

This walk-through assumes you have the opened the attached solution. The attached zip file contains both a VB.NET and C# version of the solution.

Why use the Binding Builder?
What is the Problem we Trying to Solve?
Design-Time Properties
Let's Implement the Solution
Binding Builder in XAML View
Links
Comments

Why use the Binding Builder?

The Binding Builder makes it easier to set up bindings and more importantly makes it easier to create accurate bindings so that you don't need to debug so often. This alone will save you time, limit frustration and increase your productivity.

If you add to this all the other improvements in the WPF and Silverlight Designer like the image picker, the resource picker, the brush editor, etc. I believe that we have a much-improved experience for WPF and Silverlight developers in Visual Studio 2010.

What is the Problem we Trying to Solve?

Let's first run the application to get a feel for how it works at run-time. After starting the application change the selected Customer using the ComboBox at the top. Resize the application; notice how the DataGrid allows data editing.

This application was hand coded using the XAML Editor and the DataContext is set in the Loaded event of the Window. As a result, the tooling has no way to determine the DataContext at design-time; additionally, the Binding Builder will have no way to list properties in its Path section.

A picture is worth a thousand words so…

Open MainWindow.xaml in the Designer
Select the ComboBox to the right of the Select Customer TextBlock
Using the Properties Window:
- Click on the ItemsSource property Property Marker pointed to by the red arrow
- Select Apply Data Binding… from the Context Menu
- Optionally, you can also click the gray text to the right of the Property Marker to open the Binding Builder
In the below image we have two problem indicators
- First, the DataContext is null. This is indicated by the text pointed to by the top red arrow; it does not display class type name that is assigned to the DataContext or what class type name the DataContext is inheriting from.
- Second, since the DataContext is null, the Path Customers pointed to by the bottom red arrow; cannot be resolved by the Binding Builder which is indicated by the dash line under the Path property name.

Let's look at one more example.

Select the TextBox to the right of the Email Label
Using the Properties Window open the Binding Builder for the Text property
First, the DataContext is bound to Object. Object does not have properties we can use to set the binding paths.
- In this case, the TextBox is inheriting DataContext from the parent Grid control
- The parent Grid control has its DataContent bound to the SelectedItem of the ComboBox, which is why the Email TextBox has its DataContext set to Object.
Second, the Email TextBox Text property path is set to Email but like the previous example, it has a dashed underline indicating the Binding Builder was unable to resolve the Email property path.

Design-Time Properties

The problem we need to solve is how to provide "a shape" to the Binding Builder at design-time. When I say "shape" I mean an instantiated Type that the Building Builder can reflect over and then list those properties in the Path selection tab to establish the binding.

In this walk-through we will use the d:DataContext property and d:DesignInstance MarkupExtension.

The "d:" in above property and Markup Extension is the alias to the design namespace where the all the design properties are members of. Here are links to MSDN topics that cover all the "d:" properties and Markup Extensions.

The "d:" properties and Markup Extensions cannot be created in user code or extended in user code; they can only be used in XAML.

The "d:" properties and Markup Extensions are not compiled into your application; they are only used by the Visual Studio WPF and Silverlight Designer and Expression Blend tooling.

d:DataContext Property

d:DataContext, specifies a design-time data context for a control and its children. When specifying d:DataContext, you should always provide the same "shape" to the design-time DataContext as the run-time DataContext.

If both a DataContext and d:DataContext are specified for a control, the tooling will use the d:DataContext.

d:DesignInstance Markup Extension

If MarkupExtensions are new to you, please read this MSDN topic Markup Extensions and WPF XAML.

d:DesignInstance, returns the an instantiated Type ("shape") that you want to assign as the data source for binding to controls in the designer. The type does not need to be creatable to be used for establishing "shape."

d:DesignInstance MarkupExtension Properties

	Type	Name of the Type that will be created. Type is the default parameter in the constructor.
	IsDesignTimeCreatable	Defaults to False. Is the specified type creatable? When false, a faux type will be created instead of the "real" type.
	CreateList	Defaults to False. When true, will return generic list of the specified type.

Visual Studio Markup Extension IntelliSense

The XAML Editor in Visual Studio 2010 provides IntelliSense when editing Markup Extensions, making the entry of design-time properties and Markup Extensions easy.

Let's Implement the Solution

In this application's Loaded event, I assign the Data class to the Window's DataContext property. To follow this same pattern, we need to assign the Data class to a design-time DataContext or d:DataContext to either the Window or top level Grid control in the XAML file. By doing this, we are allowing the d:DataContext to be inherited down the tree of elements, just like it does when the application is at run-time.

The below red arrow indicates DataContext inheritance for the Grid control's child controls. Notice how the ComboBox ItemsSource property is bound to the Customers property on the inherited DataContext, which is the Data class.

Top ComboBox

Change MainWindow.xaml into XAML View
Locate the root Grid named "layoutRoot" add the following XAML as pictured below:

d:DataContext="{d:DesignInstance local:Data}"

Change MainWindow.xaml back to Design View
Select the ComboBox
Using the Properties Window, open the Binding Builder for the ItemsSource property:
- First, the DataContext now has a "shape," the Data class
- Second, the Customers Path property name is no longer has a dashed underline because, the Building Builder can resolve the property name on the DataContext
- Third, since Data.Customers is a collection, the individual properties of the Customer class are now listed in the Path section as part of the Current Item. These properties would be used if we were editing a DataTemplate for the ComboBox.

Middle Data Form

The below red arrow indicates d:DataContext inheritance for the child controls of the Grid; this enables property resolution for the Binding Builder tool.

Change MainWindow.xaml into XAML View
Locate the middle Grid that has its DataContext bound as pictured below and then add the following XAML as pictured below:

d:DataContext="{d:DesignInstance local:Customer}"

Change MainWindow.xaml back to Design View
Select the Email TextBox
Using the Properties Window, open the Binding Builder for the Text property:
- First, the Customer ID TextBlock now displays a 0. This is because the design-time DataContext is now a real instance of the Customer class. The CustomerID property is an Int32 that has a value of 0
- Secord, the DataContext now has a "shape," the Customer class
- Third, the Email Path property name is no longer has a dashed underline because, the Building Builder can resolve the property name on the DataContext
- Fourth, all of the properties exposed by Customer type are available for selection in the Path section of the Binding Builder

DataGrid

At run-time, the Grid's DataContext is a collection of Addresses that comes from the Addresses collection property on the selected Customer class.

Now we need to provide the same "shape" to the design-time DataContext of the Grid.

The below top red arrow indicates d:DataContext inheritance for the child controls of the Grid; the ItemsSource for the DataGrid is a collection of Addresses at both design-time and run-time.

The individual rows in the DataGrid will each be bound to an instance of the Customer class. The bottom red arrow indicates the relationship between the ItemsSource property and the individual properties that are bound to each DataGridRow.

Change MainWindow.xaml into XAML View
In the next step, we will use the d:DesignInstance Markup Extension to create a list of Address instances for the design-time DataContext
Locate the Grid control at the bottom of the file. Add the following XAML as pictured below:

d:DataContext="{d:DesignInstance local:Address, CreateList=True}"

Change MainWindow.xaml back to Design View
Select the DataGrid by clicking it like the below image on the left
Using the Properties Window, open the Columns property Collection Editor by clicking the ellipsis button as in the below image

First, select the first DataGridTextColumn
Second, click the Binding property Property Marker, select Apply Data Binding… from the Context Menu:
- Third, the DataContext "shape" is the Address class
- Fourth, Street is not underlined with dashes
- Fifth, all of the properties exposed by Address type are available for selection in the Path section of the Binding Builder

Binding Builder in XAML View

Developers working in the XAML Editor will be surprised to know that the Properties Window and its features like selection sync with the XAML Editor, Binding Builder, Resource Picker and Image Picker continue to work even if the Designer is not visible.

In order to utilize the Properties Window in the XAML Editor, the Designer must load, not necessarily be visible.

If you open a XAML View and the Properties Window does not load, momentarily switch to Design View then back to XAML View by clicking these two tabs pictured below.

Notice the Grid is selected in XAML View and is displayed in the Tag Navigator.

Links

MSDN topic Data Binding Overview (must read for all WPF and Silverlight developers)

MSDN topic Walkthrough: Using a DesignInstance to Bind to Data in the WPF Designer

MSDN topic Design-Time Attributes in the WPF Designer

MSDN topic Design-Time Attributes in the Silverlight Designer

MSDN topic Walkthrough: Using a DesignInstance to Bind to Data in the Silverlight Designer

MSDN topic Markup Extensions and WPF XAML

Comments

Microsoft values your opinion about our products and documentation. In addition to your general feedback it is very helpful to understand:

How the above features enable your workflow
What is missing from the above features that would be helpful to you

Thank you for your feedback and have a great day,

Karl Shifflett
Expression Team

Using WPF and Silverlight UserControls

karl140.6 — Mon, 14 Jun 2010 18:01:13 GMT

UserControls promote code reuse, separation of concerns and simplify development by partitioning applications into smaller blocks of code.

In this article you'll learn why you would use a UserControl, how to create one from the Toolbox, understand when design-time code executes and how to prevent blocks of code from running at design-time.

Introduction
Automatically Populate Toolbox Items
Root Object and Instances of Controls at Design-time
Running Code in a Constructor
Comments

Introduction

The below demo application will be used in this article to illustrate important UserControl concepts. When writing WPF or Silverlight applications you have the option to partition your code into manageable blocks. This separating of concerns and responsibilities makes authoring and maintaining of the application easier and provides opportunities for code reuse. Additionally, unit and integration testing is simpler when testing smaller units of code.

The below application is very simple. It could easily be written with all the code in a single XAML file with a corresponding code-behind file. As time passes, requirements change, more fields are added, more tabs get added and before long you have a huge XAML file that gets difficult to understand and edit.

However, if we treat the below Window object as a "shell" for an application; we can then easily extend the application by adding small self-contained units of code such as UserControls.

Notice how short and simple the below XAML is. This is the XAML for the above form.

<Grid>
    <TabControl>
        <TabItem Header="Customers">
            <Grid>
                <my:CustomersUserControl />
            </Grid>
        </TabItem>
        <TabItem Header="Sales" >
            <Grid />
        </TabItem>
    </TabControl>
</Grid>

In the below image, you can see the outer Window, the CustomersUserControl that is hosted in a TabItem and the CustomerEditUserControl that is nested within the CustomersUserControl.

In terms of separation of concerns and responsibilities, the Window is responsible for application navigation. This is accomplished by hosting UserControls within TabItems. The Window does not need to know anything about customers or sales, how to search and edit them, how to connect to a database or validate data entry.

The CustomersUserControl is responsible for providing search capabilities and for setting the DataContext on the CustomerEditUserControl when a Customer is selected.

The CustomerEditUserControl is responsible for providing editing capabilities. This UsesrControl can also be reused in other maintenance forms or possibly in an application child window (dialog box) if the requirements call for this functionality.

The below XAML is from the CustomersUserControl. Again, note the short and simple XAML.

The below short and simple XAML is from the CustomerEditUserControl.

After looking over the XAML for the Window and two UserControls, you can see that we have simplified the application by breaking it into small manageable components. The separated application is easier to maintain over time and test. Another benefit of this separation of the XAML is that the accompanying code-behind will also be simpler, shorter and with fewer methods per class.

Automatically Populate Toolbox Items

By default, in Visual Studio 2010, each time you build a WPF and Silverlight project, any types that derive from FrameworkElement or higher will be automatically added to the Toolbox. The types that are added are grouped into Toolbox tab by assembly.

The purpose of this feature is to make it easy for developers to consume the UserControls and CustomControls they create on a form.

In the below image you can see two UserControls in the Toolbox in the CreateConsumeUserControl Toolbox Tab. These controls can be dragged onto the design surface just like the default WPF or Silverlight controls.

Enable or Disable Automatically Populate Feature

At your option you can enable or disable this feature by using the Visual Studio Options dialog.

To open this dialog:

Click the Visual Studio Tools menu item
Select Options…

Using the TreeView select:

Text Editor
XAML
Miscellaneous

To enabled or disable the feature, check or uncheck the Automatically populate toolbox items CheckBox.

DesignTimeVisible Attribute

At your option, you can keep individual items from appearing by decorating the class with the System.ComponentModel.DesignTimeVisible attribute.

The below code demonstrates how to keep the CustomerEditUserControl from appearing in the automatically populated Toolbox items listing.

[DesignTimeVisible(false)]
public partial class CustomerEditUserControl : UserControl {

VB.NET

<DesignTimeVisible(false)>
Public Class CustomerEditUserControl

Silverlight Page Control

While the Silverlight Page derives from UserControl and you would expect these objects to appear in the Toolbox items listing, these controls are not listed in the Toolbox items listing.

The reason these are not listed is because these are root controls that are not typically consumed in other controls, instead they are navigated to and loaded into a Frame control. Since that are not typically consumed by other controls, there is no reason to load them into the Toolbox.

Root Object and Instances of Controls at Design-time

It's very important to understand when and what user-code the WPF and Silverlight Designer runs at design-time, so that you can avoid unnecessary design-time load failures.

Root Object

The "root object" is the top level (or root) Window or Page or UserControl that you are actually designing. None of the code in the code-behind file for the root object is executed at design time (for example code in the constructor or Loaded event code). The MainWindow is the root object in the below image.

What Code Executes, What Code Doesn't Execute

What code executes at design-time? Everything that gets created in the XAML:

Instances of Controls and UserControls
ValueConverters
DataTemplateSelectors
Classes referenced as resources

What code does not execute at design-time? The top level object you are designing:

Window, UserControl, Page etc. when you are designing it
Your Application class

Important

Never reference the Application or App class in code that gets executed at design-time because this will always be null (Nothing in VB.NET).

Instances of Controls

The Designer will execute all constructors and Loaded event code for each instances of any child controls.

In the below image both the CustomersUserControl and CustomerEditUserControl constructors and Loaded event code will be executed at design-time.

XAML View of the Above Form

The reason this is so important to understand is, your code may make assumptions that are always true at run-time and the application works property, however those same assumptions may not be true at design-time and could cause Designer load failures.

If you have not coded defensively, your user-code can cause unhandled exceptions that will prevent the Designer from loading. A NullReferenceException at design-time is the most common cause of Designer load failure. This is also true of Converters and DataTemplateSelectors that do not make null reference checks before attempting to access a reference type.

Please read the MSDN topic, Troubleshooting WPF and Silverlight Designer Load Failures. This topic contains good information about authoring design-time friendly code and troubleshooting common load failures.

Running Code in a Constructor

Some developers choose to initiate an asynchronous method calls in their constructors. Running these method calls at design-time can cause design-time problems and load failures. For example, trying to call a web service when the web service is not running, or trying to access the database when the connection string information is in the Application object that is null at design-time; these will both cause problem and possibly keep the form from loading or unhandled exceptions thrown.

Both WPF and Silverlight developers have the ability to run a simple check that will verify if the code is currently running at design-time or not.

In the below Silverlight code, the line below InitializeComponent, System.ComponentModel.DesignerProperites.GetIsInDesignMode performs the check. If false (at run-time), then the code will execute.

public partial class ProductsView : UserControl {
    public ProductsView() {
        InitializeComponent();

        if (!DesignerProperties.GetIsInDesignMode(this)) {
            this.tbStatusBar.Text = "Getting products list...";
            ProductsServiceReference.ProductsServiceClient client =
                new ProductsServiceReference.ProductsServiceClient();
            client.DoWorkCompleted += new
                EventHandler<System.ComponentModel.AsyncCompletedEventArgs>(client_DoWorkCompleted);
            client.DoWorkAsync();
        }
    }

    void client_DoWorkCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e) {
        if (e.Error == null) {
            this.tbStatusBar.Text = "Products loaded";
        } else {
            this.tbStatusBar.Text = e.Error.Message;
        }
    }
}

VB.NET

Partial Public Class ProductsView
    Inherits UserControl

    Public Sub New()
        InitializeComponent()

        If Not DesignerProperties.GetIsInDesignMode(Me) Then
            Me.tbStatusBar.Text = "Getting products list..."
            Dim client As new ProductsServiceReference.ProductsServiceClient()
            AddHandler client.DoWorkCompleted, AddressOf client_DoWorkCompleted
            client.DoWorkAsync()
        End If
    End Sub

    Private Sub client_DoWorkCompleted(ByVal sender As Object,
                                       ByVal e As System.ComponentModel.AsyncCompletedEventArgs)
        If e.Error Is Nothing Then
            Me.tbStatusBar.Text = "Products loaded"
        Else
            Me.tbStatusBar.Text = e.Error.Message
        End If
    End Sub

End Class

Comments

Microsoft values your opinion about our products and documentation. In addition to your general feedback it is very helpful to understand:

How the above feature enables your workflow
What is missing from the above feature that would be helpful to you

Thank you for your feedback and have a great day,

Karl Shifflett
Expression Team

Layout Techniques for Windows Forms Developers

karl140.6 — Fri, 04 Jun 2010 08:17:00 GMT

This article has a corresponding video that can be viewed here.

In a typical Windows Forms application control placement is set using the Location property, setting the X and Y sub property values. The Windows Forms designer provides a complete set of tools for aligning and sizing controls.

The WPF and Silverlight platforms are different in both available tooling and layout options.

This article will demonstrate some form layout techniques to help Windows Forms developer's make the transition to WPF or Silverlight.

We'll first lay the form out using the same familiar techniques you're used to in Windows Forms; then we'll create the form using a typical WPF & Silverlight workflow.

Application
Content Based Layout
Review
Comments

Requirements

Please read the WPF & Silverlight Layout Controls topic.

Application

This simple Windows Forms dialog took about 90 seconds to layout. The Windows Forms designer provided excellent layout adorners to assist in aligning the controls. The Properties Window was utilized to set control anchoring and enter the Label and Button text.

This simple WPF dialog took about 90 seconds to layout. The designer provided excellent layout adorners to assist in aligning and set anchoring on the controls. The Properties Window was utilized to enter the Label and Button text.

Let's Build This Dialog in WPF

Add a new WPF Window to the project and name it Customer.xaml
Click the design surface outside the boundary of the Window to select the Window object
Using the lower left resize adorner, resize the Window to 350 x 300. Notice the resize adorner labels indicate the size as you resize the Window.

Drag and drop a Label control from the ToolBox to the design surface inside the Window
Notice the blue box adorner that gets displayed along with the inner area changing color to white when you drag the Label from the ToolBox. This is the Drop Target feature of the WPF and Silverlight Designer, providing you feedback where the object you are dragging can be dropped.

After dropping the Label, move it to the upper left corner. Notice edge snap line adorners providing assistance as you get near the top and left edges.
The number in the top left corner indicates the distance to each edge. The top right and bottom left adorners indicate how far the control is from those edges.

With the new Label selected on the design surface, use the Properties Window to set the Label text to, First Name. In WPF and Silverlight this is accomplished by changing the Content property.

Add a TextBox to the form
To easily position the TextBox to line up with the Label, the text baseline adorner displays helping you line up the controls

After moving the TextBox, the selected adorners will now display as pictured below
The small square adorners at each corner are used to resize the TextBox
The below TextBox is anchored left and top. This is indicated by the left and top triangles the red arrows point to. Since the left edge of the TextBox is great than a few pixels from the edge, the anchoring adorner line is displayed.
To now anchor this TextBox to the right also, we just need to click the right circle the right red arrow points to

After clicking the right circle, the right edge anchoring adorner is displayed
Windows Forms terminology
- TextBox is anchored left, top and right
WPF and Silverlight terminology
- TextBox has HorizontalAlignment set to Stretch and VerticalAlignment set to Top

Now resize the TextBox. When resizing, notice the right edge snap line that appears down the length of the right edge. This indicates that the control is 12px from the edge.

Marquee select the Label and TextBox control

Release the mouse and right click the selected TextBox, select Copy

Click the inner area of the Window, right click and select Paste
The newly pasted controls will appear on top of the existing controls
Notice the newly pasted controls are selected

Click and drag the TextBox down; the Label will move with the TextBox
As you are dragging down, notice that the designer snaps at two increments, 6px and 14px. For this application, we are using 14px.

Repeat the select, copy, paste and align action two more times
Change the Label Content property as indicated below

Drag and drop a RadioButton below the bottom TextBox
Move it into the position shown below
Notice the left control edge snap line and the control distance adorner value of 14

Drag and drop a new Label control below the Phone Label. Move it below the Phone Label as pictured below.
Notice the left edge snap line provides an easy guide for the left edge
As you drag the new Label control down use the text baseline snap line of the RadioButton to align the control

Change the new Label to read Gender and set the Content property on the RadioButton to Male
Drag and drop a new RadioButton control to the design surface and move it into place as pictured below

Change the text of the new RadioButton to Female
Add a new Button to the design surface and move it into position as shown below

After releasing the mouse the selection adorners will appear as pictured below
Now anchor this button right and bottom:
- Click the left adorner, this will toggle anchor left to anchor right
- Click the top adorner, this will toggle anchor top to anchor bottom
- In WPF and Silverlight terminology the Button now has HorizontalAlignment set to Right, VerticalAlignment set to Bottom

Copy and paste the Button, then move into the position below.

Change the Button's text as pictured below by using the Properties Window to change the Content property of each Button.
You can test the layout by resizing the Window control. Notice that the Buttons stay anchored to the bottom right and the TextBoxes resize with the Window.

Easily Change to a Resizable Two Column Form

Now that we see creating a form in WPF or Silverlight is very similar to the Windows Forms experience, let's look at how WPF or Silverlight easily enables making the above form a two column form. The two column form we will create will resize when the Window is resized.

Before proceeding, think about the steps you would follow using the Windows Forms platform to accomplish the task.

Under the Covers

The Windows Forms Designer persists changes to a hidden code-behind file. The WPF and Silverlight Designer persists changes to XAML. To view the created XAML you can click on the XAML View Button. The XAML View and Design View buttons are located at the bottom of the Visual Studio tab you have been working with.

If your XAML is not currently visible, click the XAML View button.

Your XAML should look similar to the below image.

What I want to point out is the second element in the XAML, the Grid.

The entire time we have been adding controls to the form, we have actually been adding them as a child of the Grid control. The Grid is one of the available layout panels.

When the Grid has no rows or columns defined, it's effectively a single cell grid, positioning its child controls using Margin, HorizontalAlignment and VerticalAlignment properties. In similar fashion, Windows Forms uses Location and Anchor properties.

I've show the Grid control here because in the next step we will being working with it.

In WPF or Silverlight the simple steps to create a two column form are:

Click on the Design View button to bring the designer back into view
Right click on the Grid (the area inside the Window, not occupied by a child control), select Grid Column, Insert After

The form should now look like the below image
- The Grid Column, Insert After function adds a new column after the current column and sets its width to 126px. Notice the 126 in the right column rail adorner.
- The left column size is displayed also; 1*. Star sizing is proportional sizing and is fully explained in this article WPF & Silverlight Layout Controls.

With the Grid selected, locate the ColumnDefinitions property in the Properties Window, and click the Collection Editor elipsis button as indicated below

When the Collection Editor opens:
- Select the second ColumnDefinition in the ListBox on the left
- Click the Width property Property Marker
- From the Context Menu, select Reset Value
  - This will change the second column to its default value which is 1*
- Click the OK button to commit the changes
- This will effectively split the form into two proportionally spaced columns that are of equal width

The form now has two equal sized Star sized columns.

Click the design surface outside the Window to select the Window. Notice the Grid's rail adorners are no longer visible and the Window resize adorners are now visible.
Resize the Window to 600 x 300 as pictured below.

Marquee select the first four Labels and TextBoxes and release the mouse button

Right click the selected controls and select Copy from the Context Menu
Right click the selected controls and select Paste from the Content Menu
The eight controls will remain selected; now drag them into position to the right colomn

Use the text baseline snap line to vertically align the controls as pictured below

Change the Content property on the Label controls on the right to the values below
Marquee select the two Buttons, drag and drop them to the below location

Select the Window by clicking the design surface outside the Window boundary. Using the lower left corner resize adorner, resize the Window smaller and larger. Notice that the two columns stay the same size and the controls size to the column.

Content Based Layout

The purpose of the article is to help Windows Forms developer's make the transition to WPF or Silverlight. In the above walk-through we guided you through creating a WPF or Silverlight form using familiar form design techniques you used in Windows Forms.

Now that you have an understanding of control placement and some Grid concepts, let's walk-through building a content based layout form. This type of form is still very easy to build, it leverages more features of the Grid control and providing a layout that conforms to content as the size of that content changes at design or run-time; for example a globalized application when a different language is being used.

Again, in this next section we'll demonstrate how to easily create a form that uses content base layout instead of absolute positioning while at the same time leveraging layout techniques that are familiar to you.

The strategy of this technique is to quickly layout, name and set the text values for your controls. When dragging a control from the ToolBox we are only concerned with positioning the control near where you want it. From the below image you can see I've paid very little attention to size or positioning.

Step One – Quick Layout

Increase the size of the Window; this will give you more room to drag and drop controls with less precision
Drag and drop controls onto the design surface then set their Content property for Labels
- Remember, you don't need to worry about exact positioning or sizing, now. Just lay the controls out very quickly
We will add the two RadioButtons and two Buttons later on

Step Two – Create Rows

Select the root Grid control by clicking inside its boundary

Create your first Grid row by clicking the left Grid Rail Adorner as pictured below

Repeat creating the Grid rows so that your form looks like the below image

Step Three – Create Columns

Create the columns by clicking the top Grid Rail Adorner as pictured below

Step Four – Auto Size Controls

With the root Grid selected, press CTRL+A to select all child controls of the Grid. Optionally, you can also marquee select controls.

Right click on one of the selected controls, from the Context Menu select, Reset Layout, All

Your form should look similar to the below image
What has happened to each control is:
- Margin reset to default value, 0
- VerticalAlignment reset to default, Stretch
- HorizontalAlignment reset to default, Stretch
- Size reset to default, Auto
Notice how each control consumes the full space allocated to it by its container cell.

Step Five – Auto Size Rows

Hover the mouse over the left Grid Rail Adorner near the numbers, a Grid Row size selector will appear
Click Auto
Repeat for each row except the last row

Your form should now look like the below image. You can now see why we didn't spend much time during the initial layout.
- The bottom row is Star sized. In this form it will consume all the remaining vertical space.

Step Six – Auto Size the First Column

Hover the mouse over the top Grid Rail Adorner near the numbers, a Grid Column size selector will appear
Click Auto
By auto sizing the first column we are allowing the text of the Label controls to grow at run-time or design-time based on a font, font size or language change.
- Another option is to provide a fixed width of reasonable value, replace the Label controls with TextBlocks and enable text wrapping. Since the rows are auto sized, if the text does wrap the row size will automatically be increased to accommodate the increase is height.

Step Seven – Margins

Select all child Grid controls using CTRL+A
Notice the Properties Window
- Top red arrow – multiple objects are now selected
- Middle red arrow – enter "mar" in the Search Box
- Bottom red arrow – enter "6" for the Margin
On the design surface, all of the controls all have a Margin of 6.

Step Eight – RadioButtons

Click the StackPanel icon in the ToolBox, and then draw the StackPanel in the column next to the Gender Label.

Use the Reset Layout feature for the StackPanel

Using the Properties Window, set the following properties:
- Orientation to Horizontal
- Margin to 6

With the StackPanel selected double click on the RadioButton icon in the ToolBox to create the first RadioButton
Repeat the double click action to create the second RadioButton.
Using the Properties Window set the following RadioButton properties :
- Content property for each RadioButton to the appropriate text (Male, Female)
- Reset Height property as pictured below
- VerticalAlignment to Center
- Female RadioButton, set the Margin property to 12,0,0,0
Your form should now look like the below image

Step Nine – Add the Buttons

We will now use the Grid SharedSizeScope feature you learned about in the WPF & Silverlight Layout Controls article.

This feature enables us to ensure that the Button controls will be the same size, even if the text of one button is shorter/longer than the other Button.

Draw a new Grid in the row below the RadioButtons
Add a column to that Grid near the middle of the Grid
Add a Button control to each Grid cell as in the below picture

With the new Grid selected on the design surface, switch to XAML view. Notice that the same Grid is selected in the XAML Editor for you.
Add the attached property, Grid.IsSharedSizedScope and set its value to True.
- This attached property is currently not available in the Properties Window so we need to use the XAML Editor.

Switch back to Design view and select the new Grid again.
Using the Properties Window, locate the ColumnDefinitions property and click the ellipsis button to open the Collection Editor.

For both columns, set the Width to Auto and the SharedSizeGroup to buttons
Click OK to close the dialog and commit the changes

On the design surface, select both Button controls in the new Grid
Using the Properties Window, set the six properties indicated by the red arrows
- Setting the Button Padding property provides nice internal spacing between the Button's text and border.
Your form will now look like the below image

Information

What is the above degenerate area?

The degenerate area (or degenerate zone) is an area of the Grid that remains after the last column or row.

The above Grid is 300px wide, but its two columns are Auto sized only taking up about 110px total; the remaining 190px area is the degenerate area.

Notice the top Grid Rail Adorner for the degenerate area does not have a number on it. This is because there really is no column there. The missing number on a Grid Rail Adorner for a row or column is a visual indicator that that row or column does not exists.

On the design surface, select the new Grid
Using the Properties Window, set the five properties indicated by the red arrows
Your form will now look like the below image

Information

The reason we right aligned the above Grid is to anchor the Grid (and the child buttons) to the right edge of the form. If the form is resized, the Grid will stay anchored to the right edge.

Using the Properties Window, selected each Button and set the Content property adoringly
- Notice the buttons have the same width. This provides a nice clean look.
Resize form to desired size.

Tip

This is an auto sized form. Notice when you resize the forms width, the TextBoxes resize with the form.

At your option, you could set a fixed width for the TextBoxes.

At your option you could also set the MinWidth property on the Window or TextBoxes to prevent the user from resizing the dialog too small.

Review

In this short article we have learned that:

Form layout skills learned in Windows Forms transfer to WPF and Silverlight
Absolute positioning can be used in WPF or Silverlight applications
Adopting content based layout in WPF or Silverlight can easily be achieved by following a simple workflow:
- Roughly layout the form
- Add Grid rows and columns
- Resize Grid child controls
- Set appropriate Margins for child controls
- Add additional controls, etc.

Comments

Microsoft values your opinion about our products and documentation. In addition to your general feedback it is very helpful to understand:

How the above features enable your workflow
What is missing from the above features that would be helpful to you

Thank you for your feedback and have a great day,

Karl Shifflett
Expression Team

Creating and Consuming Resource Dictionaries in WPF and Silverlight

karl140.6 — Thu, 03 Jun 2010 23:42:26 GMT

This article has a corresponding video that can be viewed here.

Resource Dictionaries are a powerful feature in WPF and Silverlight that enable developers to organize and consume reusable resources.

After completing this walk through you'll understand how to create and merge resource dictionaries in WPF and Silverlight; how to add, consume and modify resources in the dictionary using the tools provided by the WPF and Silverlight Designer in Visual Studio 2010.

What is a Resource?
Where Can I Locate Resources?
How Do I Create Resources Similar To The Example?
Resources are Declared at Different Scopes
Show me how a ResourceDictionary Used
Where to Go From Here
Links
Comments

What is a Resource?

Before diving into resource dictionaries let's first understand what the term "resource" means when used in the context of a resource dictionary or in a resources section of an object in XAML.

A resource is an object declared in XAML. In the below XAML we see examples of typical resources; my: is an alias for the System namespace in mscorlib.

<UserControl.Resources>
    <LinearGradientBrush x:Key="formBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="Blue" Offset="0" />
        <GradientStop Color="#460000FF" Offset="1" />
    </LinearGradientBrush>
    <my:String x:Key="applicationTitle">Resource Dictionary Demo</my:String>
    <my:Double x:Key="applicationTitleFontSize">18</my:Double>
    <SolidColorBrush x:Key="applicationTitleForeground">Yellow</SolidColorBrush>
</UserControl.Resources>

One reason to use resources in your applications is to promote object reuse across your application. Object reuse provides consistency across the application. Object reuse also makes it very easy to change the application; since you only need to change the resources and all consumers will pick up the change.

The below XAML consumes the above resources.

<Grid x:Name="LayoutRoot" Background="{StaticResource formBackground}">
    <TextBlock 
        Text="{StaticResource applicationTitle}" 
        Foreground="{StaticResource applicationTitleForeground}" 
        FontSize="{StaticResource applicationTitleFontSize}" 
        VerticalAlignment="Top"/>
</Grid>

Where Can I Locate Resources?

Resources are located in resource dictionaries.

What I have referred to as a resources section is actually the Resources property (WPF Silverlight) which is of type ResourceDictionary. When you add resources to the Resources property, you are actually adding them to a ResourceDictionary exposed by the object.

The Resources property is defined on FrameworkElement and is inherited from any object that has FrameworkElement in its inheritance hierarchy. This means that resources can be located on Windows, UserControls, Grids, Buttons, TextBoxes, ListBoxes, etc.

In addition to an objects Resources property, resources can also be located in a ResourceDictionary XAML file.

How Do I Create Resources Similar To The Example?

Create a new WPF or Silverlight project and add the following XAML.

<Grid x:Name="LayoutRoot">
    <Grid.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Blue" Offset="0" />
            <GradientStop Color="#460000FF" Offset="1" />
        </LinearGradientBrush>
    </Grid.Background>
    <TextBlock 
        Text="Resource Dictionary Demo" 
        Foreground="Yellow" 
        FontSize="18" 
        VerticalAlignment="Top"/>
</Grid>

Using the Brush Editor to Create the Background

Select the Grid on the design surface
Using the Properties Window:
- Step One:
  - Select the Background property
  - Click the Gradient Brush icon
- Step Two:
  - Select the left gradient stop and sets its color to Blue
  - Select the right gradient stop and sets its color to Blue
- Step Three:
  - Click the Horizontal Gradient Brush icon
  - Select the right gradient stop and set the Alpha channel 70

Extracting Background Property to a Resource

We will now use the "Extract Value to Resource…" feature of the Designer. To exact a property value to a resource, click on the Property Marker, this will open the below Context Menu. Now select, "Extract Value to Resource…"

When the Create Resource dialog opens, change the Key to "formBackground," leave the Destination value to whatever it defaulted to and click OK.

Notice that I have chosen to name the resource by its role, as opposed to what it looks like. Adopting this Key naming convention allows a resource to be changed without causing a conflict with the Key name. For example, if the Key name was BlueGradient and I assigned it to each forms Background property, then later wanted to change it to a green gradient, the name would still be BlueGradient but the color was now green. By naming the Key formBackground, I've not associated any color or type of brush with the name.

In the below image we can see what the Designer tool did for us.

Created a Resources section in XAML for the Demo UserControl
Moved the LinearGradientBrush to the Resources section
Added the Key to the resource
Set the Grid Background property to the newly created resource

Extracting the TextBlock Properties to a Resource

To help us quickly locate the TextBlock properties that have been set, we will now use a very cool feature of the Designer's Properties Window, "Sort by property source."

Select the TextBlock on the design surface
Using the Properties Window, click the "Sort by property source" Button (top red arrow)
- This groups all properties together that have been changed from their default value by setting them locally, using a binding or a resource
Using the Extract to Resource feature, extract the properties indicated by the red arrows
- Text – applicationName
- FontSize – applicationNameFontSize
- Foreground - applicationNameForeground

After extracting the above properties to resources, your XAML will look like the below image.

The required root Grid and application title TextBlock properties are now set for reuse.

Notice the yellow highlighted line of XAML. This alias was added by the Designer tool. When the Designer tool adds an alias, it names the first one, "my" the next alias, "my1", etc. For very small forms with a single alias this may be acceptable. However for most projects you'll want to use meaningful names for your aliases.

You have several options open to you to change these. First, if you define the alias in the XAML file before extracting to a resource, the Designer tool will reuse the alias when referencing the same namespace and assembly. You could also edit the XAML after the Designer tool creates it. After you have worked with WPF or Silverlight for a short time, you'll get an understanding of the aliases you use and can just add them to your new XAML files before you start adding other content to the XAML file.

Resources are Declared at Different Scopes

The below image is the anatomy of a simple WPF or Silverlight application that is composed of hierarchy of objects nested within each other.

Note

Silverlight does not have system scoped resources like WPF does.

When we say resources are scoped, we mean that resources can be defined at various levels of the application hierarchy. Resources defined at a certain scope are available to all elements in or below that scope.

For example, we previously extracted property values to the UserControl scope and the child Grid and TextBlock could access those resources.

Now, what if we wanted to consume those same resources we extracted earlier in another UserControl; how could we accomplish this?

To make the resources available, to other UserControls or Windows in the application, we need to move the resources to the Application scope.

When moving resources to Application scope, you have several options available to you:

Add the resources to the Application.xaml (VB), or App.xaml (C#) file
Add the resources to a ResourceDictionary, then merge that ResourceDictionary at the Application scope

Moving Resources to Application Scope

For purposes of demonstration, I've cut the UserControl Resources and pasted them into the Application Resources section. Noticed I also cut and pasted the alias "my:" too.

You can also remove the UserControl.Resource from the UserControl's XAML as I have done the Demo.xaml image below.

You'll need to rebuild the application to remove the squiggles from your UserControl's XAML. The UserControl looks exactly as it did, but is now resolving its resources from the Application scope instead of the UserControl scope. We have just enabled reuse of these resources throughout the application. You can also see how Demo.xaml is smaller in size and looks cleaner now that we have moved the resources out of the local XAML file.

Application.xaml

<Application 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    x:Class="ResourceDictionaryDemo.App"
    xmlns:my="clr-namespace:System;assembly=mscorlib">
    <Application.Resources>
        <LinearGradientBrush x:Key="formBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Blue" Offset="0" />
            <GradientStop Color="#460000FF" Offset="1" />
        </LinearGradientBrush>
        <my:String x:Key="applicationTitle">Resource Dictionary Demo</my:String>
        <my:Double x:Key="applicationTitleFontSize">18</my:Double>
        <SolidColorBrush x:Key="applicationTitleForeground">Yellow</SolidColorBrush>
    </Application.Resources>
</Application>

Demo.xaml

<UserControl 
    x:Class="ResourceDictionaryDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"
    xmlns:my="clr-namespace:System;assembly=mscorlib">

    <Grid x:Name="LayoutRoot" Background="{StaticResource formBackground}">
        <TextBlock 
            Text="{StaticResource applicationTitle}" 
            Foreground="{StaticResource applicationTitleForeground}" 
            FontSize="{StaticResource applicationTitleFontSize}" 
            VerticalAlignment="Top"/>
    </Grid>
</UserControl>

Show me how a ResourceDictionary Used

If your application only requires a few resources, locating them in the Application.xaml or App.xaml would be fine.

However, in most applications the number of resources grows quickly and must be managed early in the application lifecycle.

Resource dictionaries are used to group related resources, then those resource dictionaries are then merged at the Application or other required scope.

What we will do now is:

Create a new Silverlight application
Add a ResourceDictionary
Merge the ResourceDictionary at Application scope
Create the same UI as before
Use the Designer tool to extract the resources to the ResourceDictionary instead of the UserControl or Application Resources section
Last, we'll add another UserControl and then consume the resources in the ResourceDictionary.

Create a New Silverlight Application

Create a new Silverlight application named, UsingResourceDictionaries

Add a ResourceDictionary

Add a folder named Assets
To the Assets folder, add a Silverlight Resource Dictionary named FormDictionary.xaml

Merge the ResourceDictionary at Application Scope

Open App.xaml
- Edit the XAML or copy and paste this XAML
- You have just merged the FormDictionary ResourceDictionary at Application scope

<Application 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    x:Class="UsingResourceDictionaries.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Assets/FormDictionary.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Create the Same UI

Open MainPage.xaml
Select the root Grid
- Using the Properties Window, set the Background as before
Add a TextBlock to the Grid
- Right click on the TextBlock, select Reset Layout, All
- Using the Properties Window, set the four properties on the right

Extract Property Values to the Merged Resource Dictionary

Select the root Grid
Using the Properties Window:
- Click the Background property Property Marker
- Select Extract Value to Resource…

Using the Create Resource dialog:
- Change the Key name to formBackground
- From the Destination Combobox, select FormDictionary.xaml
  - Notice how the ComboBox items are nested at each scope
- Click OK to close the dialog

Open FormDictionary.xaml
You can see the formBackground LinearGradientBrush

Tip

In the next step we will be extracting Double and String values to a resource. The Designer tool will add the "my" alias for the System namespace in mscorlib if an alias has not been added.

To make your applications more readable and easier to maintain over time, you can proactively add meaningful aliases before they needed by the Designer as I have done in the yellow highlighted XAML below.

Switch back to MainPage.xaml
Select the TextBlock
Using the Properties Window, extract the below three properties using the names indicated
- Remember to select the Destination after changing the Key name.
Your FormDictionary.xaml file should now look like the below image

Consume Resources in another UserControl

Add a new Silverlight UserControl to the project and name it, Consumer.xaml
Select the root Grid
Using the Properties Window:
- Click the Background property, Property Marker
- Select Apply Resource…
When the Apply Resource Popup opens, select the formBackground resource
Notice:
- Brush resources provide a preview
- The selected Key is displayed at the bottom
- You can search for resources by entering search text in the Search Box
- Only resources with the matching type of the property that are in scope are displayed
  - If you don't see a resource you think should be here, ensure that the ResourceDictionary has been merged in correctly.
- The Silverlight Apply Resource Popup does not list system values; this is only done in WPF.
Add a TextBlock to the Grid
- Right click on the TextBlock, select Reset Layout, All
Using the Properties Window, set the VerticalAlignment property to Top
Using the Properties Window, set the appropriate resource for the following properties
- Text
- Foreground
- FontSize
The TextBlock's properties should not be set like the below image
Take notice of how easy it was to have both application title TextBlock's consume the resources

Where to Go From Here

The next logical step from here is to learn how to combine individual resources values into a Style and then apply a single Style to a control.

This MSDN topic, WPF Styling and Templating provides a good starting point for understanding Styles.

Links

MSDN topic WPF Resources Overview

MSDN topic Silverlight Resource Dictionaries

Comments

Microsoft values your opinion about our products and documentation. In addition to your general feedback it is very helpful to understand:

How the above features enable your workflow
What is missing from the above features that would be helpful to you

Thank you for your feedback and have a great day,

Karl Shifflett
Expression Team

Create Silverlight Master – Detail UI Using Data Sources Window Object DataSource

karl140.6 — Thu, 03 Jun 2010 23:29:00 GMT

This article has a corresponding video that can be viewed here.

Master – Detail layouts are the bread and butter of Line of Business (LOB) applications. This walkthrough will show you how to drag & drop from the Data Sources Window to create the UI that is sourced from an Object DataSource.

This article has a single download that contains C# and VB.NET completed solutions and starter solutions. The starter solution includes the data entity classes and a static (Shared) data source class.

This walk through assumes that you'll be starting with the starter solution.

Completed Application
Starter Solution
Adding a Title to the Form
Adding the ComboBox Used for Record Selection
Adding the Details Form
Adding the DataGrid
How does it Work?
Links
Comments

Completed Application

Figure 1 Completed Application

Starter Solution

Open the accompanying (C# or VB.NET) starter solution.

Figure 2 Starter Solution

The Data class provides two static (Shared) properties that expose an ObserveableCollection that are the application data sources. The Data class takes the place of a data layer that would be used to populate CLR classes from a database.

Figure 3 Data Class Diagram

The Customer class can contain one or more Addresses. Each Address has an associated AddressType.

Figure 4 Entity Class Diagram

Adding a Title to the Form

Step One

Figure 5 Draw Top Border

Open MainPage.xaml
Select the root Grid by clicking inside the Window
Create a new Grid Row that takes up about 25% of the Window
- Click the Grid rail on the left to create a new row
Draw a Border control inside the new row
- Select the Border control in the Toolbox then draw the Border as pictured in Figure 5 above.

Step Two

Draw a TextBlock control inside the Border
Using the Document Outline, multi-select the TextBlock and Border controls.
Reset the Layout Properties (see Figure 6 below)
- Right click on the selected controls, select Reset Layout, All.
Figure 6 Resetting Values
After the properties are reset the layout should look like Figure 7 below:

Figure 7 Title Step Two

Step Three

Using the Document Outline, select the Border control
Using the Properties Window, set the following properties:
- CornerRadius to 30
- Margin to 11
- Padding to 7
- BorderThickness to 2
- Background to formTitleBackgroundBrush
  - Use Resource Picker, see Figure 8 below
- BorderBrush to formTitleBorderBrush
  - Use Resource Picker, see Figure 8 below
Figure 8 Applying Resource
Using the Document Outline, select the TextBlock
Using the properties Window set the following properties
- Text to Customer
- VerticalAlignment to Center
- FontSize to 18
- FontWeight to Bold
- Foreground to formTitleForegroundBrush
  - Use Resource Picker
Using the Document Outline, select the Grid
Hover cursor over the left Grid rail for the top row. Set top row to Auto sizing as in Figure 9 below.
The bottom image in Figure 9 shows the completed form title.

Figure 9 Auto Sizing Row

Adding the ComboBox Used for Record Selection

Step One

Select the root Grid by clicking inside the Window
Create a new Grid Row that takes up about 25% of the Window
- Click the Grid rail on the left to create a new row
Draw a StackPanel inside the new row
Add a TextBlock to the StackPanel by double clicking the TextBlock icon in the Toolbox
Add a ComboBox to the StackPanel by double clicking the ComboBox icon in the Toolbox
Form should now look like Figure 10 below

Figure 10 Record Selector Step One

Step Two

Select the StackPanel
Reset the Layout Properties for the StackPanel
- Right click on the StackPanel, select Reset Layout, All
Using the Properties Window, set the following properties:
- Margin to 11
- Orientation to Horizontal
Using the Document Outline, multi-select the TextBlock and ComboBox
- Right click on the selected controls, select Reset Layout, All
Using the Properties Window, set the following property:
- VerticalAlignment to Center
Form should now look like Figure 11 below

Figure 11 Record Selector Step Two

Step Three

Using the Document Outline, select the TextBlock
Using the Properties Window, change the Text property to Select Customer
Using the Document Outline, select the ComboBox
Using the Properties Window, set the following properties:
- Margin to 7, 0
- Width to 175
Change the Grid Row size that the StackPanel is a child of to Auto.
Form should now look like Figure 12 below

Figure 12 Record Selector Completed

Step Four

From the Data menu, select Show Data Sources.

Figure 13 Data Menu

Figure 14 Data Sources Window

Add a new Data Source by clicking on the "Add New Data Source…" link pictured in Figure 14 above.
When the Data Source Configuration Wizard is displayed select the Object icon and click the Next button.

Figure 15 Select Data Objects

Drill down to the Customer object and select it, then press the Finish button.
Figure 16 below shows the newly created Object Data Source

Figure 16 New Data Source

Step Five

The ComboBox will provide Customer record selection. To wire up the ComboBox drag the Customer object and drop it on the ComboBox as pictured in Figure 17.

Figure 17 Binding ComboBox

Select the ComboBox
Using the Properties Window, set the DisplayMemberPath to Name

Providing Run-Time Data to the CollectionViewSource

When the Customer object was dragged onto the ComboBox, a CollectionViewSource was added to the XAML, the StackPanel that holds the ComboBox had its DataContext set to that same CollectionViewSource.
At this point, we need to write a very small amount of code to provide data to the CollectionViewSource.
Open the MainPage.xaml.vb or MainPage.xaml.cs file and edit the code that was added to the Loaded event handler when the Customer object was dragged onto the ComboBox. When your editing is completed, your source code will look like the examples below.

VB.NET

Imports System.Windows.Data
Imports System.ComponentModel

Partial Public Class MainPage
    Inherits UserControl

    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub UserControl_Loaded(
                ByVal sender As System.Object,
                ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded

        If Not (DesignerProperties.GetIsInDesignMode(Me)) Then

            Dim cvs As CollectionViewSource =
                CType(Me.Resources("CustomerViewSource"), CollectionViewSource)

            cvs.Source = Data.Customers

        End If
    End Sub

End Class

using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;

namespace MasterDetailDataSourcesWindowDemo {

  public partial class MainPage : UserControl {
    public MainPage() {
      InitializeComponent();
      Loaded += new RoutedEventHandler(MainPage_Loaded);
    }

    void MainPage_Loaded(object sender, RoutedEventArgs e) {
      if (!DesignerProperties.GetIsInDesignMode(this)) {
        CollectionViewSource cvs = (CollectionViewSource)this.Resources["CustomerViewSource"];

        cvs.Source = Data.Customers;
      }
    }
  }
}

In the above code we are getting a reference to the CustomerViewSource CollectionViewSource and assigning Data.Customers collection to the Source property.
In an application that loads data from a database or web service when the form is loaded, you would not want the data to load at design time. The call to GetIsInDesignMode provides this check to allow you to prevent loading data at design time.
Run application. You should be able to view data as pictured in Figure 19 below.

Figure 18 Run Application

Adding the Details Form

The details form in this application plays the role of the Master in our Master-Details application.

Step One

Customize the Customer object output.

Figure 19 Change Customer Layout Type

Change the Customer object layout to Details as pictured in Figure 19 above

Figure 20 Change CustomerID Layout Control

Change the CustomerID property to use the TextBlock control when rendered as pictured in Figure 20 above

Step Two

Figure 21 Adding New Row

Select the Grid and add a new row as pictured in Figure 21 above

Figure 22 Details Form Generation

Drag and drop the Customer object to the Grid Row below the ComboBox
With the Details Grid selected, right click, select Reset Layout, All
Using the Properties Window, set the following properties:
- VerticalAlignment to Top
- Margin to 11
Select the outer Grid and change the Details Form row to use Auto sizing
Using the Document Outline, select the TextBlock for the CustomerID
Using the Properties Window, set the following properties:
- VerticalAlignment to Center
- HorizontalAlignment to Stretch
- Height – use property marker to reset
The application should now look like Figure 23 below
Run the application and select different Customers

Figure 23 Details Form Completed

Adding the DataGrid

Step One

Customize the Addresses object output

Figure 24 Configure CustomerID Layout Control

Set the CustomerID field control to None. When the Addresses object is dragged to the design surface, no control will be emitted for the CustomerID property.

Step Two

Figure 25 Add Grid to Bottom Row

Add a Grid control to the bottom row
With Grid selected, right click and select Reset Layout, All
Using the Properties Window, set the following property:
- Margin to 11

Information

The reason we have added the Grid is to provide a surrounding container for the DataGrid we will add in the next step.

The Grid container will have its DataContext property set in the next step when we drag and drop the Addresses DataGrid onto the design surface.

If we didn't add this Grid container, the Data Sources Window would look up the tree of elements trying to locate a container to set the DataContext on. In the case of this application, the DataContext would be set on the top level Grid control. While this would work, it would make the XAML harder to read and understand where the DataGrid's DataContext was set.

By placing the DataGrid inside its own surrounding Grid control, it's very easy to understand where the DataGrid's DataContext is when reading the XAML.

Step Three

Figure 26 Drag and Drop Addresses DataGrid

Drag and drop the Addresses object from the Data Sources Window to the Grid control added in Step Two above
With DataGrid selected, right click and select Reset Layout, All
The DataGrid should now look like Figure 27 below

Figure 27 Data Grid Resized

Step Four

We now need to add an AddressType ComboBox column and wire it up to data source.

Change MainPage.xmal to XAML view
Near the top of the file, add the following to the UserControl.Resources section:

<local:Data x:Key="data" />
- Adding the Data class as a resource allows elements within scope to data bind to properties exposed by the Data class.
Near the bottom of the file, nested inside the DataGrid locate the follow XAML:

<sdk:DataGrid.Columns>
Copy and Paste the below XAML just below the above Columns tag XAML. This will make the Address Type, the DataGrid's first column.

Information

The WPF & Silverlight Designer currently does not support the editing DataTemplates so you'll need to edit the XAML in the XAML Editor.

However, when editing in the XAML Editor, if you have loaded the Designer, you can use still use the Properties Window to set property values on the selected object.

<sdk:DataGridTemplateColumn 
    x:Name="AddressTypeColumn" 
    Header="Address Type" Width="100">
    <sdk:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock 
                Margin="3,0,0,0" VerticalAlignment="Center" 
                Text="{Binding Path=AddressType.Name}" />
        </DataTemplate>
    </sdk:DataGridTemplateColumn.CellTemplate>
    <sdk:DataGridTemplateColumn.CellEditingTemplate>
        <DataTemplate>
            <ComboBox 
                DisplayMemberPath="Name" 
                ItemsSource="{Binding Path=AddressTypes, Source={StaticResource data}}" 
                SelectedItem="{Binding Path=AddressType, Mode=TwoWay}" />
        </DataTemplate>
    </sdk:DataGridTemplateColumn.CellEditingTemplate>
</sdk:DataGridTemplateColumn>

Change MainPage.xmal to Design view, the DataGrid should now look like Figure 28 below

Figure 28 After Pasting Address Type Column

Select the DataGrid
In the Properties Window, click the ellipsis button for the Columns property. This will open the Collection Editor for the DataGrid Columns.
Change the Collection Editor Properties to Alpha view
In the Properties Search Box enter: width
The Collection Editor should now look like Figure 29 below

Figure 29 DataGrid Column Collection Editor

Information

The DataGridColumn Width property is of type DataGridLength. Star sizing for the Silverlight DataGrid is a new feature in Silverlight 4.

You can read about the DataGridLength in this MSDN topic:

http://msdn.microsoft.com/en-us/library/system.windows.controls.datagridlength(VS.95).aspx

Set AddressTypeColumn width to 100, Pixel
Set CityColumn width to SizeToCells
Set StateColumn width to SizeToHeader
Set StreetColumn width to 1, Star
Set ZipColumn width to SizeToCells
Reorder the columns by moving the StreetColumn to come after the AddressTypeColumn as in Figure 30 below

Figure 30 DataGrid Column Reordering

Close the Collection Editor by clicking the OK button
The DataGrid should now look like Figure 31 below

Figure 31 DataGrid After Column Resizing

Run your application
- You can edit rows in the DataGrid
- Notice that the ComboBox in the DataGrid provides selection for the Address, AddressType.

How does it Work?

The CollectionViewSource is a powerful class that provides a wrapper around a data source, adding sorting, grouping and filtering functionality without changing the source data.

The CollectionViewSource is a proxy class to the underlying CollectionView that provides navigation of collection items.

Information

MSDN CollectionViewSource documentation can be viewed here:

http://msdn.microsoft.com/en-us/library/system.windows.data.collectionviewsource(VS.95).aspx

Figure 32 Data Object Relationships

The Data.Customers ObservableCollection is the source for the CustomerViewSource. This data is wired up in the MainPage.Loaded event.
When the ComboBox selection changes it sets the CurrentItem on the underlying CollectionView.
The Details Form is bound to the CurrentItem. When selection changes, the Details Form DataContext changes and the selected Customer is displayed.
The CustomerAddressesViewSource is bound to the CurrentItem (current Customer) Addresses property.
The DataGrid is bound to the CustomerAddressesViewSource and displays all items in this collection.

DataGrid ComboBox

Silverlight does not ship with a DataGridComboBoxColumn class. Instead, it provides the flexible DataGridTemplateColumn class. This column exposes two template properties, CellTemplate and CellEditingTemplate that enable developers to author DataTemplates when the cell is in read or edit mode.

<sdk:DataGridTemplateColumn 
    x:Name="AddressTypeColumn" 
    Header="Address Type" Width="100">
    <sdk:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock 
                Margin="3,0,0,0" VerticalAlignment="Center" 
                Text="{Binding Path=AddressType.Name}" />
        </DataTemplate>
    </sdk:DataGridTemplateColumn.CellTemplate>
    <sdk:DataGridTemplateColumn.CellEditingTemplate>
        <DataTemplate>
            <ComboBox 
                DisplayMemberPath="Name" 
                ItemsSource="{Binding Path=AddressTypes, Source={StaticResource data}}" 
                SelectedItem="{Binding Path=AddressType, Mode=TwoWay}" />
        </DataTemplate>
    </sdk:DataGridTemplateColumn.CellEditingTemplate>
</sdk:DataGridTemplateColumn>

AddressType.Name displays in the Address Type cell when not editing
When editing the Address Type, the cell displays a ComboBox that provides selection of an AddressType.
SelectedItem property gets and sets the AddressType for the Address in the row
ItemsSource is set to the static resource data, which exposes the Data class for data binding. Data.AddressTypes is a collection of AddressType which is what the ComboBox uses for its ItemsSource.
DisplayMemberPath is the Name property of the AddressType

Information

MSDN DataGridTemplateColumn documentation can be viewed here:

http://msdn.microsoft.com/en-us/library/system.windows.controls.datagridtemplatecolumn(VS.95).aspx

Links

Now that you have a built a simple Silverlight application can we suggest that you view Scott Morrison's MIX10 presentation, building Silverlight Business Applications.

Presentation: http://live.visitmix.com/MIX10/Sessions/CL08

Blog post with source code: http://blogs.msdn.com/scmorris/archive/2010/03/17/mix-10-silverlight-4-business-applications.aspx

Comments

Microsoft values your opinion about our products and documentation. In addition to your general feedback it is very helpful to understand:

How the above features enable your workflow
What is missing from the above features that would be helpful to you

Thank you for your feedback and have a great day,

Karl Shifflett
Expression Team

WPF & Silverlight Designer

Debugging Data Bindings in a WPF or Silverlight Application

Data Binding Overview

Ounce of Prevention is Worth a Pound of Cure

Troubleshooting List

Verify that DataContext is set in either XAML or Code

View the Debug Output Window

Sample Debug Output Window Data Binding Error

Review

WPF Trace Settings, Data Binding

PresentationTraceSources.TraceLevel

Use the Debugger Quick Watch to View the DataContext

Place a Breakpoint inside the Source Property Getter

Add a Converter to a binding, then put a Breakpoint in the Converter

Comments

Tips and Tricks for working with the WPF and Silverlight Designer in Visual Studio 2010

Table of Contents

Tip 1: Install Silverlight 4 Tools even if you are building WPF apps

Tip 2: The Properties Window works when just editing XAML too.

Tip 3: Getting the Properties Window to work when working with Resource Dictionaries and App.xaml

Tip 4: Use Sample Data for a happier design experience in your templates

Tip 5: Quick way to add the d: namespace for Sample Data

Tip 5: Pressing Alt key while move/resize hides the snaplines:

Tip 6: Pressing the Spacebar lets you Pan the Design Surface with the Mouse

Tip 8: Easy ways to select hard-to-select things on the design surface

Use Tab Key To Go To The Next Control On Design Surface

Pressing ESC Key or right click and use the Selection menu to Select Parent Control

Use the Document Outline or the Path Control to view the XAML tree structure and select objects

Tip 9: Use Bring to Front / Send to Back to set tab order within a panel

Tip 10: Use the new multi-monitor support to open my XAML and Design panes in separate windows

For more Tips & Tricks…

Comments

Sample Data in the WPF and Silverlight Designer

Objective

Requirements

Table of Contents

Background

Cider and Blend 4

Blend 4

Faux Types and Real Types

Images in Sample Data Files

WPF Sample Data Files Only

WPF and Silverlight Sample Data Files

Adding New Sample Data File

WPF Supported Sample Data File Scenarios

Silverlight Supported Sample Data File Scenarios

Non-WCF RIA Services Scenario

WCF RIA Services Scenario

Consuming Sample Data File

Sample Data Consumers

WPF Sample Data Scenarios

Demo-01 Single Customer

Connecting Sample Data

Demo-02 Single Not Creatable Customer

Connecting Sample Data

Demo-03 Customer ViewModel

Connecting Sample Data

Demo-04 Northwind Master Details Details

Connecting Sample Data

Demo-05 Select Customer From List

Connecting Sample Data

Demo-06 Typed DataTemplate

Connecting Sample Data

Silverlight Sample Data Scenarios

Demo-01 Single Customer

Connecting Sample Data

Demo-02 Customers DataSources Window

Connecting Sample Data

WCF RIA Services Sample Data Scenario

Connecting Sample Data

Choosing Sample Data Loading Technique

Comments

Known Issue: Control Design-Time Assemblies File Locking When Using WPF and Silverlight Designer

File Locking Issues when using WPF and Silverlight Designer

Recommended Rules to Avoid Locking Issue

Recommended Pattern for Testing Controls During Development

Three New WPF and Silverlight Designer Videos Posted

Comments

How to Enable Using the Binding Builder in WPF and Silverlight Applications

Requirements