Windows Phone ListView Swipe and Pin/Unpin

This article describes how a user can swipe and Pin/unpin the List items in Windows Phone 8.1 (WINRT).

Create a universal app project; by creating a Universal app project, you will get two projects, project for windows store and project for Windows Phone by sharing the shared project.

Note: Make sure you install VS 2013 with Update 2 for creating a Universal app project.

Add ListView control and make sure to set the property IsSwipeEnabled=true.
<ListView Margin="5" Name="lstViewMyChats" ItemsSource="{Binding Tasks}"
                  
IsSwipeEnabled="True" SelectionMode="Single"></ListView>

Define the data template for ListView as below.
<DataTemplate>
                         <StackPanel>
                              <StackPanel Orientation="Horizontal">
                                  <Button MinHeight="40"
                                      
Click="ButtonPin_Click"
                                       
MinWidth="30"
                                      
BorderThickness="0"
                                   
Background="Transparent" Visibility="{Binding PinButtonVisibility,Converter={StaticResource BoolToVisibility}}" >
                                      <Button.Content>
                                           <Image Stretch="Fill"
                                          
x:Name="PinImage"
                                          
Source="../Assets/pin.png"
                                          
MaxHeight="40"
                                          
MinHeight="40"
                                          
MaxWidth="30"
                                          
MinWidth="30" >
                                           </Image>
                                      </Button.Content>
                                  </Button>
                                  <Button MinHeight="40"
                                      
MinWidth="30"
                                      
BorderThickness="0"
                                      
Click="ButtonUnPin_Click"
                                 
Background="Transparent" Visibility="{Binding UnPinButtonVisibility,Converter={StaticResource BoolToVisibility}}">

                                      <Button.Content>
                                           <Image Stretch="Fill"
                                          
x:Name="UnPinImage"
                                          
Source="../Assets/unpin.png"
                                          
MaxHeight="40"
                                          
MinHeight="40"
                                          
MaxWidth="30"
                                          
MinWidth="30">
                                           </Image>
                                      </Button.Content>
                                  </Button>
                                  <Grid Height="70"
                                
Margin="0,0,10,0" Width="370"
                                
ManipulationStarted="lstViewMyChats_ManipulationStarted"
                                
ManipulationDelta="lstViewMyChats_ManipulationDelta"
                                
ManipulationMode="TranslateX">
                                      <Grid.ColumnDefinitions>
                                           <ColumnDefinition Width="0.2*"></ColumnDefinition>
                                           <ColumnDefinition Width="0.8*"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <Image Grid.Column="0" Stretch="Fill" Source="../Assets/people_default.png" MaxHeight="50"
                                   MaxWidth="40"
                                   MinWidth="50"
                                   MinHeight="50"></Image>
                                    <TextBlock Grid.Column="1" Text="{Binding TaskName}" VerticalAlignment="Center" Foreground="Black" FontSize="20"></TextBlock>
                                    <Image Stretch="Fill" Grid.Column="1" Margin="50,0,0,0" HorizontalAlignment="Right"
                                           x:Name="UnPinImages"
                                           Source="../Assets/pin.png"
                                           MaxHeight="40"
                                           MinHeight="40"
                                           MaxWidth="30"
                                           MinWidth="30" Visibility="{Binding IsPinnedItem,Converter={StaticResource BoolToVisibility}}"></Image>
                                  </Grid>
                              </StackPanel>
                            <Line X1="0"
                              Y1="2"
                              X2="600"
                              Y2="2"
                              Stroke="Gray"
                              StrokeThickness="1"
                              Margin="0,0,0,5"
                              Grid.ColumnSpan="3"
                              VerticalAlignment="Bottom" />
                         </StackPanel>
                     </DataTemplate>

From the above template, created two buttons Pin and Unpin which will be showed up when you swipe the list item from left to right. Either of the buttons will be set to visible based on Pin or Unpin the respective list item.

Created a Grid layout in the template, set the property ManipulationMode=translateX and added the events ManipulationStarted and ManipulationDelta which will get fired while swiping the list item either from left to right or from right to left.

From the ManipulationStarted event, we get initial position of the item as below.
  Windows.Foundation.Point initialpoint;
private void lstViewMyChats_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
        {
            initialpoint = e.Position;
        }

From the ManipulationDelta event, based on the position of list item we can identify whether the item is being swiped from Left to right or from right to left.  
If the item is being swiped from left to right, we just visible the Pin/Unpin button.
If the item is being swiped from right to left, we just invisible the Pin/Unpin button.
private void lstViewMyChats_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            Grid listViewGrid = (Grid)sender;
            var chatItem = ((((StackPanel)((StackPanel)(listViewGrid.Parent)).Parent))).DataContext as Task;
            if (initialpoint.X - e.Position.X > 30) // Swipe left
            {
                chatItem.PinButtonVisibility = false;
                chatItem.UnPinButtonVisibility = false;

                 e.Complete();
            }
            else if (e.Position.X - initialpoint.X > 30) // Swipe right
            {
                chatItem.PinButtonVisibility = !chatItem.IsPinnedItem;
                chatItem.UnPinButtonVisibility = chatItem.IsPinnedItem;
                 e.Complete();
            }
        }

When you swipe the item for the first time, it will show up the PIN button.  Add below code to PIN the item on click event.
private void ButtonPin_Click(object sender, RoutedEventArgs e)
         {
             if (lstViewMyChats.SelectedItem != null)
            {
                var chatItem = lstViewMyChats.SelectedItem as Task;
                chatItem.PinButtonVisibility = false;
                chatItem.UnPinButtonVisibility = false;
                chatItem.IsPinnedItem = true;
            }
        }

When you swipe the Pinned item, it will show up the Unpin button and below code to unpin.
private void ButtonUnPin_Click(object sender, RoutedEventArgs e)
         {
             if (lstViewMyChats.SelectedItem != null)
            {
                var chatItem = lstViewMyChats.SelectedItem as Task;
                chatItem.PinButtonVisibility = false;
                chatItem.UnPinButtonVisibility = false;
                chatItem.IsPinnedItem = false;
            }
        }

Download the working sample from below location.
http://nullskull.com/FileUpload/-407123783_ListView.Zip

By Siva Jagan Dhulipalla   Popularity  (2289 Views)