Portland Silverlight User Group 10 Aug 2010

On 10 Aug 2010, Adam Kinney and I will be presenting at the Portland Silverlight User Group.

As you know I work on the WPF & Silverlight Designer in Visual Studio as part of the Expression Team.

This session will provide guidance for writing applications that are toolable.  Many folks use the term, Blendable.

Do you use MEF, IoC or Service Locator to resolve dependencies?  Do you use M-V-VM or code-behind click handlers? Do you use sample data?  No problem. 

We’ll show you how to have a successful design-time experience with the Visual Studio and Expression Blend tools.

Session Abstract

Building toolable Silverlight applications that enable the designer developer workflow Warning: We won’t be 20 seconds into this session before mashing the gas pedal to the floor. After looking at the XAML tools Blend & Cider, we’ll dive deep into toolable application design. Toolable applications not only enhance the initial development experience but also provide benefits to long term application maintenance. An additional benefit is the enabling of the designer developer workflow. See the two roles played out in the presentation as they collaborate without clobbering each other.

Wanting to properly represent the WPF & Silverlight Designer, I’ll be sporting a nice XAML blue do. 

Just look for the guy with a red Hawaiian shirt with blue hair.

See you in Portland!

Just a grain of sand on the worlds beaches.

Sample Data in the WPF and Silverlight Designer

I just posted a comprehensive article on Sample Data in the Visual Studio 2010 WPF and Silverlight Designer here.

This article is scenario based and fully explains sample data in WPF and Silverlight.

It includes code sample in C# and VB.NET.

Have a great day,

Just a grain of sand on the worlds beaches.

d:DesignInstance, d:DesignData in Visual Studio 2010 Beta2

The WPF and Silverlight Designer for Visual Studio 2010 shares several new design time (d:) properties and design time MarkupExtensions with Expression Blend 3 that provide necessary information for the WPF and Silverlight Designer to deliver a great editing experience.

I have explained the d:DesignData MarkupExtension in detail in this blog post:  Visual Studio 2010 Beta2 Sample Data Project Templates.

In this post I’ll cover the d:DataContext property and the d:DesignInstance MarkupExtension.

d:DataContext

d:DataContext gives developers the ability to set a design time d:DataContext that is separate and independent of the run-time DataContext property.

This feature solves the problem of developers wanting to set their DataContext programmatically but also wanting design time data.

All d: properties are ignored during compilation and are not part of any run-time assemblies.

d:DesignInstance

Purpose:  Provides a design time shape to the d:DataContext its applied to.

Example:  In the below snippet the Person class is the shape provided by d:DesignInstance to the Grid’s d:DataContext.

<Grid d:DataContext="{d:DesignInstance local:Person}">

Note: In the above example, the Person class is actually a faux type (fake or substitute type).  This faux type enables types that are not creatable to be created and their properties exposed as a shape.  See the below section on creating creatable types.

Usage:  So, now that the d:DataContext has shape, what can I do with it?

The shape is used by the new Binding Builder to expose the properties of the type in d:DataContext.  You can see in the below image, the four properties exposed by the Person class.

The Binding Builder is opened by clicking or right clicking on the Property Marker in the Properties Window.  The Property Marker is the icon to the right of the property name.  The Binding Builder is a GUI for editing bindings in WPF and Silverlight.  This is a super feature

The Cider Team has a great explanation of the new features on WindowsClient.net that you can read here: Setting Up Visual Studio for WPF and Silverlight Development.  There is an article and video.

You can read additional Cider Team Online material here:  WPF and Silverlight Designer for Visual Studio 2010.  We are in the process of adding many more articles.  While the material is initially geared for developers coming from other platforms to WPF or Silverlight, it has a lot of great information even for the seasoned XAML Head.  Yea, I said it.  I’m a XAML Head too and proud of it.  (LOL)

Without d:DesignInstance, d:DesignData or d:Source applied to a CollectionViewSource the Binding Builder would have no way to determine shape and provide a list of properties.

