Achieve Outlook-Like Swiping Using .NET MAUI ListView
Tags: dotnet, csharp, maui, mobile
Published: 2022-11-30 12:54:11

---
title: Achieve Outlook-Like Swiping Using .NET MAUI ListView
published: true
date: 2022-11-30 11:30:32 UTC
tags: dotnet, csharp, maui, mobile
canonical_url: https://www.syncfusion.com/blogs/post/achieve-outlook-like-swiping-using-net-maui-listview.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hz4b9yvhu8cbhey2eh3.png
---
The [.NET MAUI ListView](https://www.syncfusion.com/maui-controls/maui-listview "Syncfusion .NET MAUI ListView") component can virtually present data lists in a vertical or horizontal orientation with different layouts. Its rich feature set includes selection, template selectors, horizontal and vertical orientation, load more items, autofitting items, sorting, grouping, filtering, and more. It also supports swiping the ListView items in an Outlook-like fashion.

You can create an Outlook-like inbox appearance by customizing the [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.SfListView.html#Syncfusion_Maui_ListView_SfListView_ItemTemplate "ItemTemplate property of .NET MAUI ListView") property and enabling the swiping feature using the [AllowSwiping](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.SfListView.html#Syncfusion_Maui_ListView_SfListView_AllowSwiping "AllowSwiping property of .NET MAUI ListView") property. This blog will take you through the steps to do this.

Let’s get started!

## Create the .NET MAUI ListView control

First, create a simple [.NET MAUI app in Visual Studio](https://docs.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-android "Build your first .NET MAUI app in Visual Studio documentation") and add the [Syncfusion .NET MAUI ListView](https://help.syncfusion.com/maui/listview/getting-started "Getting started with .NET MAUI ListView") to it.

## Data population

The .NET MAUI ListView is a data-bound control, so we have to create a data model to bind items to it.

### Creating the data model

We need a model class to hold the data values, such as the sender, subject, and description, as in a simple data source to bind UI values. Additionally, I have used the **IsAttached** property to show the attachments in the emails and the **IsImportant** property to indicate the significance of the emails.

Refer to the following code example of the model class.

```csharp
Public class InboxInfo : InotifyPropertyChanged
{
 
  #region Constructor
 
  public InboxInfo()
  {
 
  }
 
  #endregion
 
  #region Properties
 
  public string Name
  {
    get
    {
      return name;
    }
    set
    {
      name = value;
      OnPropertyChanged(“Name”);
    }
  }
 
  public string ProfileName
  {
    get { return profileName; }
    set
    {
      profileName = value;
      OnPropertyChanged(“ProfileName”);
    }
  }
 
  public string Subject
  {
    get
    {
      return subject;
    }
 
    set
    {
      subject = value;
      OnPropertyChanged(“Subject”);
    }
  }
 
  public string Description
  {
    get
    {
      return description;
    }
 
    set
    {
      description = value;
      OnPropertyChanged(“Description”);
    }
  }
 
  public DateTime Date
  {
    get
    {
      return date;
    }
 
    set
    {
      date = value;
      OnPropertyChanged(“Date”);
    }
  }
 
  public ImageSource Image
  {
    get
    {
      return image;
    }
 
    set
    {
      image = value;
      OnPropertyChanged(“Image”);
    }
  }
 
  public bool? IsAttached
  {
    get { return isAttached; }
    set
    {
      isAttached = value;
      OnPropertyChanged(“IsAttached”);
    }
  }
 
  public bool IsImportant
  {
    get { return isImportant; }
    set
    {
       isImportant = value;
       OnPropertyChanged(“IsImportant”);
    }
  }
 
  public bool IsOpened
  {
    get { return isOpened; }
    set
    {
      isOpened = value;
      OnPropertyChanged(“IsOpened”);
    }
  }
 
  #endregion
 
  #region Interface Member
 
  public event PropertyChangedEventHandler PropertyChanged;
 
  public void OnPropertyChanged(string name)
  {
    if (PropertyChanged != null)
    PropertyChanged(this, new PropertyChangedEventArgs(name));
  }
 
  #endregion
}
```

### Creating the ViewModel

Let’s create a ViewModel and populate the **InBoxInfos** property with the data for the .NET MAUI ListView control. We have to populate each **InBoxInfo** property with its respective collection type property.

Refer to the following code example.

```csharp
public class ViewModel : INotifyPropertyChanged
{
  #region Fields
 
  private ObservableCollection inboxInfos;
 
  #endregion
 
  #region Interface Member
 
  public event PropertyChangedEventHandler PropertyChanged;
 
  public void OnPropertyChanged(string name)
  {
    if (PropertyChanged != null)
       PropertyChanged(this, new PropertyChangedEventArgs(name));
  }
 
  #endregion
 
  #region Constructor
 
  public ListViewSwipingViewModel()
  {
    GenerateSource();
  }
 
  #endregion
 
  #region Properties
 
  public ObservableCollection<ListViewInboxInfo> InboxInfos
  {
    get { return inboxInfos; }
    set { inboxInfos = value; OnPropertyChanged("InboxInfos"); }
  }
 
 
  #endregion
 
  #region Generate Source
 
  private void GenerateSource()
  {
    ListViewInboxInfoRepository inboxinfo = new ListViewInboxInfoRepository();
    inboxInfos = inboxinfo.GetInboxInfo();
  }
 
  #endregion
}
```

### Define swiping actions in the ViewModel

Now, we’ll define the indefinite swiping actions in the **ViewModel** using the elements of the **SwipeTemplate** property, like in the following code example.

```csharp
public class ViewModel : INotifyPropertyChanged
{
  #region Fields
 
  ----------------
 
  #region Interface Member
 
  public event PropertyChangedEventHandler PropertyChanged;
 
  public void OnPropertyChanged(string name)
  {
    if (PropertyChanged != null)
       PropertyChanged(this, new PropertyChangedEventArgs(name));
  }
 
  #endregion
 
  #region Constructor
 
  public ViewModel()
  {
 
  }
 
  #endregion
 
  #region Properties
 
  public Command DeleteCommand
  {
    get { return deleteCommand; }
    protected set { deleteCommand = value; }
  }
 
  public Command UndoCommand
  {
    get { return undoCommand; }
    protected set { undoCommand = value; }
  }
 
  public Command ArchiveCommand
  {
    get { return archiveCommand; }
    protected set { archiveCommand = value; }
  }
 
  #endregion
 
  #region Generate Source
 
  private void GenerateSource()
  {
    ---------------------------------
    deleteCommand = new Command(OnDelete);
    undoCommand = new Command(OnUndo);
    archiveCommand = new Command(OnArchive);
  }
 
  private async void OnDelete(object item)
  {
    listViewItem = (ListViewInboxInfo)item;
    inboxInfo!.Remove(listViewItem);
  }
 
  private async void OnArchive(object item)
  {
    listViewItem = (ListViewInboxInfo)item;
    inboxInfo!.Remove(listViewItem);
  }
 
  private void OnUndo()
  {
    if (listViewItem != null)
    {
      inboxInfo!.Insert(listViewItemIndex, listViewItem);
    }
  }
}
```

### Defining the ItemTemplate

Then, we’ll define the Outlook-like UI using the .NET MAUI ListView’s **ItemTemplate** property on the XAML page.

```xml
<ListView:SfListView.ItemTemplate>
 <DataTemplate>
  <Grid>
   <Grid.RowDefinitions>
     <RowDefinition Height=”5” />
     <RowDefinition Height=”20” />
     <RowDefinition Height=”20” />
     <RowDefinition Height=”20” />
     <RowDefinition Height=”5” />
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
     <ColumnDefinition Width=”72” />
     <ColumnDefinition Width=”*” />
     <ColumnDefinition Width=”70” />
   </Grid.ColumnDefinitions>
 
   <Grid Grid.Row=”1”
         Grid.Column=”0”
         Grid.RowSpan=”2”
         HeightRequest=”35”
         WidthRequest=”35”
         HorizontalOptions=”Center”
         VerticalOptions=”Center”>
    <Image Source=”{Binding Image}”
           HeightRequest=”40”
           WidthRequest=”40”
           Margin=”0, 15, 0, 0” />
    <Label Text=”{Binding ProfileName}”
           TextColor=”#FFFFFF”
           FontSize=”14”
           HorizontalTextAlignment=”Center”
           HorizontalOptions=”Center”
           VerticalOptions=”Center”
           VerticalTextAlignment=”Center”
           FontFamily=”Roboto-Regular”
           CharacterSpacing=”0.25”
           Margin=”0, 15, 0, 0” />
   </Grid>
 
   <Label Grid.Row=”1”
          Grid.Column=”1”
          Text=”{Binding Name}”
          FontFamily=”Roboto-Medium”
          FontSize=”14”
          TextColor=”#000000”
          Margin=”0, 2, 0, 0”
          LineBreakMode=”TailTruncation”
          CharacterSpacing=”0.25” />
 
   <Label Grid.Row=”2”
          Grid.Column=”1”
          Grid.ColumnSpan=”2”
          Text=”{Binding Subject}”
          FontFamily=”Roboto-Medium”
          FontSize=”13”
          Margin=”0,0,16,3”
          TextColor=”#000000”
          LineBreakMode=”TailTruncation”
          CharacterSpacing=”0.25” />
 
   <Label Grid.Row=”3”
          Grid.Column=”1”
          Grid.ColumnSpan=”2”
          Text=”{Binding Description}”
          FontFamily=”Roboto-Regular”
          FontSize=”12”
          TextColor=”#666666”
          Margin=”0,0,16,1”
          LineBreakMode=”TailTruncation”
          CharacterSpacing=”0.25” />
 
   <Label Grid.Row=”1”
          Grid.Column=”2”
          Text=”{Binding Date, Converter={StaticResource dateTimeConverter}}”
          TextColor=”#666666”
          FontFamily=”Roboto-Regular”
          HorizontalOptions=”End”
          HorizontalTextAlignment=”End”
          FontSize=”11”
          Margin=”0,0,16,0”
          CharacterSpacing=”0.15” />
 
   <Image Grid.Row=”2”
          Grid.Column=”2”
          HeightRequest=”30”
          WidthRequest=”30”
          Margin=”0, 0, 8, 0”
          Source=”paperclip.png”
          IsVisible=”{Binding IsAttached}”
          HorizontalOptions=”End”
          VerticalOptions=”Center”>
   </Image>
 
   <Image Grid.Row=”2”
          Grid.Column=”2”
          HeightRequest=”40”
          WidthRequest=”40”
          Margin=”0, 0, 2, 0”
          Source=”important.png”
          IsVisible=”{Binding IsImportant}”
          HorizontalOptions=”End”
          VerticalOptions=”Center”>
   </Image>
  </Grid>
 </DataTemplate>
</ListView:SfListView.ItemTemplate>
```

### Defining swipe templates

You can customize the UI to be displayed when performing swiping actions using the [StartSwipeTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.SfListView.html#Syncfusion_Maui_ListView_SfListView_StartSwipeTemplate "StartSwipeTemplate property of .NET MAUI ListView") and [EndSwipeTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.SfListView.html#Syncfusion_Maui_ListView_SfListView_EndSwipeTemplate "EndSwipeTemplate property of .NET MAUI ListView") properties.

In this demo, we are going to display the archive and delete icons at the start and end of swiping, respectively.

```xml
<ListView:SfListView.StartSwipeTemplate>
 <DataTemplate>
  <Grid BackgroundColor=”#D8F3D4”>
   <Label Text=”&#xe71C;”
          FontFamily=’{OnPlatform Android=ListViewFontIcons.ttf#,UWP=ListViewFontIcons.ttf#ListViewFontIcons,MacCatalyst=ListViewFontIcons,iOS=ListViewFontIcons}’
          TextColor=”Green”
          HorizontalOptions=”Center”
          FontSize=”22”
          FontAttributes=”Bold”
          VerticalOptions=”Center”>
   </Label>
 
  </Grid>
 </DataTemplate>
</ListView:SfListView.StartSwipeTemplate>
<ListView:SfListView.EndSwipeTemplate>
 <DataTemplate>
  <Grid BackgroundColor=”#F4DEDE”
        x:Name=”listViewGrid”>
   <Label Text=”&#xe716;”
          FontFamily=’{OnPlatform Android=ListViewFontIcons.ttf#,UWP=ListViewFontIcons.ttf#ListViewFontIcons,MacCatalyst=ListViewFontIcons,iOS=ListViewFontIcons}’
          TextColor=”DarkRed”
          HorizontalOptions=”Center”
          FontSize=”26”
          VerticalOptions=”Center”>
   </Label>
  </Grid>
 </DataTemplate>
</ListView:SfListView.EndSwipeTemplate>
```

Refer to the following images.
<table style="width: 627px;">
<tbody>
<tr style="background: none;">
<td style="width: 313.5px; border: none !important;">
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Archive-Icon.png" alt="Archive Icon" style="width:100%">

  <figcaption>Archive Icon</figcaption>

</figure></td>
<td style="width: 313.5px; border: none !important;">

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Delete-Icon-1.png" alt="Delete Icon" style="width:100%">

  <figcaption>Delete Icon</figcaption>

</figure></td>
</tr>
</tbody>
</table>
Swipe actions defined in the ViewModel will be executed from the [SwipeEnded](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.SfListView.html#Syncfusion_Maui_ListView_SfListView_SwipeEnded "SwipeEnded event of .NET MAUI ListView") event to achieve the Outlook-like swiping behavior. The **SwipeEnded** event will be raised when you complete the swiping action.

Refer to the following code example.

```csharp
Private async void ListView_SwipeEnded(object sender, Syncfusion.Maui.ListView.SwipeEndedEventArgs e)
{
  if (e.Offset <= 100)
  {
    return;
  }
 
  if (e.Direction == SwipeDirection.Right)
  {
    ViewModel.ArchiveCommand.Execute(null);
  }
 
  if (e.Direction == SwipeDirection.Left)
  {
    ViewModel.DeleteImageCommand.Execute(null);
  }
}

```

Finally, the actual code does the indefinite swiping, like in Outlook. In it, we use the [SwipeOffset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.SfListView.html#Syncfusion_Maui_ListView_SfListView_SwipeOffset "SwipeOffset property of .NET MAUI ListView") property by considering the width or height of the .NET MAUI ListView control with the [SfListView.Orientation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.SfListView.html#Syncfusion_Maui_ListView_SfListView_Orientation "Orientation property of .NET MAUI ListView") property accordingly.

```csharp
Private void ListView_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
  if (e.PropertyName == “Width” && ListView.Orientation == ItemsLayoutOrientation.Vertical && ListView.SwipeOffset != ListView.Width)
     ListView.SwipeOffset = ListView.Width;
  else if (e.PropertyName == “Height” && ListView.Orientation == ItemsLayoutOrientation.Horizontal && ListView.SwipeOffset != ListView.Height)
     ListView.SwipeOffset = ListView.Height;
}

```

To summarize, each **InboxInfo** model population and swiping action is done in the ViewModel’s **InboxInfos** collection property and **Commands,** respectively. The **InboxInfos** collection will be bound to the .NET MAUI ListView on your XAML page. The **SwipeOffset** will be updated based on the orientation, swiping will be updated based on the swiping actions listed in the **SwipeEnded** event, and other UI-related actions will be handled in the **Behavior** class.

After executing the previous code examples, we will get output like the following GIF image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Outlook-like-swiping-in-.NET-MAUI-Application-using-the-ListView-control.gif" alt="Outlook-like swiping in .NET MAUI Application using the ListView control" style="width:100%">

  <figcaption>Outlook-like swiping in the .NET MAUI application using the ListView control</figcaption>

</figure>

## GitHub reference

You can download the entire code example for [Outlook-like swiping in .NET MAUI ListView](https://github.com/SyncfusionExamples/outlook-like-swiping-.net-maui-listview "Outlook-like swiping in .NET MAUI ListView demo on GitHub") on GitHub.

## Conclusion

Thanks for reading! In this blog, we have seen how to achieve an Outlook-like swiping feature in your .NET MAUI app using the Syncfusion [.NET MAUI ListView](https://www.syncfusion.com/maui-controls/maui-listview "Syncfusion .NET MAUI ListView"). Try out the steps in this blog and leave your feedback in the comments section below!

For current customers, the newest version of Essential Studio for .NET MAUI is available from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not a Syncfusion customer, you can always download our [free evaluation](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to see all our controls.

For questions, you can reach us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms "Syncfusion Feedback Portal"). We are always happy to assist you!

## **Related blogs**

- [Draw 2D Graphics in .NET MAUI’s GraphicsView](https://www.syncfusion.com/blogs/post/draw-2d-graphics-in-dotnet-maui-graphicsview.aspx "Blog: Draw 2D Graphics in .NET MAUI’s GraphicsView")
- [Keyboard Shortcuts in .NET MAUI Scheduler](https://www.syncfusion.com/blogs/post/keyboard-shortcuts-in-dotnet-maui-scheduler.aspx "Blog: Keyboard Shortcuts in .NET MAUI Scheduler")
- [4 Impressive Features of .NET MAUI in .NET 7](https://www.syncfusion.com/blogs/post/4-impressive-features-of-net-maui-in-net-7.aspx "Blog: 4 Impressive Features of .NET MAUI in .NET 7")
- [Create Group Chat Profile View in .NET MAUI App](https://www.syncfusion.com/blogs/post/create-group-chat-profile-view-in-net-maui-app.aspx "Blog: Create Group Chat Profile View in .NET MAUI App")