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

I’ve updated the behavior available in the Expression Community gallery adding Multi-Touch manipulation (translation, rotation and zoom) and inertia effects using code from the Surface Manipulations and Inertia Sample for Microsoft Silverlight.

To enable Multi-Touch in your code simply download the behavior from here, add the project “MultiTouch.Behaviors.Silverlight” to a Visual Studio solution and then enable the gestures in XAML:

<UserControl x:Class="SilverlightMultiTouch.MainPage"
...
xmlns:interactivity="clr-namespace:System.Windows.Interactivity; assembly=System.Windows.Interactivity"
xmlns:behaviors="clr-namespace:MultiTouch.Behaviors.Silverlight; assembly=MultiTouch.Behaviors.Silverlight"
...
>

<Canvas>
  <Image Source="Images/Desert.jpg">
     <interactivity:Interaction.Behaviors>
         <behaviors:MultiTouchManipulationBehavior InertiaEnabled="True" TouchRotateEnabled="True" TouchTranslateEnabled="True" TouchScaleEnabled="True"/>
     </interactivity:Interaction.Behaviors>
  </Image>

  <Image Source="Images/Jellyfish.jpg">
     <interactivity:Interaction.Behaviors>
         <behaviors:MultiTouchManipulationBehavior InertiaEnabled="True" TouchRotateEnabled="True" TouchTranslateEnabled="True" TouchScaleEnabled="True"/>
     </interactivity:Interaction.Behaviors>
  </Image>
</Canvas>

The MultiTouchManipulationBehavior also contains some dependency properties (TouchRotateEnabled, TouchTranslateEnabled, TouchScaleEnabled and InertiaEnabled) to enable the corresponding gestures.

The example contains Multi-Touch manipulations applied to some Image controls and a Smooth streaming player of the Silverlight Media Framework.

I’ve also posted to CodePlex a sample using WPF 4 based on the article “Introduction to WPF 4 Multitouch” by Jaime Rodriguez.

Hope this helps and Happy Silverlighting!

My Twitter Lists

Twitter has just enabled a new feature named “Lists” which permits to organize in categories the people you are following and make their tweets available to others. In this way it’s very simple to navigate the various subjects, follow the lists created by other people and subscribe to them.

I’ve tried this new functionality and created my own lists about Silverlight-related stuff, feel free to subscribe here if you find useful:

http://twitter.com/davidezordan/lists

Happy Silverlighting!

Visual Studio 2010 Beta 2 and updated Silverlight Toolkit available

Lot of news this week!

Visual Studio 2010 and .NET Framework 4 Beta 2 are now available for download here, Jeff Beehler has posted some useful info about this “go live” release.

The new Silverlight Toolkit October 2009 Release is also available on Codeplex featuring Visual Studio 2010 support and various improvements on existing components (like drag-and-drop for items controls).

Read these posts by Tim Heuer and Jeff Wilcox for more details and enjoy!

Silverlight and ViewModel meet F#

Many MVVM implementations are available on the net, personally I love the approach used by Laurent Bugnion in the MVVM Light toolkit and Michael Sync in the Silverlight MVVM toolkit (Jeremiah Morril have posted a great article about this pattern, don’t forget to read it here).

All these examples use C#, what about F# for describing ViewModel classes? F# is a very powerful and readable language and permits to perform operations using a small amount of code. Last, but not least, at this time it’s a first citizen .NET language and can be easily used in Silverlight applications as well.

How can we build a Silverlight MVVM solution using F#?

First of all, download and install the F# for Silverlight templates and samples.

Let’s start by defining a simple F# ViewModel class containing a simple “Name” property and a “SearchCommand”, this one using the DelegateCommand implementation available in Prism:

namespace SilverlightViewModelFSharp.ViewModels

open System.ComponentModel
open Microsoft.Practices.Composite.Presentation.Commands;
open System.Windows

type MainPageVM() =

   //Definition of the PropertyChanged event
   let event = Event<PropertyChangedEventHandler, PropertyChangedEventArgs>()

   //Definition of the "name" property
   let mutable name = "This is the value of a property defined in the F# ViewModel"

   //Definition of a test Command
   let searchCommand = new DelegateCommand<string>(fun (x) -> MessageBox.Show(x) |> ignore )

   //INotifyPropertyChanged interface
   interface INotifyPropertyChanged with
      member this.add_PropertyChanged(e) = event.Publish.AddHandler(e)
      member this.remove_PropertyChanged(e) = event.Publish.RemoveHandler(e)

   //Definition of the "Name" property
   member this.Name
        with get() = name
        and  set(v) =
             name <- v
             event.Trigger(this, new PropertyChangedEventArgs("Name"))

   //Definition of the "SearchCommand"
   member this.SearchCommand
        with get() = searchCommand

Cool, don’t you love this F# syntax? It’s so readable :)

Now we are ready to bind the MainPageVM to a xaml view inserting this simple code:

<StackPanel Orientation="Vertical">
     <!-- Example of binding to a F# ViewModel Command -->
     <Button Height="40" Content="Click me!"
           cmd:Click.Command="{Binding SearchCommand}"
           cmd:Click.CommandParameter="Hello from a ViewModel F# Command parameter"/>

     <!-- Example of binding to a F# ViewModel property -->
     <TextBlock Text="{Binding Name}" Height="40"/>
</StackPanel>

To make the ViewModel magic work, just assign the MainPageView DataContext with the F# ViewModel:

public MainPageView()
   {
       InitializeComponent();
       this.DataContext = new MainPageVM();
   }

The source code is available for download here.

New: updated the source code for Visual Studio 2010 Beta 2.

Happy Silverlighting!!

IIS Media Services 3.0 released: Silverlight and Live Smooth Streaming

“IIS Media Services, an integrated HTTP-based media delivery platform, delivers true HD (720p+) streaming and provides real-time logging to measure media investments. By offering a complete media delivery platform together with a traditional Web server, rich dynamic Web sites can now be managed and administered from a single Web platform: IIS”

These extensions are now available:

  • Live Smooth Streaming: live adaptive streaming to Silverlight;
  • Smooth Streaming: adaptive streaming to Silverlight;
  • Advanced Logging;
  • Bit Rate Throttling;
  • Web Playlists.

Useful links:

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!