Note:  If d:DataContext is not set, but DataContext is set and has a created type assigned to it, this will also supply shape that the Binding Builder can use for listing properties.

Creating Creatable Types

 <Grid d:DataContext="{d:DesignInstance local:Person, IsDesignTimeCreatable=True}">

d:DesignInstance provides a technique for creating a non-faux type.  Setting the property IsDesignTimeCreatable to True on the d:DesignInstance MarkupExtension enables this.

Links

MSDN d:DesignInstance Walkthrough

Video showing d:DesignData and d:DesignInstance can be viewed from this blog post:  Visual Studio 2010 Beta2 Sample Data Project Templates.

The above post also has source code for sample data templates.  There four of the templates are tutorial walkthroughs on this topic and sample data.

The two .xaml files in the DesignInstance Samples folder are the walkthroughs.  You can create this project in VB.NET or C# by using one of the below templates when creating your project.

• VB WPF Application DesignData Sample – VB.NET Sample WPF Application that demonstrates consuming sample data.
• CS WPF Application DesignData Sample – C# Sample WPF Application that demonstrates consuming sample data.

Close

Hope you find d:DesignInstance and d:DesignData Sample Data in Visual Studio 2010 Beta2 a productive feature for your application development.

Have a great day,

Just a grain of sand on the worlds beaches.

Visual Studio 2010 Beta2 Sample Data Project Templates

Silverlight 3 application demonstrating Sample Data.

Displaying Sample Data in the WPF and Silverlight Designer for Visual Studio 2010 Beta2 is now very easy with the design time DesignData markup extension.

The below video is a complete tutorial for using Sample Data in your WPF and Silverlight applications.  Please take a view few minutes to view it.

The Sample Application templates have many comments in them, walking you through Sample Data.  Please take a few minutes and review the projects created by the Sample Application Templates.

Beta2 Template Information

For Beta2, you need to use these templates to consume sample data in your projects.  The reason is the winfx.targets file for was not updated with the Sample Data Build Actions in time for Beta2.

These project files have been modified to include the DesignData Build Action for the Sample Data files.  All Sample Data files must have their Build Action set to DesignData in the properties window.

These templates will not be required for the final version of Visual Studio 2010.

There are really two templates.

1.  <Language> <Platform> Empty Application – this template consists of an empty project file and the added Build Action DesignData.

2.  <Language> <Platform> Sample Application – this template consists of a sample application that has sample data files and a UserControl that demonstrates how to consume the sample data.  It also includes the added Build Action DesignData.

WPF Templates

VB WPF Application DesignData – Empty VB.NET WPF Application template with sample data support.

VB WPF Application DesignData Sample – VB.NET Sample WPF Application that demonstrates consuming sample data.

CS WPF Application DesignData – Empty C# WPF Application template with sample data support.

CS WPF Application DesignData Sample – C# Sample WPF Application that demonstrates consuming sample data.

Silverlight Templates

VB SL Application DesignData – Empty VB.NET SL Application template with sample data support.

VB SL Application DesignData Sample – VB.NET Sample SL Application that demonstrates consuming sample data.

CS SL Application DesignData – Empty C# SL Application template with sample data support.

CS SL Application DesignData Sample – C# Sample SL Application that demonstrates consuming sample data.

Sample Application Template Usage

The WPF and Silverlight sample application template creates an application complete with sample data files, entity classes, a UserControl consuming the sample data files and

xmlns:d – How To Easily Add The d: Namespace

All design time properties live in a design time namespace that is part of this schema: http://schemas.microsoft.com/expression/blend/2008.

Examples of design time properties are, d:DesignWidth, d:DesignHeight, d:DesignInstance, d:DesignData, d:DataContext, d:Source.

In order to use the d: properties you must have a xmlns declaration in your XAML.  In Visual Studio 2010 there is a very easy way to add it to a Window, UserControl or Page .xmal file.

If you select the root control, you’ll see a Root Size Mode button displayed in the lower right hand corner.  Clicking this button changes the size mode of your root container from Auto to Fixed or from Fixed to Auto.

