Adding / Removing the Multi-Touch Blend Behavior using C# code-behind

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!

2 thoughts on “Adding / Removing the Multi-Touch Blend Behavior using C# code-behind”

  1. Hello.
    Thanks a lot for this post.
    But I have a few issues with this implementation in WPF.
    I can lock and unlock the element with the multitouch behavior, it works well but when I detach the behavior of an element and then I touch it again : a NullreferenceExeption is raised from the Microsoft.Expression.Interactions.dll and precisely with this error Microsoft.Expression.Interactivity.Input.TranslateZoomRotateBehavior.MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
    Could you please provide more information about your implementation, so I could properly fix this bug.

  2. Hi Antoine,
    I’ve been able to reproduce this issue: the MultiTouchBehavior implementation for WPF uses internally the “TranslateZoomRotateBehavior” (https://msdn.microsoft.com/en-us/library/ff723978(v=expression.40).aspx) which seems to be the cause of the problem.

    If you try to add from code behind directly this one, you still get the NullReference exception unfortunately:
    private void Btn1_OnClick(object sender, RoutedEventArgs e)
    {
    var behaviors = System.Windows.Interactivity.Interaction.GetBehaviors(img1);
    behaviors.Clear();
    var mtb = new TranslateZoomRotateBehavior();

    behaviors.Add(mtb);
    }

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

Leave a Reply

Your email address will not be published. Required fields are marked *