新的Telerik UI。net MAUI?开始30天的免费试用

.NET MAUI ListView单元格滑动

单元格滑动允许终端用户在单元格上使用滑动手势。当用户滑动时,会显示一个带有按钮、图像等的指定自定义视图。

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

ListView单元格滑动手势”></p>
         <p>如果用户向左滑动,则可以显示另一个自定义视图。在本例中,Cell Swipe在右侧显示自定义视图。只要用户点击滑动的项目或ListView上的任何位置,项目就会返回到原始位置。</p>
         <h2 id=属性

你可以使用以下RadListView属性来配置Cell Swipe特性:

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

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

方法

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

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

事件

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

  • ItemSwipeStarting:当用户开始滑动手势时发生。事件参数属于ItemSwipeStartingEventArgs类型,提供以下属性:
    • (object):将被滑动的项。
    • 取消(bool):将此值设置为时,刷卡将被取消。
  • ItemSwiping:在用户滑动项目时发生。事件参数属于ItemSwipingEventArgs类型,提供以下属性:
    • (object):正在被滑动的项。
    • 抵消(double):当前的滑动偏移量。
  • ItemSwipeCompleted:当用户完成滑动手势时发生。事件参数属于ItemSwipeCompletedEventArgs类型,提供以下属性:
    • (object):已被滑动的项。
    • 抵消(double):项目被丢弃的滑动偏移量。

命令

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

  • ItemSwipeStarting
  • ItemSwiping
  • ItemSwipeCompleted

有关如何使用ListView命令的更多详细信息,请参见命令

例子

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

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

滑动事件示例

方法的使用方法,示例如下ItemSwipeCompleted事件。根据滑动手势的长度,我们将修改数据项或从源中删除它。

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

公共类邮件:NotifyPropertyChangedBase {bool是否是未读;

发送者{get;设置;}

公共字符串主题{获取;设置;}

public bool IsUnread{获取{返回IsUnread;}设置{this。UpdateValue (ref。isUnread值);}}}

公共类ViewModel{公共ViewModel() {this。来源=新的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名称空间:

1.配置当用户完成滑动手势时会发生什么:

void onitemswipecomplecompleted(对象发送者,ItemSwipeCompletedEventArgs e) {var listView =发送者作为RadListView;var item = e.Item作为邮件;
listView.EndItemSwipe ();if (e.Offset >= 70){项目。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=

public class Book {public string Title {get;设置;}公共字符串作者{获取;设置;}}

公共类ViewModel{公共ViewModel() {this。源= new ObservableCollection <书>{新书{Title =“错在我们的明星”,作者=“约翰·格林”},新书{Title =“发散”,作者=“维罗妮卡罗斯”},新书{Title =“女孩”,作者=“吉莉安·弗林”},新书{标题=“发条天使”,作者=“卡桑德拉克莱尔”},新书{Title =“火星”,作者=“安迪堰”},新书{标题=“准备好球员之一”,作者=“欧内斯特·克莱恩”},新书{标题=“失去的英雄”,作者=“瑞克赖尔登”},新书{书名=“所有我们看不见的光”,作者=“安东尼·多尔”},新书{书名=“煤灰”,作者=“玛萨·梅耶”},新书{书名=“我在你面前”,作者=“乔乔·莫耶斯”},新书{书名=“夜间马戏团”,作者=“艾琳·摩根斯特恩”},};}

公共ObservableCollection< Book>来源{get;设置;}

}

1.设置ListView。注意SwipeOffset等于该按钮在滑动内容中的宽度。因此,当滑动完成时,显示的内容将是整个按钮。

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

1.配置当用户完成滑动手势时发生什么。滑动内容的BindingContext是数据项。这可以用于对数据执行操作。在本例中,我们将从源中删除该项。

void RemoveBook(对象发件人,EventArgs e) {var item =(发件人作为BindableObject)。BindingContext as Book;(this.listView。BindingContext as ViewModel);}

有关单元格滑动示例,请转到sdk浏览器演示应用程序并导航到ListView ->单元格滑动类别。

另请参阅

在本文中
找不到你需要的帮助?
联络支持
Baidu
map