Expression Blend Preview for Silverlight 5 Update available

A new version of Expression Blend for Silverlight 5 is now available for download with these features:

  • Expiration date – June 30, 2013;
  • Go-live license;
  • updated Silverlight 5 SDK.

Check out the original post by the Expression Blend Team and download the new bits from here.

Happy Silverlighting!

Using the Multi-Touch Behavior in a Windows Phone 7 Multi-Page application

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!

Windows Phone 7, Multi-Touch Behaviors and the Surface samples for Silverlight

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

WP7BehaviorExpression

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:

Multi-Touch Behavior Blend

 

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!

Windows Phone 7 Multi-Touch Behavior videos #wp7dev

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!

Enabling Multi-touch gestures in WPF using Expression Blend 4 RC and the TranslateZoomRotate behavior

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.

Multi-Touch enabling Silverlight Simon using Blend behaviors and the Surface sample for Silverlight

I have already blogged about using Blend behaviors to add Multi-Touch gestures and inertia effects to a generic Silverlight user control, so I wanted to use the same approach to add the same behaviors to the CodePlex project Simon.

I think that inserting multi-touch manipulation effects to a Silverlight application using Blend behaviors is an elegant way which makes the code very clear and readable.

To start you need to download the Multi-touch manipulation and inertia behavior (wow, more than 7000 downloads, great feedback! :)), which I already published on the Expression site.

This behavior is based on the code available in the Microsoft Surface Manipulations and Inertia Sample for Microsoft Silverlight, in my opinion the best example available for using multi-touch in Silverlight at this time.

The solution available contains a project named “MultiTouch.behaviors.Silverlight” which must be included in your application to enable the multi-touch functionalities.

To make the Silverlight/Blend Behavior work with Simon I’ve modified some code relative to the Zoom gesture in order to use a ScaleTransform (check out the source code on CodePlex: http://simon.codeplex.com).

To use the Behavior in XAML just add a reference to the “MultiTouch.Behaviors.Silverlight” project and use the following code:

<UserControl x:Class="SimonSilverlight.MainPage"
....
    xmlns:interactivity="clr-namespace:System.Windows.Interactivity; assembly=System.Windows.Interactivity"
    xmlns:multitouch="clr-namespace:MultiTouch.Behaviors.Silverlight; assembly=MultiTouch.Behaviors.Silverlight">
....
<Canvas>
    <uc:Simon x:Name="Says">
        <interactivity:Interaction.Behaviors>
            <multitouch:MultiTouchManipulationBehavior InertiaEnabled="True" TouchRotateEnabled="True"
                       TouchScaleEnabled="True" TouchTranslateEnabled="True"/>
        </interactivity:Interaction.Behaviors>
    </uc:Simon>
</Canvas>

Since we are using a Blend Behavior, we can also open the solution in Expression Blend, select the “MultiTouchManipulationBehavior” from the “Assets” section and drag it over the Simon control:

Happy Silverlighting!

Silverlight 3 Multi-Touch Drag and Zoom Behaviors published on Expression gallery

I’ve published in the Expression gallery the Multi-Touch behaviors featuring Drag and Zoom gestures already posted on CodePlex.

The original article is available here.

I should insert new features in the next weeks, feel free to ping me for any suggestion 🙂

Update: A Silverlight / Expression Blend behavior to add Multi-Touch Manipulation and Inertia

NDepend: a great tool to analyze Silverlight / Expression assemblies and save precious time

I usually work with early-stage products containing poor or no documentation, in such cases a tool to help understand the tools and libraries you are using can really be a time saver.

Recently I’ve received a gift by Patrick Smacchia, Microsoft C# MVP, author of a cool tool named NDepend which permits to analyze and  compare .NET libraries in order to better understand and eventually optimize your code.

In this period, a cool topic is examined in several community posts: Behaviors and their usage in Silverlight and Expression Blend. They are powerful and permit to easily reuse your code, wrap powerful animation and effects in your libraries and then visually insert them in your application using Blend (in this way the designer/developer work-flow integration is really simplified).

If you use a behavior in your application, you have to write something similar this, where interactivity represents the System.Windows.Interactivity namespace (see my previous post for the source code of these behaviors):

<interactivity:Interaction.Behaviors>

<behaviors:TouchDrag TouchDragEnabled="True"/>

<behaviors:TouchZoom TouchZoomEnabled="True"/>

</interactivity:Interaction.Behaviors>

Using NDepend it’s possible to analyze this namespace and obtain a Dependency graph to better understand the internal structure of Microsoft.Expression.Interactions and System.Windows.Interactivity:

DependencyGraph

But this is only a starting point, we can also analyze the Metrics and go in more detail into the Interactivity ns (curiosity: it contains 2348 IL instructions):

InteractivityMetrics

Metrics about “Behavior<T>”, 9 IL instructions:

Metrics

Metrics about “Interaction”, 140 IL instructions:

InteractionsMetrics

Metrics about “TriggerBase”, 122 IL instructions:

InteractionsTriggerBase

The Dependency Matrix view permits to verify that  16 members of the namespace System.Windows.Interactivity are used by 36 methods of the assembly Microsoft.Expression.Interactions:

DependencyMatrix

And then left-click the dependency matrix to see a graph of the objects involved:

ObjetcsInvolvedGraph

 As you can see it’s very simple to quickly analyze (and learn) the structure of a selected library using NDepend, the graphical visualization of the relations between the objects is very useful to better understand the internals, and then become a better developer 🙂

More features available permit to compare different versions of the same libraries and perform custom queries to obtain more detailed information about the code using a dedicated language and syntax (this is a topic I’ve to investigate further, so stay tuned).

It’s my intention to start using NDepend regularly, its features are really incredible and are indispensable to understand the way of work of thirdy-part libraries.

Thank you Patrick for this great tool!

Get Started with Silverlight 3 and Expression Blend 3 – A full course

I’ve recently found on Twitter (thanks to Arturo Toledo) a well-done and complete course (100-200 level content) about Silverlight 3 and Expression Blend 3, containing material for students, instructors and sample code.

Topics include:

  • Animations and basic interactivity;
  • Visual State Manager;
  • Data Binding;
  • SketchFlow prototyping;
  • Video & Media;
  • DeepZoom;
  • Intro to Silverlight 3 programming.

You can download it from here: http://is.gd/2T3gk

Don’t forget to visit the “Learn” section of the Expression site to find other useful resources, videos, tutorials and starter kits:

http://expression.microsoft.com/en-us/cc197141.aspx

Happy Blending and Silverlighting!