Achieve Outlook-Like Swiping Using .NET MAUI ListView

Jollen Moyani - Nov 30 '22 - - Dev Community

The .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 property and enabling the swiping feature using the AllowSwiping 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 and add the Syncfusion .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.

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
}
Enter fullscreen mode Exit fullscreen mode

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.

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
}
Enter fullscreen mode Exit fullscreen mode

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.

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);
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Defining the ItemTemplate

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

<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>
Enter fullscreen mode Exit fullscreen mode

Defining swipe templates

You can customize the UI to be displayed when performing swiping actions using the StartSwipeTemplate and EndSwipeTemplate properties.

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

<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>
Enter fullscreen mode Exit fullscreen mode

Refer to the following images.

Archive Icon
Archive Icon
Delete Icon
Delete Icon

Swipe actions defined in the ViewModel will be executed from the SwipeEnded 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.

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

Finally, the actual code does the indefinite swiping, like in Outlook. In it, we use the SwipeOffset property by considering the width or height of the .NET MAUI ListView control with the SfListView.Orientation property accordingly.

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Outlook-like swiping in .NET MAUI Application using the ListView control

Outlook-like swiping in the .NET MAUI application using the ListView control

GitHub reference

You can download the entire code example for Outlook-like swiping in .NET MAUI ListView 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. 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 page. If you are not a Syncfusion customer, you can always download our free evaluation to see all our controls.

For questions, you can reach us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Image
🚀 Your Daily Crypto Job Digest For 02 November!! 🚀

hiring, whoishiring, web3
Image
Solana Safe Transfer (Fat-Finger-proof Transfer)

solana, blockchain, web3, cryptocurrency
Image
Zanurz się w Świecie Mebli: Kreatywność i Styl w Twoim Wnętrzu
Image
Cara Supaya Tak Kalah Waktu Taruhan Judi Online
Image
Trik Daftar Judi Online Bisa dipercaya denganMudah
Image
Panduan Pilih Games Judi Online Berdasarkan Peraturan Main
Image
Stylowe Meble, Które Odmienią Twoje Wnętrze
Image
Your Comprehensive Guide to Workshop Manuals PDF: Accessing Vehicle Repair Knowledge
Image
Top 10 Modern JavaScript Patterns for 2025

webdev, javascript, programming, learning
Image
조이카지노: 재미와 전략의 만남, 당신의 게임 경험을 한층 업그레이드!
Image
How did a dumbo become an Open-Source contributor 🪔

devchallenge, hacktoberfestchallenge, hacktoberfest, opensource
Image
Kabar Penting yang Harus Anda Kenali dalam Situs Judi Online Paling dipercaya
Image
Should You Continue Learn Your Stack or Learn New Tools

javascript, webdev, programming, beginners
Image
cara menang dengan mesin slots online dengan gampang
Image
Share docker image on docker hub

webdev, docker, python, beginners
Image
Managing Software Complexity - The Cynefin Framework

softwarecomplexity, softwaremanagement, cynefinframework, webdev
Image
Anjuran Taruhan Judi Online Modal Kecil Untung Besar
Image
Keeping My Dev Machine Clean with Docker

docker, programming, softwaredevelopment, productivity
Image
agen slots online dengan variasi kelebihan
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .