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
What You Need to Know About Empowering Your SMB with Cloud Workspaces!

smb, cloud, workspaceoncloud, sme
Image
Unlocking Practical Machine Learning Skills with DataTalksClub's Machine Learning Zoomcamp
Image
Metode Main Judi Online dengan Optimis
Image
My Developer Resolutions for 2025

growth, continuouslearning, webdev, machinelearning
Image
Insomnia vs SoapUI: A Comparative Analysis

insomnia, soapui, echoapi, programming
Image
How do Transformers work in LLMs?
Image
Are You Getting The Most From Your Self Propelled Wheelchair With Power Assist?
Image
How AI Is Changing the Developer's Role in 2024: Skills You Need and Where to Grow

beginners, ai, productivity, career
Image
How to Get Around IP Bans in 2024

howtounblockipban, howtogetaroundipbans
Image
Steam deck giveaway: quick ways to grab one
Image
Codigger Desktop Mode：Size Look
Image
꽁머니와 천연 자원, 자원과 기회의 조화
Image
Its History Of Boiler Gas Engineer
Image
Cisza w Domu: Sposoby na Wyciszanie Ścian
Image
Etkin Ajans - Ucuz Takipci Satin Al
Image
banyak usul saat memutuskan permainan slots online
Image
Data Analyst Resume Examples

webdev, javascript, beginners, tutorial
Image
꽁머니, 제대로 알고 활용하자
Image
꽁머니를 활용하는 스마트한 전략
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .