how do I make a slide effect in a listview? - UWP

Question

I do not know how to do the effect very well, and I know how to capture the StackPanel to which I am going to make the effect. To help me with this last would be very helpful. What I want is to hide all StackPanel from a ListView and only show the element that is clicked on, if it loses focus, it will hide again. Here is the essential.

<ListView Grid.Row="1" ItemsSource="{Binding listOfSomething, Mode=TwoWay}" SelectionChanged="ListView_SelectionChanged">
    <!-- rest of code -->
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid HorizontalAlignment="Stretch" Margin="0,2,0,2">
                <!-- rest of code -->
                <StackPanel Grid.Column="2" Grid.RowSpan="2" Background="#FFF" Margin="5,0,0,0">
                    <Grid Background="Transparent" Height="52">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Button Grid.Column="0" Background="Transparent" Padding="0,0,0,0">
                            <StackPanel Padding="0,0,0,0" Margin="0,0,0,0">
                                <Image Source="ms-appx:///Assets/plus.png" Width="32" Height="32" />
                            </StackPanel>
                        </Button>
                        <Button Grid.Column="1" Background="Transparent" Padding="0,0,0,0">
                            <StackPanel Padding="0,0,0,0" Margin="0,0,0,0">
                                <Image Source="ms-appx:///Assets/delete.png" Width="32" Height="32"/>
                            </StackPanel>
                        </Button>
                    </Grid>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Answer 1

I do this approach but I think it's not recommended for long lists as it tries to suspend/maintain the view, but it's worth a shot based on your desired outcome/effect:

So here it is, first of all, create two DataTemplates inside your Page.xaml

<Page.Resources>
     <DataTemplate x:Name="normalTemplate" x:Key="normalTemplate">
         <!-- Your template view when item is NOT clicked/selected -->
     </DataTemplate>

     <DataTemplate x:Name="selectedTemplate" x:Key="selectedTemplate">
         <!-- Your template view when item is clicked/selected -->
     </DataTemplate>
</Page.Resources>

Modify your ListView control with:

<ListView Grid.Row="1" ItemsSource="{Binding listOfSomething, Mode=TwoWay}" SelectionChanged="ListView_SelectionChanged" ItemTemplate="{StaticResource normalTemplate}" />

Then on your ListView_SelectionChanged method, insert/add this lines of code:

try
{  
     // Assign DataTemplate for selected items
     foreach (var item in e.AddedItems)
     {
        ListViewItem lvi = (sender as ListView).ContainerFromItem(item) as ListViewItem;
        lvi.ContentTemplate = (DataTemplate)this.Resources["selectedTemplate"];
     }
     //Remove DataTemplate for unselected items
     foreach (var item in e.RemovedItems)
     {
         ListViewItem lvi = (sender as ListView).ContainerFromItem(item) as ListViewItem;
         lvi.ContentTemplate = (DataTemplate)this.Resources["normalTemplate"];
     }
}
catch (Exception ex) 
{ }