Index - Important WPF concepts & features

Recently, I came across a scenario where I had to explain the WPF features to one person. I didn't get a common place where I can see a list of all WPF features. Now I would really like to call this as WPF cheat sheet where I can brush up my WPF skills.

• WPF basics
  • Architecture of WPF
  • Designer / Developer /Integrator interaction workflow.
  • Vector graphics
  • Declarative XAML & Compiled BAML
  • WPF build sequence.
  • Rendering - Hardware and Software
• Application models
  • XBAP - WPF app in Browser
  • Paged navigation and Window applications
• New concepts
  • Dispatcher
  • Dependency property
    • Precedence in value calculation
  • Attached properties
  • Routed Events
  • Attached events & usage example.
• User interface
  • Visual tree and logical tree
  • Controls layout
    • Panels
    • MeasureOverride and ArrangeOverride
    • Content model
  • Controls class hierarchy
  • Look-less custom controls
• Databinding
  • Change notification using INotifyPropertyChanged
  • ObservableCollection
  • Binding markup extensions
• Commands
  • Routed Commands
  • ICommand
  • Command Binding
• InputBindings
• Triggers
  • Property Trigger
  • Data
  • Event trigger
• Resources
  • Resource Dictionary
  • Pack uri
• Style
• Templates
  • Control Template
  • Data template
  • ItemsPanelTemplate for ItemsControl
• VSM - Visual State Manager
• Graphics
  • Bitmap effects
  • 2D Transforms
  • Pixel shaders
  • Shape
  • Path
  • Geometry
  • Brushes & Opacity
  • Opacity Mask
  • InkCanvas & InkPresenter
• Animation
  • Easing function for animation
• Viewport3D
  • 3D transforms
• Documents
  • Fixed document
  • Flow document
  • XPS
• Patterns
  • MVVm
  • Composite application guidance Prism
  • Common code base for WPF and Silverlight
• Localization.
  • BAML
  • Using Binding extension
• Printing documents
• Interoperability
  • ElementHost
  • WindowsFormsHost
• Performance optimization
• Tools
  • Snoop
  • WPF Inspector
  • UISpy
  • isXPS
  • WPF Performance suit
    • Perforator
    • Visual Profiler
• Future of WPF
  • WPF XAML in Windows 8

The sad thing I could forecast is, as the WinRT model becomes popular and available in different platforms such as WinRT tablets, surface, windows mobile, Windows 8, future OS and other devices etc...,WPF will decline to desktop computers and rest in history. After naming the tablet as Surface, it seems Microsoft is trying to bring single platform for all devices under the Surface brand same as Google did using Android. Hope you got why I wrote this index post.

Deploying applications in Microsoft Surface SP1

The surface has a launcher application which is launching applications registered with the Surface Shell.Launcher can be activated from any of the 4 access points located at corners of surface.

Registering Microsoft Surface Application
To register an application with Microsoft surface shell we have to copy the application’s xml definitions file into the %PROGRAMDATA%\Microsoft\Surface\Programs folder.This is the folder where surface looks for application definitions.It maintains a list of applications listed here to load on demand by launcher.

Application’s definition file is a simple xml file which describes the application.Common elements included in the definition are

Title : Title  of the application
Description:Description about application
Executable: Path to exe.Path need to be absolute.
IconImageFile:Icon of application.
Preview: Preview images

A sample xml file

<?xml version="1.0" encoding="utf-8" ?>
<ss:ApplicationInfo
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns:ss="http://schemas.microsoft.com/Surface/2007/ApplicationMetadata">
  <Application>
    <Title>Test Surface App</Title>
    <Description>This is a test Surface application.</Description>
    <ExecutableFile>%ProgramData%\Microsoft\Surface\Programs\SurfaceApplication1.exe</ExecutableFile>
    <Arguments></Arguments>
    <IconImageFile>%ProgramData%\Microsoft\Surface\Programs\Resources\icon.png</IconImageFile>
    <Preview>
      <PreviewImageFile>%ProgramData%\Microsoft\Surface\Programs\Resources\iconPreview.png</PreviewImageFile>
    </Preview>
  </Application>
</ss:ApplicationInfo>

Changing the Orientation or Surface application

Surface supports orientation of applications to 2 sides according to the seating position of the user.If we are developing applications we have to rotate our applications our self.Its done by checking the static property Microsoft.Surface.ApplicationLauncher.Orientation.
There is an event called Microsoft.Surface.ApplicationLauncher.OrientationChanged which fires when the user changes his side by clicking on the access buttons at the corresponding side.

