Multitouch and Navigation Frame

May 25, 2011 at 10:15 AM

I've used your behavior in an application that use sdk:Frame in order to navigate among pages.
The probelm I've encoutered is that when I leave the page with the canvas containing the multitouch behavior and enter it again, the behavior doesn't work.

I've tried to debug a little. In doing so I've put the below handler

AddHandler Touch.FrameReported, AddressOf_touchFrameReported

And also this handler is fired only the first time I enter the page with the multitouch behavior inside.

How could I manage this scenario?

Coordinator
May 25, 2011 at 5:54 PM

Hi shadowsheep,

what version of the behavior are you using?

The last version of the behavior (0.6.2), available with a sample in the solution "SilverlightWP7MultiTouch.sln", supports multi-page applications in WP7.

Let me know if it works.

Thanks,

Davide

May 25, 2011 at 8:42 PM

Hi Davide,

Unluckily I'm developing a ClientSide Silverlight 4 Application and I'm using your code coming from Expression Gallery (http://gallery.expression.microsoft.com/MultiTouch/)

All works fine until I change the page and came back.

I repeat, that happens also when I try to set the Touch.FrameReported Event.

Maybe a little bit of code could you explain better my scenario:

This is ma main content frame:

 

    <Canvas x:Name="rootElement" OpacityMask="Black" Background="#FFF4F0EF">
        <sdk:Frame x:Name="ContentFrame" Source="Home">
            <sdk:Frame.UriMapper>
                <sdk:UriMapper>
                    <sdk:UriMapping Uri="Home" MappedUri="/Home.xaml"/>
                    <sdk:UriMapping Uri="Sofa" MappedUri="/SelSofa.xaml"/>
                    <sdk:UriMapping Uri="SofaType" MappedUri="/SelSofaType.xaml"/>
                    <sdk:UriMapping Uri="SofaTypeUpdate" MappedUri="/SelSofaTypeUpdate.xaml"/>
                    <sdk:UriMapping Uri="Comp" MappedUri="/SelComp.xaml"/>
                    <sdk:UriMapping Uri="CompUpdate" MappedUri="/SelCompUpdate.xaml"/>
                    <sdk:UriMapping Uri="Tissue" MappedUri="/SelTissue.xaml"/>
                    <sdk:UriMapping Uri="TissueType" MappedUri="/SelTissueType.xaml"/>
                    <sdk:UriMapping Uri="TissueTypeUpdate" MappedUri="/SelTissueTypeUpdate.xaml"/>
                    <sdk:UriMapping Uri="Config" MappedUri="/Config.xaml"/>
                    <sdk:UriMapping Uri="ConfigUpdate" MappedUri="/ConfigUpdate.xaml"/>
                    <sdk:UriMapping Uri="Offer" MappedUri="/Offer.xaml"/>
                    <sdk:UriMapping Uri="Catal" MappedUri="/Catalogue.xaml"/>
                    <sdk:UriMapping Uri="Price" MappedUri="/PriceList.xaml"/>
                    <sdk:UriMapping Uri="Delivery" MappedUri="/Delivery.xaml"/>
                    <sdk:UriMapping Uri="DeliveryStep2" MappedUri="/DeliveryStep2.xaml"/>
                    <sdk:UriMapping Uri="AlternateDelivery" MappedUri="/AlternateDelivery.xaml"/>
                    <sdk:UriMapping Uri="CustomerData" MappedUri="/CustomerData.xaml"/>
                    <sdk:UriMapping Uri="Summary" MappedUri="/Summary.xaml"/>
                    <sdk:UriMapping Uri="SummaryUpdate" MappedUri="/SummaryUpdate.xaml"/>
                    <sdk:UriMapping Uri="Map" MappedUri="/ShippingMap.xaml"/>
                    <sdk:UriMapping Uri="/{page}" MappedUri="/{page}.xaml"/>
                </sdk:UriMapper>
            </sdk:Frame.UriMapper>
        </sdk:Frame>
    </Canvas>

 

The Calaogue.xaml UIElement is that:

 

 <Canvas x:Name="rootElement" OpacityMask="Black" Background="#FFF4F0EF">
        <Image x:Name="_background" Width="1280" Height="800" Source="img/Sfondo.png" Stretch="Fill"/>
        <Canvas Canvas.Left="220" x:Name="_page_turn_container" Canvas.Top="100" Width="840" Height="600">
            <local:MyMultiTouchPageTurn  Width="840" Height="600"></local:MyMultiTouchPageTurn>
        </Canvas>
        <local:MyForwardBackward x:Name="_arrow_menu_container" Action="CATALOGO" Style="{StaticResource PSTForwardBackwardStyle}" />
        <local:MyHeaderMenu x:Name="_menu_container" Style="{StaticResource PSTHeaderMenuStyle}" />
    </Canvas>

 

And eventually MyMultiTouchPageTurn try to use your behaviour:

 

    <Grid x:Name="LayoutRoot" ShowGridLines="False">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height=".07*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock x:Name="_debug_lbl" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Text="debug" FontSize="24"></TextBlock>
        <Canvas Grid.Column="0" Grid.Row="1">
            <Image Source="pages/page01.jpg" x:Name="_odd_page">
                <interactivity:Interaction.Behaviors>
                    <behaviors:MultiTouchManipulationBehavior IsInertiaEnabled="False" IsRotateEnabled="False" IsTranslateEnabled="True" IsScaleEnabled="True" MaximumScaleRadius="720"/>
                </interactivity:Interaction.Behaviors>
            </Image>
        </Canvas>
        <Canvas Grid.Column="1" Grid.Row="1">
            <Image Source="pages/page02.jpg" x:Name="_even_page">
                <interactivity:Interaction.Behaviors>
                    <behaviors:MultiTouchManipulationBehavior IsInertiaEnabled="False" IsRotateEnabled="False" IsTranslateEnabled="True" IsScaleEnabled="True" MaximumScaleRadius="720"/>
                </interactivity:Interaction.Behaviors>
            </Image>
        </Canvas>
    </Grid>

 

and the .xaml.vb is:

 

    Public Sub New()
        InitializeComponent()
        _debug_lbl.Text = "Public Sub New"
        AddHandler Loaded, AddressOf _loaded
    End Sub

    Private Sub _loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        If Not DesignMode() Then
             System.Windows.Interactivity.Interaction.GetBehaviors(_odd_page).OfType(Of MultiTouchManipulationBehavior)().First().Move(New Point(210, 300), 0, 290)
            System.Windows.Interactivity.Interaction.GetBehaviors(_odd_page).OfType(Of MultiTouchManipulationBehavior)().First().BringToFront()
            System.Windows.Interactivity.Interaction.GetBehaviors(_even_page).OfType(Of MultiTouchManipulationBehavior)().First().Move(New Point(210, 300), 0, 290)
            System.Windows.Interactivity.Interaction.GetBehaviors(_even_page).OfType(Of MultiTouchManipulationBehavior)().First().BringToFront()
        End If
        _debug_lbl.Text = "Private Sub _loaded (" & _multi_touch_enabled & ")"
        AddHandler Touch.FrameReported, AddressOf _touchFrameReported
    End Sub

    Private Sub _touchFrameReported(ByVal sender As Object, ByVal e As TouchFrameEventArgs)
        Dim a As TouchPointCollection = e.GetTouchPoints(Nothing)
        _debug_lbl.Text = "Multitouch Event! -> _touchFrameReported"
    End Sub

So... I enter _touchFrameReported only the first time I enter this "page" (Catalogue.xaml). All other time the multi touch event is not raised.

If you like I can also make you a little multi page, multi touch project so you can try it on your own.

Ah! Last but not least!!! I used my client side silverlight 4 application on an Acer Iconia Tablet with windown 7 onboard.

I hope luck to all of us in order to find out the trick behind this scenario!

 

Coordinator
May 25, 2011 at 9:14 PM

Hi,

instead of using the version available on the expression gallery you should use the updated one available from here http://multitouch.codeplex.com/releases/58405/download/192818 which includes also a working example using multi-page in WP7.

Thanks,

Davide