控制/列表视图/手势

对。net MAUI的Telerik UI不熟悉吗?开始一个30天的免费试用

.NET MAUI ListView单元格滑动

Cell swipe允许终端用户在Cell上使用滑动手势。当用户滑动时，他们会显示一个指定的自定义视图，其中包含按钮、图像等。

下图显示了向右滑动可以在左边显示一个删除按钮:

ListView单元格滑动手势＂></p> <p>如果用户向左滑动，可以显示另一个自定义视图。在这种情况下，Cell Swipe在右侧显示自定义视图。只要用户轻击滑过的项目或ListView上的任何位置，项目就会返回到其原始位置。</p> <h2 id=属性

您可以使用以下RadListView属性来配置单元格滑动功能:

  • IsItemSwipeEnabled（保龄球) -启用或禁用Cell Swipe功能。默认值为False。
  • SwipeThreshold（双定义触发该功能所需的滑动手势的长度(以像素为单位)。较短的滑动手势不受尊重。缺省值为0。
  • SwipeOffset（厚度-指定将被滑动的单元移动到一边并将其固定在那里的程度。缺省值是100。
  • ItemSwipeContentTemplate（DataTemplate) -定义了当用户滑动单元格时将显示的内容。

的SwipeThreshold值必须小于SwipeOffset价值。这是必需的，因为SwipeThreshold定义触发Cell swipe功能并显示自定义视图的最小滑动手势长度。

方法

以下RadListView方法与单元格滑动特性相关:

  • 无效EndItemSwipe(保龄球isAnimated) -将滑动的项目移动到其默认位置。

事件

以下RadListView事件与单元格滑动特性相关:

  • ItemSwipeStarting:当用户发起滑动手势时发生。事件参数属于ItemSwipeStartingEventArgs提供以下属性的类型:
    • 项(object):要滑动的项目。
    • 取消(bool):如果将此值设置为假，刷卡将被取消。
  • ItemSwiping:在用户滑动项目时发生。事件参数属于ItemSwipingEventArgs提供以下属性的类型:
    • 项(object):正在被滑动的项目。
    • 抵消(双):当前滑动偏移量。
  • ItemSwipeCompleted:当用户完成滑动手势时发生。事件参数属于ItemSwipeCompletedEventArgs提供以下属性的类型:
    • 项(对象):被滑动的项目。
    • 抵消(双):物品被放下时的滑动偏移量。

命令

除了滑动事件，RadListView还提供了以下与某些滑动动作相关的命令:

  • ItemSwipeStarting
  • ItemSwiping
  • ItemSwipeCompleted

有关如何使用ListView命令的详细信息，请参见命令。

例子

RadListView滑动事件允许您配置依赖于滑动方向、滑动手势长度或数据项的自定义动作。

或者，您可以向滑动内容添加交互元素，并仅使用滑动手势来显示该内容。然后，用户可以选择如何与显示的内容进行交互。

滑动事件示例

下面的示例演示如何使用ItemSwipeCompleted事件。根据滑动手势的长度，我们将修改数据项或将其从源中删除。

ListView单元格滑动＂></p> <ol> <li><p>为ListView添加ViewModel:</p><p></p> <div class= 

公共类Mail: NotifyPropertyChangedBase {bool未读;
公共字符串发送者{获取;设置;}
公共字符串主题{获取;设置;}
public bool IsUnread {get{返回IsUnread;} set {this。UpdateValue (ref。isUnread值);}}
公共类ViewModel{公共ViewModel(){这。来源= new ObservableCollection{新邮件{发件人=“Terry Tye”，主题=“Re: Summer Vacation”，IsUnread = true}，新邮件{发件人=“Felicia Keegan”，主题=“研讨会邀请”，IsUnread = true}，新邮件{发件人=“Jared Linton”，主题=“折扣码”}，新邮件{发件人=“Mark Therese”，主题=“快速反馈”，IsUnread = true}，新邮件{发件人=“Elvina Randall”，主题=“生日快乐!”}，新邮件{发件人=“Emilia Porter”，主题=“检查附件”，IsUnread = true}，新邮件{发件人=“Jared Linton”，主题=“Gillian Flynn”}，新邮件{发件人=“Felicia Keegan”，主题=“Re: Summer Vacation”}，新邮件{发件人=“Felicia Keegan”，主题=“Pictures”}，};}
公共ObservableCollection< Mail>源{get;设置;}
}
1.设置ListView。向左或向右滑动将显示内容，并提示用户完成滑动操作后将发生什么。

    < telerik: RadListView。项Template>
1.定义telerik名称空间:

xmlns: telerik = "http://schemas.telerik.com/2022/xaml/maui＂
1.配置当用户完成滑动手势时发生的情况:

void onitemswipeccompleted(对象发送方，itemswipeccompletedeventargs e) {var listView =发送方作为RadListView;var item = e. Mail;
listView.EndItemSwipe ();如果(e.o doffset >= 70) {item。IsUnread = false;} else if (e.Offset <= -70) {(listView;项sSource as ObservableCollection<Mail>).Remove(item); }
}
我们称之为EndItemSwipe ()方法强制项目转到其默认位置，因为该场景不需要与滑动内容本身进行任何交互。

交互式内容示例

下面的示例演示如何向滑动内容添加删除按钮。我们使用按钮点击事件处理程序从ListView源中删除项。

ListView单元格滑动交互式内容＂></p> <ol> <li><p>添加ListView的视图模型:</p><p></p> <div class= 

公共类书{公共字符串标题{get;设置;}公共字符串作者{获取;设置;}}
公共类ViewModel{公共ViewModel(){这。源= new ObservableCollection <书>{新书{Title =“错在我们的明星”,作者=“约翰·格林”},新书{Title =“发散”,作者=“维罗妮卡罗斯”},新书{Title =“女孩”,作者=“吉莉安·弗林”},新书{标题=“发条天使”,作者=“卡桑德拉克莱尔”},新书{Title =“火星”,作者=“安迪堰”},新书{标题=“准备好球员之一”,作者=“欧内斯特·克莱恩”},新书{标题=“失去的英雄”,作者=“瑞克赖尔登”},新书{标题=“我们看不见的光”，作者=“安东尼·多尔”}，新书{标题=“Cinder”，作者=“Marissa Meyer”}，新书{标题=“Me Before You”，作者=“Jojo Moyes”}，新书{标题=“the Night Circus”，作者=“Erin Morgenstern”}，};}
公共ObservableCollection< Book>源{get;设置;}
}
1.设置ListView。请注意SwipeOffset等于滑动内容中按钮的宽度。因此，当滑动完成时，显示的内容将是整个按钮。

    < telerik: RadListView。项Template>
1.定义telerik名称空间:

xmlns: telerik = "http://schemas.telerik.com/2022/xaml/maui＂
1.配置当用户完成滑动手势时发生的操作。滑动内容的BindingContext是数据项。这可以用于对数据执行操作。在本例中，我们将从源中删除该项。

void RemoveBook(对象发送方，EventArgs e) {var item =(发送方作为BindableObject)。BindingContext作为Book;(this.listView。BindingContext作为ViewModel).Source.Remove(item);}

有关单元格滑动示例，请转到sdk浏览器演示应用程序然后导航到列表视图->单元格滑动类别。

另请参阅

在本文中
相关文章
没有找到你需要的帮助?
联络支持
Baidu
map