DavideZordan.net

During the //Build conference in Anaheim the release of Windows 8 Developer preview has been announced: you can download it from this link.

To get started an impressive number of video tutorials is available in the official site of the conference: http://www.buildwindows.com/.

Check out also this great post by Michael for downloading all the Build videos in your pc.

Useful resources are available in the SDK: all the XAML Metro style app samples are available following this link.

It’s possible to install Windows 8 side by side with your operating system using a boot from VHD: I’ve followed the instructions described here by Mister Goodcat and all went smoothly.

Also available for download:

• Visual Studio 11 and .NET Framework 4.5 Developer Preview;
• RIA Services update for //build;
• Windows Azure SDK and tools update.

I’ve just published on CodePlex and the Expression gallery a new release of the Multi-Touch behaviors including these new features:

• support for Windows Phone 7.1 Beta 2 (refresh) “Mango”;
• added new property “IgnoredTypes” for excluding particular control types from the manipulations (thanks to Richie for the suggestions, feedback and code samples);
• the “Manipulation Processor” and “Inertia Processor” are now exposed by the behavior in order to enable personalized manipulations and gestures;
• new properties: CenterX, CenterY, Rotation, Scale permit to support custom gestures like “DoupleTap” zoom;
• Silverlight 4 and Windows Phone 7.1 samples updated with a simple ”DoubleTap” zoom example using the new exposed properties.

The source code and samples are available for download here.

Happy Silverlighting!

Landsat Touch for Silverlight is a new Silverlight based web application for browsing the newly published Landsat imagery available in ArcGIS on-line by Esri.

The sample comes complete with source code and uses the Silverlight/WP7 Multitouch Behavior available on Codeplex.

Happy Silverlighting!

In these days I’m receiving several questions in the Multi-Touch Behaviors forums about enabling Multi-Touch manipulations in Windows Phone applications composed by more than one page.

Today I’ve modified the available sample inserting an additional page containing an image enabled for translation, rotation, zoom and inertia via the usual “MultiTouchBehavior“:

Starting from release 0.6.1 it’s now possible to use the Behavior in different pages of the application, in this way enabling multi-touch in different elements of a Windows Phone 7 application:

<Canvas>
    <Image x:Name="_image"
        Source="{Binding SelectedPicture}">
        <interactivity:Interaction.Behaviors>
            <behaviors:MultiTouchBehavior
                    IsInertiaEnabled="True"
                    IsTranslateXEnabled="True"
                    IsTranslateYEnabled="True"
                    IsRotateEnabled="True"
                    IsScaleEnabled="True"
                    MinimumScale="30" MaximumScale="200"
                    AreFingersVisible="False"/>
        </interactivity:Interaction.Behaviors>
    </Image>
</Canvas>

As usually the sample code is available for download on http://multitouch.codeplex.com, check out the Visual Studio solution “SilverlightWP7MultiTouch.sln” which contains all necessary libraries.

Happy Silverlighting!

I’ve received several requests about the modalities of enabling multi-touch on a UI element using the Behavior available on my CodePlex project.

The traditional syntax using XAML is here:

<Image Source="Images/Desert.jpg" x:Name="image1">
    <interactivity:Interaction.Behaviors>
        <Silverlight4:MultiTouchBehavior 
            IsInertiaEnabled="True"
            IsTranslateXEnabled="True" 
            IsTranslateYEnabled="True"
            IsRotateEnabled="True" 
            IsScaleEnabled="True"
            MinimumScale="10" MaximumScale="100"
            AreFingersVisible="True"/>
    </interactivity:Interaction.Behaviors>
</Image>

What about if you want to achieve the same result using C#? Just obtain a collection of behaviors for your element and then add/remove the MultiTouchBehavior using the following syntax:

private void btnAttach_Click(object sender, RoutedEventArgs e)
{
    var behaviors = 
        System.Windows.Interactivity
        .Interaction.GetBehaviors(image1);
    behaviors.Clear();
    var mtb = new MultiTouchBehavior
    {
        IsRotateEnabled = true,
        IsScaleEnabled = true,
        IsTranslateXEnabled = true,
        IsInertiaEnabled = true,
        AreFingersVisible = true,
        MinimumScale = 20,
        MaximumScale = 200
    };
    behaviors.Add(mtb);
    mtb.Move(new Point(200, 150), 45, 100);
}

private void btnDetach_Click(object sender, RoutedEventArgs e)
{
    var behaviors = 
        System.Windows.Interactivity
        .Interaction.GetBehaviors(image1);
    if (behaviors.Count > 0)
    {
        behaviors.Clear();
    }
}

As usually the source code is available for download on the Multi-Touch CodePlex project (check out the SilverlightWP7MultiTouch Solution).

Oh, did I already say that it also works on Windows Phone 7?

Happy Silverlighting!

This year I’ll be presenting about “Silverlight, Multi-Touch and Natural User Interfaces” at the Techdays WPC 2010 conference in Milano on November, 25 2010.

The same day I’ll be also at the MVP booth, if you’re attending the conference come and say Hi!

Happy Silverlighting!

Check out this great sample available in the XNA community site.

It includes code that uses the Gestures API to enable hold, drag, tap, flick, pinch gestures.

I’ve just finished some experiments using the Windows Phone 7 emulator and the “Microsoft Surface Manipulations and Inertia Sample for Microsoft Silverlight” in order to enable Multi-Touch gestures using Blend Behaviors:

This new implementation, now available for download in the Expression Gallery, permits to enable Multi-Touch gestures (the usual translation, rotation, zoom and inertia) on separate User Controls available in the same container.

In this way you can apply distinct Multi-Touch manipulations (inertia included) to single elements using a single code in xaml:

<Grid x:Name="ContentPanel" Grid.Row="1">
  <Canvas>
      <Image Source="Images/Desert.jpg" x:Name="image1">
          <interactivity:Interaction.Behaviors>
               <WP7:MultiTouchManipulationBehavior IsInertiaEnabled="True" IsRotateEnabled="True" IsTranslateEnabled="True" IsScaleEnabled="True" MinimumScaleRadius="1" MaximumScaleRadius="720"/>
          </interactivity:Interaction.Behaviors>
      </Image>

      <Image Source="Images/Jellyfish.jpg" x:Name="image2">
          <interactivity:Interaction.Behaviors>
             <WP7:MultiTouchManipulationBehavior IsInertiaEnabled="True" IsRotateEnabled="True" IsTranslateEnabled="True" IsScaleEnabled="True" MinimumScaleRadius="60" MaximumScaleRadius="360"/>
          </interactivity:Interaction.Behaviors>
      </Image>
  </Canvas>
</Grid>

Alternatively you can use Blend inserting a reference to the project MultiTouch.Behaviors.Silverlight.WP7 and then dragging the MultiTouchManipulationBehavior from the Assets section to the  control to be touch-enabled:

Considerations

This one has been an interesting exercise in porting code written for Silverlight to Windows Phone: I had only to create a Windows Phone 7 project and add to it the code already available for the Silverlight version and all worked well quite quickly.

Limitations

At this time the behavior works only in the fixed Portrait orientation of Windows Phone: if you change to Landscape the manipulation doesn’t work well. I’ll have to investigate further and currently I don’t have a physical device to test (I’d really love to have a device to try it ).

Happy Silverlighting!

Some time ago I’ve started a Codeplex project dedicated to multi-touch, available on Codeplex at http://multitouch.codeplex.com.

The goal of this project is to provide an unified interface for Silverlight, WPF and Windows Phone 7 in order to provide multi-touch support using a visual approach via the concept of Behavior available in Expression Blend.

Recently I had the honor to welcome in the project a pillar of the Silverlight community, Laurent Bugnion, who is working on the Windows Phone 7 version of the Behavior:

Laurent has just published on his blog two awesome videos to get started with this new Behavior, and has created a specific section on his site http://www.galasoft.ch/touch to announce updates and publish content.

A special thanks to Pete Blois of the Expression Blend team for his help and contributions.

Stay tuned as we’ll be posting updates very soon

Happy Silverlighting!

I’ve already blogged about adding multi-touch support to Silverlight applications using Blend behaviors (you can also read my italian language article).

This is a powerful and simple approach which is now available in WPF using Expression Blend 4 RC and the TranslateZoomRotateBehavior.

Let’s try to build a simple example:

1 – Open Expression Blend and create a new WPF project:

 2 – Drag a Rectangle in the MainWindows.xaml:

3 – Let’s add multi-touch gestures and inertia effects to the rectangle selecting the Assets->Behavior tab and dragging the TranslateZoomRotateBehavior inside the rectangle:

4 – Let’s examine the Properties:

It’s possible to set the supported gestures (All, None, TranslateX, TranslateY, Rotate, Scale), the constrainToParentBounds modality, the Minimum, Maximum Scale and the Rotational and Translate Friction associated to the inertia.

Let’s select the constrainToParentBounds check box and run the project using the Project->Run Project menu:

Cool, Multi-touch and inertia effects are now enabled for the rectangle without writing a line of code!

And this is the generated xaml:

<Window
	xmlns="http://schemas.microsoft.com/winfx/ 2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/ 2006/xaml"
	xmlns:i="http://schemas.microsoft.com/expression/ 2010/interactivity"
	xmlns:ei="http://schemas.microsoft.com/expression/ 2010/interactions"
	x:Class="WpfApplication1.MainWindow"
	x:Name="Window"
	Title="MainWindow"
	UseLayoutRounding="True"
	Width="640" Height="480">

	<Grid x:Name="LayoutRoot">
		<Rectangle Margin="149,106,133,191" Stroke="Black">
			<i:Interaction.Behaviors>
				<ei:TranslateZoomRotateBehavior ConstrainToParentBounds="True"/>
			</i:Interaction.Behaviors>
			<Rectangle.Fill>
				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="Black" Offset="0"/>
					<GradientStop Color="#FF8F98CA" Offset="1"/>
				</LinearGradientBrush>
			</Rectangle.Fill>
		</Rectangle>
	</Grid>
</Window>

The source code of the project is available for download here.