locked
Drag element inside Scrollviewer RRS feed

  • Question

  • Hi,

    I'm developing a control which uses the scrollviewer to display and scroll a list of elements. Now I need to drag an element horizontally in order to implement cross-slide selection.

        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <ScrollViewer>
                <StackPanel>
                    <Rectangle Fill="Red" Width="100" Height="100" Margin="8" ManipulationMode="TranslateX"/>
                    <Rectangle Fill="Green" Width="100" Height="100" Margin="8"/>
                    <Rectangle Fill="Blue" Width="100" Height="100" Margin="8"/>
                    <Rectangle Fill="Yellow" Width="100" Height="100" Margin="8"/>
                    <Rectangle Fill="Orange" Width="100" Height="100" Margin="8"/>
                    <Rectangle Fill="Brown" Width="100" Height="100" Margin="8"/>
                    <Rectangle Fill="Violet" Width="100" Height="100" Margin="8"/>
                    <Rectangle Fill="Purple" Width="100" Height="100" Margin="8"/>
                    <Rectangle Fill="BlueViolet" Width="100" Height="100" Margin="8"/>
                    <Rectangle Fill="Fuchsia" Width="100" Height="100" Margin="8"/>
                </StackPanel>
            </ScrollViewer>
        </Grid>
    

    The problem is that no sooner the manipulation mode is set to TranslateX in one of the elements, the scrollviewer doesn´t scroll vertically when the manipulation starts in that element. I don't understand what should I do to implement this. Any help is welcome.

    Thanks,

    Alvaro.


    Alvaro Rivoir

    Friday, January 25, 2013 2:35 PM

Answers

  • I now understand better your requirement. Here are the elements of the solution:

    - VirtualizingPanel: creating a VirtualizingPanel from 'scratch' is only part of the story.
    - ScrollViewer: the MS ScrollViewer is optimized in such a manner that all gesture handling is performed out of the UI thread for performance reasons.  So you'll also need to handle by yourself all gesture handling in relationship to the visual requirements of _your_ panel items layout [including Items Entrance, DragDrop, DragReorder, AddDelete storyboarding and cross-slide selection]. To achieve this, see Implementing GestureRecognition in a ScrollViewer
    - ListViewBase: would still be used for support of a [selectable] ItemsControl whose ItemsPanel would be your panel.


    • Edited by ForInfo Saturday, January 26, 2013 9:34 AM
    • Marked as answer by Roberts_EModerator Tuesday, February 5, 2013 6:37 PM
    Saturday, January 26, 2013 8:48 AM

All replies

  • ListView and GridView provide such capability 'out-of-the-box': see example. The reason is that they inherit from ListViewBase. Using those controls [ListView in particular, which internally uses a "ScrollViewer+StackPanel" ItemsPanel] would avoid a lot of programming work.

        <Grid Height="400">
            <ListView IsSwipeEnabled="True" CanDragItems="True" CanReorderItems="True" AllowDrop="True">
                <Rectangle Fill="Red" Width="100" Height="100" Margin="8"/>
                <Rectangle Fill="Green" Width="100" Height="100" Margin="8"/>
                <Rectangle Fill="Blue" Width="100" Height="100" Margin="8"/>
                <Rectangle Fill="Yellow" Width="100" Height="100" Margin="8"/>
                <Rectangle Fill="Orange" Width="100" Height="100" Margin="8"/>
                <Rectangle Fill="Brown" Width="100" Height="100" Margin="8"/>
                <Rectangle Fill="Violet" Width="100" Height="100" Margin="8"/>
                <Rectangle Fill="Purple" Width="100" Height="100" Margin="8"/>
                <Rectangle Fill="BlueViolet" Width="100" Height="100" Margin="8"/>
                <Rectangle Fill="Fuchsia" Width="100" Height="100" Margin="8"/>
            </ListView>
        </Grid>
    Note: XAML and C# or VB questions are better posted on the relevant Forum
    Friday, January 25, 2013 3:03 PM
  • Hi,

    The control I'm developing is more advanced, I mean, I can't base it on GridView or ListView because they don't virtualize items.

    Thanks for your answer.

    Alvaro.


    Alvaro Rivoir

    Friday, January 25, 2013 3:10 PM
  • "they don't virtualize items" ... is that so?
    ---

            <ListView>
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel/>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
            </ListView>
            <ListView>
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <local:MyOwnVirtualizingPanel/>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
            </ListView>

    Friday, January 25, 2013 3:56 PM
  • You are right, I should have said "it is not possible to create a virtualizing panel". VirtualizingStackPanel is too limited for our purposes.

    http://connect.microsoft.com/VisualStudio/feedback/details/746340/cant-derive-from-virtualizingpanel-in-windows8-winrt

    Only microsoft can create virtualizing panels, which is patetic. Therefore we had to implement our own ItemsControl, therefore we can't use GridView or ListBox, We opted for using MS ScrollViewer to avoid implementing everything from scratch, but now I can't find a way to listen to manipulation events correctly inside a ScrollViewer.

    Thanks.

    Alvaro.


    Alvaro Rivoir

    Friday, January 25, 2013 4:41 PM
  • I now understand better your requirement. Here are the elements of the solution:

    - VirtualizingPanel: creating a VirtualizingPanel from 'scratch' is only part of the story.
    - ScrollViewer: the MS ScrollViewer is optimized in such a manner that all gesture handling is performed out of the UI thread for performance reasons.  So you'll also need to handle by yourself all gesture handling in relationship to the visual requirements of _your_ panel items layout [including Items Entrance, DragDrop, DragReorder, AddDelete storyboarding and cross-slide selection]. To achieve this, see Implementing GestureRecognition in a ScrollViewer
    - ListViewBase: would still be used for support of a [selectable] ItemsControl whose ItemsPanel would be your panel.


    • Edited by ForInfo Saturday, January 26, 2013 9:34 AM
    • Marked as answer by Roberts_EModerator Tuesday, February 5, 2013 6:37 PM
    Saturday, January 26, 2013 8:48 AM