Setting the Orientation
We need to have a RotateTransform in our application whose Angle ,we are going to change according to the Orientation.Normally we place the RotateTransform in the root element of the SurfaceWindow.

<s:SurfaceWindow x:Class="SurfaceApplication1.SurfaceWindow1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="http://schemas.microsoft.com/surface/2008"
    Title="SurfaceApplication1">
  <Grid Name="MenuGrid">
    <Grid.LayoutTransform>
      <RotateTransform x:Name="OrientationTransform" Angle="0"/>
    </Grid.LayoutTransform>
    <TextBlock Name="OrientationTextBox" HorizontalAlignment="Center"/>
   </Grid>
</s:SurfaceWindow>

Subscribe to the ApplicationLauncher.OrientationChanged event and set the Angle as per the ApplicationLauncher.Orientation property.

private void AddActivationHandlers()
{
    // Subscribe to surface application activation events
    ApplicationLauncher.ApplicationActivated += OnApplicationActivated;
    ApplicationLauncher.ApplicationPreviewed += OnApplicationPreviewed;
    ApplicationLauncher.ApplicationDeactivated += OnApplicationDeactivated;
    ApplicationLauncher.OrientationChanged += ApplicationLauncher_OrientationChanged;
}
void ApplicationLauncher_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
    OrientationTransform.Angle = ApplicationLauncher.Orientation == UserOrientation.Top ? 180 : 0;
    OrientationTextBox.Text = ApplicationLauncher.Orientation.ToString();
}

Using Triggers to change the Orientation or Surface application based on ApplicationLauncher.Orientation.

Its clear like water that we can’t use EventTrigger to set the Angle of Transform.Another method is PropertyTrigger.Since the ApplicationLauncher.Orientation is not an AttachedProperty we can’t use that method too.Simply saying we have to write code in order to achieve.I am searching for a method which does the same using xaml alone.If anybody finds,please share with me.

Generating and Printing Surface IdentityTag

Tags support is the most important feature in Microsoft Surface.Tags enable our application to recognize objects through surface.As you know there are 2 types of tags.Byte tag and identity tag.So before placing objects on the surface to recognize we have to print the tag and stick on the bottom part of the object.Then only surface can identify the tag value through its infrared sensing mechanism.There are 3 ways to visualize the tags.One is using the command line tool GenTag.exe and another using it’s visual tool GenTagUI.exe and last using our own programs which make use of the class IdentityTagGenerator

Using IdentityTag Image Generator
Tool is located at

[Install drive]:\Program Files\Microsoft SDKs\Surface\v1.0\Tools\GenTag\GenTag.exe

Syntax :
GenTag.exe <Series> <Value> <FileName.png> [/dpi:number]

Value and Series are in Hex.This tool outputs the tag as png image.Later we can print that image.Dots Per Inch (dpi) is optional.

Using IdentityTag printing tool
Surface now includes a tool in it’s sdk which helps us to generate and print IdentityTags.You can locate the program in start menu itself

Programs->Microsoft Surface sdk 1.0 sp1->Tools->Identity Tag Printing Tool

or in the location

[Install drive]:\Program Files\Microsoft SDKs\Surface\v1.0\Tools\GenTag\GenTagUI.exe

There is nothing to explain about using the tool I think.Try yourself.

Using IdentityTagGenerator class
Microsoft has provided API to visualize the tags and later we can save or print them.The entry to tag visualization API is IdentityTagGenerator.That class contains 2 static methods for getting tag in it’s actual form.

• Image GenerateTag(long series,long value) : As its signature implies, it returns the tag image according to parameters series and value.There is an overload available which takes dpi as parameter and returns image according to that.
• RenderTag(long series,long value,Point point,Graphics g) :Draws identity tag on the Graphics object.Mainly targeted to be used in Windows forms applications.Also this helps in distributing tags through asp.net applications.

In the first method we can set the returned Image object as source of image control in our application.The second method uses Graphics object and that is available in OnPaint methods or we can create it using the Graphics class.

The usage is straight forward.Seems there is no need to post a sample.

NB: Printed tag should be exactly 1.125 inches square in order to get detected by Surface.

Introducing Surface SP1

The first Service pack for Microsoft surface has released on May 10.It has got significant changes comparing to the older older.Here are the main features I noticed.

1. New controls
   1. ElementMenu
   2. LibraryBar
2. Tagged object routing
3. Improved contact visualization
4. Improved access points

More details here
http://blogs.msdn.com/surface/archive/2009/05/11/service-pack-1-officially-released-today.aspx
http://arstechnica.com/microsoft/news/2009/05/microsoft-surface-sp1-adds-new-features.ars

As a developer, I am more interested in the new controls and will be posting about them later.

Identifying Finger Tag and Blob in Surface using Contacts class

If you are not much familiar with Microsoft surface just have a look here in my another blog and get start in Surface development from here.

There is an attached event called ContactDown in the class Contacts.We can subscribe to that in any visuals and process according to that.

<s:SurfaceWindow x:Class="SurfaceApplication.SurfaceWindow1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:s="http://schemas.microsoft.com/surface/2008">
    <Grid>
        <TextBlock>Place contact here</TextBlock>
        <Rectangle Grid.Row="1" Fill="#0fff0000"
                 Width="100"  Height="100" s:Contacts.ContactDown="Rectangle_ContactDown" />
    </Grid>
</s:SurfaceWindow>

Code behind

private void Rectangle_ContactDown(object sender, Microsoft.Surface.Presentation.ContactEventArgs e)
{
    if (e.Contact.IsTagRecognized)
    {
        switch(e.Contact.Tag.Type)
        {
            case Microsoft.Surface.Presentation.TagType.Byte:
            MessageBox.Show(string.Format("Byte tag identified value={0}", e.Contact.Tag.Byte.Value));
            break;
            case Microsoft.Surface.Presentation.TagType.Identity:
            MessageBox.Show(string.Format("Identity tag identified value={0}", e.Contact.Tag.Identity.Value));
            break;
        }
        return ;
    }
    if (e.Contact.IsFingerRecognized)
    {
        MessageBox.Show("Finger contact identified");
    }
    else
    {
        MessageBox.Show("Blob identified");
    }
}

This code just shows a message box. Processing the contacts such as showing something upon placing a contact and all will be discussed later in the post ‘Using TagVisualizer and TagVisualization’.

Surface Application Development using Simulator and VisualStudio

If you are not familiar with the Microsoft surface just have a look here.

Before starting the development we have to set up the environment.The prerequisites include the Vista with SP1 and DirectX sdk.You need to have a good graphics card and monitor which has enough resolution too.Around 1280 × 960 or widescreen 1440 x 900.Surface simulator has a resolution of 1024x768.

Once you install these softwares including surface sdk start the simulator.This is must if you need to see the output in the simulator.If you are running a surface program without simulator running it will show like a normal application.You wont get contacts and tag recognition.Working with simulator is another big topic and will be writing a separate post later.

Here is the screen shot of the simulator with small descriptions about the buttons.

1. Contact selector : Used to select single object or multiple based on an area.
2. Finger : Simulates a normal finger touch in the actual surface.We can do operations such as drag ,resize,slide etc
3. Resizable blob : Represents big objects in real world such as a glass a hand etc...
4. Byte tag and value : A tag value representation.The size of this tag is 8 bits.To place the tag click on the tag image set value and place it in the screen.The underlying program can then recognize this tag and its value.
5. Identity tag its series and value : Same as byte tag.But the size is huge.
6. Clear contacts : To clear all the contacts in the surface.
7. Hide contacts : Hides all contacts.

Now its time to start our favorite Visual Studio 2008.When you select new project you can see a new category Surface and inside that there are 2 templates.One is Surface Application (WPF) and Surface Application (XNA).As names implies they are for wpf and xna respectively.Click on WPF application in which we are interested

The in built surface template contains a SurfaceWindow1.xaml and .cs derived from SurfaceWindow which is the replacement for Window in normal WPF application.The resources folder contains some images which are icons and background of the SurfaceWindow.

SurfaceApplication1.xml contains the configuration of the application or metadata which helps the surface to identify the same.

Running surface application in simulator

As said earlier when we run the application from visual studio while the simulator is running in background,the application will get loaded in the simulator.Otherwise it will run as normal application.

Hit F5 in Visual Studio to start running and see the application in simulator.Its empty now with a grey background.

Adding controls into Surface WPF application

You can add controls such as button,textbox etc to the surface application just like ordinary wpf application.You can write code behinds, style them ,template them as you want.But here keep in mind that those controls should be from Surface library.That means Button will be now SurfaceButton,TextBox becomes SurfaceTextBox etc…Explore the Microsoft.Surface.Presentation.Controls namespace in Object browser to get the full list of surface enabled controls.

This gives a basic insight to the surface programming.But yet we haven’t used any of the special features in surface such as object recognition.The next post will be discussing tag identification and processing.