locked
ManipulationDelta and SwapChainBackgroundPanel+Listview control

    Question

  • Note that I'm a newbie at XAML and Metro, so this is probably a trivial settings issue:

    I have a C++ Direct3D11 app that uses a SwapChainBackgroundPanel (SCBP) with a Listview control on top. The SCBP has the following set:

    <ManipulationDelta="OnManipulationDelta" ManipulationMode="All">

    I use the incoming Delta to pan the contents of my D3D11 scene in OnManipulationDelta. However, when I click-and-drag in the overlaying Listview control, those mouse movements affect both the Listview *and* the D3D11 scene. For example, click-and-drag on the listview's scrollbar scrolls the listview contents AND gets sent to my SCBP's OnManipulationDelta, which pans my D3D scene. Not good!

    Is there a way to make the Listview control completely consume the mouse movements? In the simulator debugger the "touch" mode works as expected => the Listview consumes the touch-and-drag in the listview.

    Thanks

    Monday, July 23, 2012 3:22 PM

All replies

  • Most XAML events follow a "bubbling" routing stategy, which means event handlers will be invoked on successive parent elements up the visual tree hierarchy until the event is marked as "handled".  There's some background info on this here:

    http://msdn.microsoft.com/en-us/library/ms742806.aspx

    (note this documentation is for WPF, but the concept applies across all XAML platforms)

    Try setting the ManipulationDeltaRoutedEventArgs::Handled property to true in your OnManipulationDelta method for the ListView - that should prevent the routed event from bubbling up to the parent SwapChainBackgroundPanel:

    e->Handled = true;

    Monday, July 23, 2012 7:06 PM
  • Are you saying that I need to add an OnManipulationDelta handler in my ListView just so I can stop the event from bubbling up to the parent? How will that affect the ListView's handling of the mouse input? Why does this only happen with mouse input? Touch input isn't passed on to the SwapChainBackgroundPanel (in the Simulator Debugger, I don't have a real touch device to test with yet).

    I don't have an OnManipulationDelta handler in the ListView because I don't want to interfere with how the ListView handles input. I only have one for my SwapChainBackgroundPanel. There has to be some other way to tell a XAML UI element to not bubble up input when it has focus. As a last resort, I guess I could add some sort of check in my SwapChainBackgroundPanel's OnManipulationDelta handler to see if I'm displaying the ListView.

    Monday, July 23, 2012 9:25 PM
  • Correct - it's up to the app to stop the event from routing by attaching a handler if needed, since many apps require the opposite behavior.  There's some info in the documentation for the ManipulationDelta event:

    "If the event is permitted to bubble up to parent elements because it goes unhandled, then it is possible to handle the event on parent elements even if ManipulationMode is None on that element"

    http://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.uielement.manipulationdelta.aspx

    The behavior should be the same with both mouse and touch - I just verified in the Release Preview simulator using touch mode and it was still raising the event on SCBP as expected.  As far as I know this shouldn't interfere with the ListView's normal input handling.  There's an overview of how input, gestures, and manipulations work together available here:

    http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465387.aspx

    Tuesday, July 24, 2012 5:12 PM
  • I'm seeing inconsistent results with the various input types. Here is my XAML:

    <Page
        x:Class="MyApp.DirectXPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:MyApp"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
    >
     
    
        <Page.Resources>
            <CollectionViewSource x:Name="cvsLocations" IsSourceGrouped="True" ItemsPath="Items"/>
        </Page.Resources>
    
                
        <SwapChainBackgroundPanel x:Name="MySCBP"
    PointerMoved="OnPointerMoved"
    PointerReleased="OnPointerReleased"  PointerWheelChanged="OnPointerWheelChanged"    ManipulationDelta="OnManipulationDelta"
    ManipulationMode="All">
    
            <ListView x:Name="MyListView" Background="White"  ItemsSource="{Binding Source={StaticResource cvsLocations}}"  MaxWidth="250" Margin="121,42,947,136">
                <ListView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <Grid Background="DarkGray">
                                    <TextBlock Text="{Binding Name}" Foreground="White" Margin="10" Style="{StaticResource PageSubheaderTextStyle}" />
                                </Grid>
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                    </GroupStyle>
                </ListView.GroupStyle>
    
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" >
                            <TextBlock Text="{Binding SiteId}" Style="{StaticResource ItemTextStyle}" VerticalAlignment="Center" FontWeight="Bold" Margin="5" Width="50" Foreground="Black"/>
                            <TextBlock Text="{Binding SiteCity}" Style="{StaticResource ItemTextStyle}" VerticalAlignment="Center" Margin="5" Foreground="Black"/>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
    
        </SwapChainBackgroundPanel>
    
    
        <Page.BottomAppBar>
            <AppBar Padding="10,0,10,0">
                <Grid>
                    <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Left">
                        <Button x:Name="Previous" Style="{StaticResource PreviousAppBarButtonStyle}" Tag="Previous" AutomationProperties.Name="Previous Color" Click="CycleColorPrevious"/>
                    </StackPanel>
                    <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                        <Button x:Name="Next" Style="{StaticResource NextAppBarButtonStyle}" Tag="Next" AutomationProperties.Name="Next Color" Click="CycleColorNext"/>
                    </StackPanel>
                </Grid>
            </AppBar>
        </Page.BottomAppBar>
    
    </Page>
    
    

    When I run in Windows (not the Simulator) and position the mouse pointer over the ListView:

    1. Left-click and drag on the scrollbar scrolls the listview AND drags the underlying SCBP

    2. Mousewheel scrolls the ListView only, it does NOT zoom in/out on my underlying SCBP

    When I run in the Simulator Debugger, #1 and #2 above are the same in mouse mode. In "Basic Touch Mode" I get:

    a. Left-click and drag on the ListView scrollbar always scrolls the ListView contents, NOT the underlying SCBP

    b. When ListView doesn't have focus, left-click and drag on an item always scrolls both the ListView and SCBP

    c. When the ListView has the focus, left-click and drag on an item only scrolls the ListView, not SCBP

    Let me know if you need more information.

    Tuesday, July 24, 2012 6:09 PM