If the d: namespace has not been added to the root control yet, clicking this button will do it for you.  In addition to the d: namespace, mc: is added and the mc:Ignorable is added also.

I have modified each of the starter templates below to automatically add this for you.  However, as you add new Windows, Pages or UserControls, those templates may not have the d: namespace declarations, so the above trick comes in handy.

Adding a New Sample Data File

Open an existing Sample Data project or Create a new project using one of the Sample Data templates.

Add a resource dictionary to the project naming it <my entity class name>SampleData.xaml.

For example:  Customer sample data file would be named, “CustomerSampleData.xaml”

The the file properties as pictured below:

Build Action: DesignData

Copy to Output Directory: Do not copy

Custom Too:  <blank>

Editing a New Sample Data File

This is an example of a single instance sample data file.

<local:Customer
    xmlns:local="clr-namespace:WPFApplication2"
    Age="21" Email="jim@hotmail.com" 
    FirstName="Jim" LastName="Smith" />

Sample Data files allow you to construct your objects in XAML.  You can set the required properties as illustrated above.

The below code illustrates how to create a collection of items in a sample data file.

<local:Customers xmlns:local="clr-namespace:WPFApplication2">
    <local:Customer 
        Age="21" Email="jim@hotmail.com" 
        FirstName="Jim" LastName="Smith" />
    <local:Customer 
        Age="22" Email="jane@hotmail.com" 
        FirstName="Jane" LastName="Smith" />
</local:Customers>

The above Customers class derives from the Generic List of Customer.

Consuming Sample Data in WPF

<!-- DataGrid Sample-->
<Grid d:DataContext="{d:DesignData Source=/SampleData/PeopleSampleData.xaml}" 
      Grid.Row="1" Margin="7">
    <DataGrid ItemsSource="{Binding}"/>
</Grid>

Sample Data is exposed through the d:DataContext design time property.  Design time properties are not compiled into your applications.

In WPF this is how you start at the root, navigate to SampleData folder and get the xaml file.

Consuming Sample Data in Silverlight

<!-- DataGrid Sample-->
<Grid d:DataContext="{d:DesignData Source=../SampleData/PeopleCollectionSampleData.xaml}" 
      Grid.Row="1" Margin="7">
    <data:DataGrid ItemsSource="{Binding}"/>
</Grid>

In Silverlight you have to ../ up to the root, then navigate to SampleData folder and get the xaml file.

Slight difference between WPF and Silverlight.

Video

PLEASE view this short tutorial video.  You will get a full and quick understanding of this great feature.

This video link supports right click, save as…

  Sample Data Tutorial Video (22 minutes)

Installing Templates Using The Download

For VB.NET copy the download to:

C:\users\<your user name>\Documents\Visual Studio 2010\Templates\ProjectTemplates\Visual Basic

Unzip the download in this folder.  You should have 4 zip files in the folder.  You are ready to go.

For C# copy the download to:

C:\users\<your user name>\Documents\Visual Studio 2010\Templates\ProjectTemplates\Visual C#

Unzip the download in this folder.  You should have 4 zip files in the folder.  You are ready to go.

Downloads

After downloading one or both template downloads, you’ll need to rename the file extension from .doc to .zip.  This is a requirement of WordPress.com.

Requires:  Visual Studio 2010 Beta2

Silverlight Templates require:  Silverlight 3

VB.NET Project Templates (61KB) (updated 10-28-2009)

C# Project Templates (58KB) (updated 10-28-2009)

Installing Templates From Within Visual Studio 2010 Beta2

The sample data templates are also be individually available on the Visual Studio Code Gallery.

To use a single template open the New Project Dialog and select the Online Templates tab at the bottom left.  You can browse all available templates or search for “design” and all the templates will be listed.

Close

Hope you use and enjoy Sample Data in Visual Studio 2010 Beta2.

Gentle reminder, please watch the above video too.

Have a great day,

Just a grain of sand on the worlds beaches.