Lester's WPF blog

WPF Touch Basics

2009-12-07T19:35:00Z

In my previous posts, I briefly described the new WPF Touch feature. Was planning to get a more detailed post out but just couldnt get the time. Thankfully, Drake Campbell, one of our devs in Microsoft, sent me the following post on the basics of WPF Touch. Its a nice read.. So get started....

WPF Touch Basics

Things to know before we start

Understanding how RoutedEvents work might provide additional insight for this tutorial. http://msdn.microsoft.com/magazine/cc785480.

What is Touch? Essentially it is your finger as the mouse. You can think of Touch as any action involving a single finger. Inertia effects, dragging and throwing something, are not included as part of Touch. Those are covered in Manipulations. Touch events include: TouchDown, TouchUp, TouchMove, TouchEnter, TouchLeave, and other properties for checking if controls have touch focus.

Goals

The goal for this tutorial will be to create a small sample that will illustrate the use of the Touch events by using them to move a rectangle around.

Let’s Get started

Create a new WPF Application in VisualStudio2010 Beta2 or later and give it the name TouchSample.

Add a new User Control called TouchableThing to the project. In the TouchableThing.xaml file replace the Grid with a Canvas. We use a Canvas because the default layout is more desirable. Then add a rectangle to the Canvas. See Fig 1.

Fig 1.

<UserControl x:Class="TouchSample.TouchableThing"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="300">

<Rectangle

Name="BasicRect"

Width="200" Height="200"

Fill="Orange" Stroke="Orange" StrokeThickness="1"

IsManipulationEnabled="true"/>

</Canvas>

</UserControl>

We give the Rectangle a name so we can access it in the code behind and we make it large enough to hit test using a finger. Notice the last property being set on the Rectangle, IsManipulationEnabled. Setting this property to true enables the Rectangle, or any control with the property set to true, to bubble Touch events. Since the Touch events are bubbled they do not have to be handled by the control that has the property set to true. The bubbling of the events is not as important when using Touch as it is when using Manipulations.

Now we have to add event listeners to some Touch events. I could have done this from xaml but I chose to do it in the code behind file. The decision was arbitrary. In the TouchableThing.xaml.cs file find the constructor and add event listeners to the TouchDown and TouchMove events. Using tab-completion in the editor will auto generate names and stubs for you. See Fig 2.

Fig 2.

public partial class TouchableThing : UserControl

{

private Point lastTouchDownPoint;

public TouchableThing()

{

InitializeComponent();

this.TouchDown += new EventHandler<TouchEventArgs>(TouchableThing_TouchDown);

this.TouchMove += new EventHandler<TouchEventArgs>(TouchableThing_TouchMove);

}

private void TouchableThing_TouchDown(object sender, TouchEventArgs e)

{

}

private void TouchableThing_TouchMove(object sender, TouchEventArgs e)

{

}

I added a variable for storing the point where the user was last detected touching down to make life easier. It is also interesting to note that all the TouchEvents use the same type of event args.

Now for the fun part. We have to decide on how we want to manage the coordinate space between the parent and the rectangle. We want to move the rectangle by dragging it with our finger. Unfortunately physically setting the location of something in WPF is not considered best practice. We will use a TranslationTransform. We could also use a Matrix, but I think the TranslationTransform is easier. Either one is fine. Since we avoid simply moving the object to a new location we will have to do some point translations . If you have positioned the rectangle in a location other than the default on the Canvas, then you will also have to account for that in the value of this.lastTouchDownPoint. Since the default position is (0,0) this is not a problem. See Fig 3.

Fig 3.

private void TouchDownVersion2(object sender, TouchEventArgs e)

{

this.lastTouchDownPoint = e.GetTouchPoint(this.BasicRect).Position;

}

So what we have done here is get the touch point with respect to the Rectangle. The GetTouchPoint method will perform the needed translations into the coordinate space of the target. This gives us a point in a coordinate space where the top left corner of the rectangle is 0,0. Essentially this is the position of the finger inside the rectangle. We will take advantage of this in the TouchMove event handler. See Fig 4.

Fig 4.

private void TouchableThing_TouchMove(object sender, TouchEventArgs e)

{

Point currentPoint = e.GetTouchPoint(this).Position;

double diffX = currentPoint.X - this.lastTouchDownPoint.X;

double diffY = currentPoint.Y - this.lastTouchDownPoint.Y;

if (Math.Abs(diffX) > 0 || Math.Abs(diffY) > 0)

{

TranslateTransform transform = new TranslateTransform(diffX, diffY);

this.BasicRect.RenderTransform = transform;

}

This event is similar to the MouseMove event in that it is called repeatedly until the TouchUp event is raised. The first thing we want to do is get the current location for the Touch event with respect to the control handeling the event. This is not intuitive since we captured the mouse point with respect to the rectangle in the TouchDown event. The reason this works is we are simply tracking the change in movement. We want to put the rectangle exactly where the user’s finger is, but we have to account for where the user’s finger went down inside the rectangle. This is taken care of by the subtraction. The if statement is just checking if there were any changes in the x or y directions before doing any work. This is not the most performant code but is illustrates how to use the TouchEventArgs at a basic level.

Almost done. All we have to do is add the TouchableThing to the Window1.xaml. See Fig 5.

Fig 5.

<Window x:Class="TouchSample.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"

xmlns:custom="clr-namespace:TouchSample">

<custom:TouchableThing />

</Window>

Press F5 and enjoy. Stay tuned for the Manipulation walkthrough. We will take the same rectangle and allow it to be scaled, rotated, translated, and inertial; using the Manipulation events.

Share this post

Concluding "New WPF Features" Series

2009-11-25T14:07:00Z

This is the last part of a series on New WPF Features

The list of features covered here as part of this series:

· MultiTouch

· DatePicker\Calendar

· Datagrid

· Visual State Manager (VSM)

· Easing Functions

· JumpLists

· Pixel Shader 3 support

· Cached Composition

· Full trust Xbap Deployment

· Binding to Dynamic Objects

· Custom Speller Support

· Script Interop in Xbap

· UIA Virtualization

· UIA SynchronizedInputPattern

· Input Key\Gesture Binding

· CaretBrush

· Updated File Dialogs

XAML 2009

· Built-in Types

· Node Loop Flexibility

· Event Handling

· Named Object References

· Generics Support

· FactoryMethod\x:Arguments

New WPF Features: MultiTouch

2009-11-24T13:42:00Z

This is part of a series on New WPF Features

WPF supports multitouch API’s in .NET 4. You can have touch and manipulation operations on all the UI elements.

For creating a touch based app, you would need to subscribe to the events:

· TouchDown

· TouchEnter

· TouchLeave

· TouchMove

· TouchUp

The TouchEventArgs class has some helpful API

· GetTouchPoint - Returns the current position of the touch device relative to the specified element.

· TouchDevice - Gets the device that generated the event.

· Device - Gets the input device that initiated this event. (Inherited from InputEventArgs.)

To add manipulations, you first need to set the bool IsManipulationEnabled property. Once done you can now listen to the manipulation events

· ManipulationStarted

· ManipulationDelta

· ManipulationStarting

· ManipulationCompleted

You can restrict the manipulations that are allowed by specifying the ManipulationMode in the Starting event.

	Member name	Description
	None	Manipulation events do not occur.
	TranslateX	A manipulation can translate an object horizontally.
	TranslateY	A manipulation can translate an object vertically.
	Translate	A manipulation can translate an object.
	Rotate	A manipulation can rotate an object.
	Scale	A manipulation can scale an object
	All (default)	A manipulation can scale, translate, or rotate an object and can occur with one point of input.

Next you listen to the delta in the manipulations and perform the necessary transform, rotation,…

The manipulationDeltaEventArgs provides the DeltaManipulation property that you can use for

Name	Description
Expansion	Gets or sets the amount the manipulation has resized in .
Rotation	Gets or sets the rotation of the manipulation in degrees.
Scale	Gets or sets the amount the manipulation has resized as a multiplier.
Translation	Gets or sets the linear motion of the manipulation.

A sample app demonstrating the usage can be found here

Touch design guidelines can be found here

Share this post

TestAPI 0.4 Released

2009-11-23T18:19:00Z

TestAPI has come out with a new release V0.4. Please do check it out.

So what’s new:

Deep Object Comparison utility
Text String Generation for random interesting combination of strings
A Leak Detection API that enables the user to determine if the application is leaking
Enhanced Combinatorial Variation Generation – supports tagged and weighted values

New WPF Features: DatePicker\Calendar\VSM\Datagrid

2009-11-23T16:18:00Z

This is part of a series on New WPF Features

These controls have been part of the WPF toolkit on Codeplex. They are now making their way into the framework.

You can get the usage details from the codeplex site

WPF Toolkit: DataGrid Feature Walkthrough

WPF Toolkit: Visual State Manager Overview

WPF Toolkit: DatePicker and Calendar Walkthrough

Have fun

Share this post

XAML 2009 Features: FactoryMethod\Arguments

2009-11-20T15:54:00Z

This is part of a series on New WPF\XAML Features

Another new feature in XAML 2009 is the possibility of creating objects using the non-default constructors. The keyword here is x:Arguments

So creating a person object with a constructor requiring Name\Age could be written in XAML as

<local:Person>

<x:Arguments>

<x:String>Tom</x:String>

<x:Int32>21</x:Int32>

</x:Arguments>

</local:Person>

Next interesting feature is using FactoryMethods… the keyword here is x:FactoryMethod

<p:Guid x:FactoryMethod='NewGuid'/>

You could also combine x:Arguments with FactoryMethod

<coll:List x:Key='list' x:TypeArguments='x:String' x:FactoryMethod='local:Factory.CreateStringList'>

<x:Arguments>

<x:String>Mickey,Donald</x:String>

</x:Arguments>

</coll:List>

Sample app showing usage is attached

Note that XAML 2009 features work only for loose XAML in WPF.

Share this post

XAML 2009 Features: Generics Support

2009-11-19T13:34:00Z

This is part of a series on New WPF\XAML Features

XAML 2009 supports generics J .. In previous releases, if you needed to have an observableCollection for databinding you would probably have written code like

class PersonCollection:ObservableCollection<Person>{}

<l:PersonCollection>

</l:PersonCollection>

In this release, you can now write this as

<local:Person Name='Tom' Age='21' />

</ObservableCollection>

…

Notice the use of TypeArguments to specify the collection type (Person in this case). It is used to pass the required constraints for a generic type

Lets go for some more examples. Simple Dictionary with the key\value pair being strings

<StackPanel.DataContext>

<coll:Dictionary x:TypeArguments='x:String, x:String' xmlns:coll='clr-namespace:System.Collections.Generic;assembly=mscorlib'>

<x:String x:Key='One'>1</x:String>

<x:String x:Key='Two'>2</x:String>

</coll:Dictionary>

</StackPanel.DataContext>

Next we have a slightly more complicated dictionary with an object as the key\value pair. Interesting to note here is that Key

<StackPanel.DataContext>

<coll:Dictionary x:TypeArguments='p:Object, p:Object' xmlns:p='clr-namespace:System;assembly=mscorlib'>

<x:Key>

</x:Key>

</Point>

<x:Null x:Key='three' />

</coll:Dictionary>

</StackPanel.DataContext>

And finally a nested dictionary sample

<StackPanel.Resources>

<coll:Dictionary x:TypeArguments='p:Object, coll:Dictionary(p:Object, p:Object)' x:Key='NestedItems'>

<coll:Dictionary x:Key='Dictionary1' x:TypeArguments='x:Object, x:Object'>

<x:String x:Key='One'>1</x:String>

<x:Key>

</x:Key>

</Point>

</coll:Dictionary>

</StackPanel.Resources>

Sample app showing the usage is attached.

Note that XAML 2009 features work only for loose XAML in WPF.

Share this post

New WPF Features: SynchronizedInputPattern

2009-11-18T15:05:00Z

This is part of a series on New WPF Features

In previous releases, sending input through automation was tricky mainly because the app and the automation processes were separate. The app state could change between the time the input was sent and received. As an example, suppose you need to click something but before the click happens, the elements move (maybe due to resize …). In this case, some other element could get the mouse input.

To overcome this problem, we have introduced the SynchronizedInputPattern. Now the framework sees where the input is going and if its not the intended target, the input is cancelled. The sender is notified whether the input operation was successful or not and based on it can make a decision to try again.

So coming to the API, to determine if an element supports the pattern we get the property value

buttonElement.GetCurrentPropertyValue(AutomationElement.IsSynchronizedInputPatternAvailableProperty);

Next, you need to hook the events to the element so that we are notified of the operations success

InputReachedTargetEvent	Identifies the event raised when the input was received by the element currently listening for the input.
InputReachedOtherElementEvent	Identifies the event raised when the input was received by an element other than the one currently listening for the input.
InputDiscardedEvent	Identifies the event raised when the input was discarded by WPF.

Once the events are hooked, you can start listening to the specific SynchronizedInputType

SynchronizedInputType.KeyUp,

SynchronizedInputType.KeyDown,

SynchronizedInputType.LeftMouseUp,

SynchronizedInputType.LeftMouseDown,

SynchronizedInputType.RightMouseUp,

SynchronizedInputType.RightMouseDown

syncInputPattern.StartListening(SynchronizedInputType.MouseLeftButtonDown);

One thing to note is that the event fires only once. So if you need to send the input again, you will need to call the StartListening API again.

You can cancel listening by calling the Cancel() API

Sample app which shows the usage is attached. The app clicks on different controls simulating incorrect input received. The console output describes the operations being performed.

******Goal is to Click the Button******

-- Click on the List

---- Input was Discarded - Try Again clicking On TextBox nested in Button

-- Click on the Textbox inside Button

---- Input Reached Element other than Target - Try Again clicking on Button

-- Click on the Button

---- SUCCESS: Input Reached Target

Share this post

New WPF Features: PixelShader3 Support

2009-11-17T15:28:00Z

This is part of a series on New WPF Features

Previously WPF only supported Pixel Shader 2.0 (PS 2.0). For this release, we added PS 3.0 support providing the benefits of more instructions, registers ....

The usage is similar as before. However, we have provided an API to determine if the shader can be run on the machine. The API’s are self-explanatory

· RenderCapability.IsPixelShaderVersionSupported(majorversion,minorVersion)

· RenderCapability. IsPixelShaderVersionSupportedInSoftware (majorversion,minorVersion)

· RenderCapability. MaxPixelShaderInstructionSlots(majorversion,minorVersion)

(snapshot of app on a PS2.0 supported machine)

Sample project attached.

Share this post

New WPF Features: UIA Virtualization

2009-11-16T16:06:00Z

Pre .NET 4, from a UI automation perspective, virtualization was not a good story. There wasn’t a standard way of dealing with virtualized controls, since some would expose only the visual elements while the others would create an automation tree that had every element. To fix this problem, in .NET 4, we have introduced 2 new UIA patterns: ItemContainerPattern\VirtualizedItemPattern

ItemContainerPattern enables searching the whole tree irrespective of it being virtualized.

testObject.GetCurrentPattern(ItemContainerPattern.Pattern)

Search is done using the FindItemByProperty function which has 3 parameters

- AutomationElement startAfter: element to start search from. Setting to null would mean start from beginning

- AutomationProperty: Property to be used for search. Setting to null corresponds to match all properties

- Object value: Property value

Once you find the element, you can then determine if it’s virtualized by querying the IsVirtualizedItemPatternAvailable.

(bool)item.GetCurrentPropertyValue(AutomationElementIdentifiers.IsVirtualizedItemPatternAvailableProperty);

So you have the virtualized item and would like to de-virtualize it.

VirtualizedItemPattern vpattern = item.GetCurrentPattern(VirtualizedItemPattern.Pattern) as VirtualizedItemPattern;

vpattern.Realize(); // de-virtualize the object

You can also query if the ItemContainerPattern is available using the property IsItemContainerPatternAvailable.

Sample project showing usage is attached.

Share this post

XAML 2009 Features: Named Object References

2009-11-13T15:07:00Z

This is part of a series on New WPF\XAML Features

In previous releases, if you needed to reference a named object, your XAML would look something like

<Label Target='{Binding ElementName=firstNameBox}' >_Target</Label>

<TextBox Name='firstNameBox'>Uses Binding</TextBox>

In the current release (.NET 4), we introduced a built in markup extension x:Reference. This would enable referencing a named object. The above XAML can now be written as

<Label Target= '{x:Reference secondNameBox}'>_Second Target</Label>

<Label Target= 'thirdNameBox' >_Third Target</Label>

The references look both forward as well as backwards

Another possibility working with named objects is to create a markupextension that calls into IXamlNameResolver to resolve a name. One scenario is having method calls in XAML like the below. We covered this is a previous post written by Shree.

<School.Class>

</Students>

</School.Class>

<!--<School.Topper>

</School.Topper>-->

</School>

A simple project showing the usage of x:Reference is attached

Note that XAML 2009 features work only for loose XAML in WPF.

Share this post

New WPF Features: Updated File Dialogs

2009-11-12T15:08:00Z

This is part of a series on New WPF Features

In previous releases, WPF open\Save dilogs had the XP style even on Vista. Some workarounds were to use the Vista bridge library or use the winforms dialogs. For this release we fixed this issue. You now get the OS style dialogs :) ... Usage wise its the same, you get the updated behavior for free ... The pic below shows the difference.

Share this post

XAML 2009 Features: XAML Event handling

2009-11-11T15:14:00Z

[This is part of a series on New WPF\XAML Features]

In previous releases, when loose XAML had events in it and was loaded it would crash. In V4, there are 2 options to avoid this crash.

à On loading events are searched on the root object of the XAML file. Suppose you had the loose XAML like the below

<local:MyStackPanel

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:local ="clr-namespace:DemoApp;assembly=DemoApp">

<Button Click="Button_Click" >Date (Event on Root)</Button>

As long as the root object (in this case MyStackPanel) can be found, the event will be hooked and will work fine without a crash

à The second approach is to define a MarkupExtension that returns a delegate and assign this to the event. So you could have XAML like the below

The sample project using the CoreMVVM library is attached.

Note that XAML 2009 features work only for loose XAML in WPF.

Share this post

New WPF Features: Cached Composition

2009-11-10T16:25:00Z

This is part of a series on New WPF Features

One of the big improvements in 4.0 is the Cached Composition feature in graphics. This feature enables caching a live UIElement as a bitmap, which enables quick rendering of the element as a bitmap. The UIElement is user interactive and hence will respond to keyboard input, mouse clicks,… Also, transforms, effects,.. which operate on top will not cause the cache to regenerated resulting in better performance. Previously, it was common to use RenderTargetBitmap for this purpose. However, this would be at the cost of interactivity.

Lets jump into usage. You have the BitmapCache and the BitmapCacheBrush classes. The former is useful in rendering a complex UIElement while the latter facilitates better reuse of a cached element.

Usage of BitmapCache is shown below. RenderAtScale is helpful for zoom scenarios since it a cache which is multiple of the original bitmap size. Note that changing the UIElement subtree or these properties (EnableClearType\RenderAtScale) will cause the cache to be regenerated.

<Canvas.CacheMode>

</Canvas.CacheMode>

BitmapCacheBrush is useful when you need to paint the same content on multiple elements. A sample usage is below.

<Grid.Resources>

<Image.CacheMode>

</Image.CacheMode>

</Image>

</Grid.Resources>

...

Got a couple of apps in place to show the usage. The one on the left shows the zoom in action while the second app applies the cacheMode on Viewport2dVisual3D.

The code is attached. Have fun

Share this post

XAML 2009 Features: Node Loop flexibility

2009-11-09T15:57:00Z

[This is part of a series on New WPF\XAML Features]

So by now most of you must have noticed the System.Xaml dll as part of your .NET 4 WPF projects. It’s a well componentized XAML stack that provides a lot of flexibility working with XAML. So at the core we a System.Xaml.XamlReader and XamlWriter which provide the base implementation and definition for a reader and writer. XamlXmlReader is a reader that reads in XAML and produces a XAML node stream. This stream is then consumed by a ~~XamlXmlWriter~~ XamlObjectWriter to produce the object graph. Similarly for the Save path, you have the XamlObjectReader and XamlXmlWriter.

So the Load Path looks like

XAML à XXR à Node Stream à XOW à Object Graph

The Save path would look like

Object Graph à XOR à Node Stream à XXW à XAML

Prior to .NET 4, you didn’t have access to the internals; the access points were XamlReader.Load and XamlWriter.Save in PresentationFramework. In .NET 4, we provide access to the node stream and you could manipulate this node loop. There are 7 XamlNodeType’s that you need to look out for in this node loop.

An example of a node loop could be filtering out events and unknown elements. Wouldn’t that make a nice feature in XamlPadX J..

The code below shows how we could replace the Window in the Xaml passed with a Page.

XmlReader xmlReader = XmlReader.Create(input);

XamlXmlReader reader = new XamlXmlReader(xmlReader, System.Windows.Markup.XamlReader.GetWpfSchemaContext());

XamlObjectWriter writer = new XamlObjectWriter(reader.SchemaContext);

while (reader.Read())

{

switch (reader.NodeType)

{

case XamlNodeType.StartObject:

if (!reader.Type.Name.Equals("Window"))

writer.WriteNode(reader);

else

writer.WriteStartObject(new XamlType(typeof(Page), reader.SchemaContext));

break;

case XamlNodeType.EndObject:

case XamlNodeType.StartMember:

case XamlNodeType.EndMember:

case XamlNodeType.Value:

case XamlNodeType.GetObject:

case XamlNodeType.NamespaceDeclaration:

writer.WriteNode(reader);

break;

}

Attached is a project that shows how events\unknown elements could be filtered.

Share this post