locked
ListView Swipe item to erase - C#, XAML

    Question

  • Hi, i want to be able to swipe a listview item right in order to delete it.

    The solution described in this post: http://social.msdn.microsoft.com/Forums/windowsapps/en-US/2c3c208b-05b7-4431-a41e-e1ce06256fb3/listview-swipe-left-right-on-an-item?forum=winappswithcsharp

    Does not work for me, because when i erase an item i lose all references to the listviewitems, it must be an interference with the GC or something.

    So, in order to get the pointer_moved event i had to set IsSwipeEnabled = true in my listview and that makes all my code work.

    My problem lies in the default behaviour of the swipe, wich makes all my item move and I don't want this. This is the datatemplate of my item: 

     <DataTemplate x:Name="Dtemplate">
                <Grid Height="200" Width="800" Background="Transparent">
                    <Grid Width="600" Height="200" HorizontalAlignment="Center">
                        <Canvas Name="cvsItem" />
                        <Grid x:Name="GridTemplate" Margin="40,0,0,0" Background="White"/>
                    </Grid>
                </Grid>
            </DataTemplate>
    What I want to achieve is to make my canvas stand still in the same place and move only my Grid. Which doesn't happen because of the default swipe interaction. How can i workaround this, or disable this default behaviour?
    Tuesday, July 01, 2014 2:18 PM

All replies

  • Hi joaoPiresSilva,

    I'm not quite understand what you mean by "when i erase an item i lose all references to the listviewitems, it must be an interference with the GC or something." Could you explain more for this?

    I'm not sure if you heard about ObservableCollection(T) Class, should help you if my understanding is correct.

    "What I want to achieve is to make my canvas stand still in the same place and move only my Grid. " I don't think its possible because both Canvas and Grid belong to one Grid, and when swipe the item in ListView, all sub-item in current item will be moved together.

    If you want to keep the Canvas stay but Grid moves, perhaps you should consider combine two ListView together. One with Grid on the top and another with Canvas at bottom?

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, July 02, 2014 7:28 AM
    Moderator
  • Hey, thanks for the reply

    What would happen while using the solution mentioned in the other post was that after i removed an item from the listview, my pointer moved event wouldn't trigger anymore. That's why I went with another approach.

    If you have the time, i have a template solution: 

    https://onedrive.live.com/redir?resid=9542275F70FB9F08%211001

    Wich shows my problem and what i was talking about wanting the canvas to not move and only the grid to translate. If you can check it out and give me some input, it would be greatly appreciated. Note: this problems only happens with touch interaction.

    Best Regards

    João Silva

    Wednesday, July 02, 2014 9:50 AM
  • Thanks for your demo. I can reproduce the issue that you are facing. When in the local machine debug mode, the canvas wont move, but when debug with simulator touch mode, the canvas moves.

    I believe Cross-slide is the main reason that cause the problem, as you can see when we swipe something, a small distance will be moved.

    Screen shot showing the select and drag and drop processes.

    I believe if you can modify the ListViewItem styles and templates, by disable the dragging animation for ListViewItem should helps.

                            <VisualStateGroup x:Name="DragStates">
                                <VisualState x:Name="NotDragging" />
                                <VisualState x:Name="Dragging">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="InnerDragContent"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="{ThemeResource ListViewItemDragThemeOpacity}" />
                                        <DragItemThemeAnimation TargetName="InnerDragContent" />
                                        <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />
                                        <FadeOutThemeAnimation TargetName="SelectedBorder" />                                    
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DraggingTarget">
                                    <Storyboard>
                                        <DropTargetItemThemeAnimation TargetName="OuterContainer" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MultipleDraggingPrimary">
                                    <Storyboard>
                                        <!-- These two Opacity animations are required - the FadeInThemeAnimations
                                             on the same elements animate an internal Opacity. -->
                                        <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayBackground"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
                                        <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayText"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="1" />
    
                                        <DoubleAnimation Storyboard.TargetName="ContentBorder"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0"
                                                         To="{ThemeResource ListViewItemDragThemeOpacity}" />
                                        <FadeInThemeAnimation TargetName="MultiArrangeOverlayBackground" />
                                        <FadeInThemeAnimation TargetName="MultiArrangeOverlayText" />
                                        <DragItemThemeAnimation TargetName="ContentBorder" />
                                        <FadeOutThemeAnimation TargetName="SelectionBackground" />
                                        <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />
                                        <FadeOutThemeAnimation TargetName="SelectedBorder" />   
                                        <FadeOutThemeAnimation TargetName="PointerOverBorder" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MultipleDraggingSecondary">
                                    <Storyboard>
                                        <FadeOutThemeAnimation TargetName="ContentContainer" />
                                    </Storyboard>
                                </VisualState>
                                <VisualStateGroup.Transitions>
                                    <VisualTransition To="NotDragging" GeneratedDuration="0:0:0.2"/>
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>
    
    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, July 03, 2014 5:59 AM
    Moderator
  • Hey, thank you for the reply

    When you say: "I believe if you can modify the list view items and style templates, by disable the dragging animation for listviewitem should helps".

    It should be as simple as this: 

    <VisualState x:Name="Dragging">
       <Storyboard />
    </VisualState>

    right?
    Because I tried it and it doesn't change anything :(
    Also, before posting this question I already tried to change the propreties of the visual state groups and never found a solution.

    Any tips?

    Thursday, July 03, 2014 9:19 AM