Xamarin.Forms 用户界面——控件——ListView——List外观

最新推荐文章于 2021-01-31 08:00:00 发布

xpHoloAI

最新推荐文章于 2021-01-31 08:00:00 发布

阅读量2k

点赞数

Xamarin 同时被 3 个专栏收录

73 篇文章 4 订阅

订阅专栏

xamarin.forms

73 篇文章 6 订阅

订阅专栏

Xamarin.Forms 跨平台新势力

73 篇文章 43 订阅

订阅专栏

列表外观

使用页眉，页脚，组和可变高度单元格自定义ListView。

PDF用于离线使用

下载PDF

分组

通常，当连续滚动列表中呈现时，大量数据可能变得笨重。启用分组可以通过更好地组织内容和激活导航数据更容易的平台特定控件来改善用户体验。

当为a激活分组时ListView，为每个组添加标题行。

启用分组：

创建列表列表（组列表，每个组是元素列表）。
设置ListView的ItemsSource这一名单。
设置IsGroupingEnabled为true。
设置GroupDisplayBinding为绑定到用作组的标题的组的属性。
[可选]设置GroupShortNameBinding为绑定到用作组的短名称的组的属性。短名称用于跳转列表（iOS上的rigt侧列，Windows Phone上的瓦格）。

首先为组创建一个类：

public class PageTypeGroup : List<PageModel>
    {
        public string Title { get; set; }
        public string ShortName { get; set; } //will be used for jump lists
        public string Subtitle { get; set; }
        private PageTypeGroup(string title, string shortName)
        {
            Title = title;
            ShortName = shortName;
        }

        public static IList<PageTypeGroup> All { private set; get; }
    }

在上面的代码All中，将作为绑定源提供给ListView的列表。Title并且ShortName是将用于组标题的属性。

在这个阶段，All是一个空的名单。添加静态构造函数，以便在程序启动时填充列表：

static PageTypeGroup()
{
    List<PageTypeGroup> Groups = new List<PageTypeGroup> {
            new PageTypeGroup ("Alfa", "A"){
                new PageModel("Amelia", "Cedar", new switchCellPage(),""),
                new PageModel("Alfie", "Spruce", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Ava", "Pine", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Archie", "Maple", new switchCellPage(), "grapefruit.jpg")
            },
            new PageTypeGroup ("Bravo", "B"){
                new PageModel("Brooke", "Lumia", new switchCellPage(),""),
                new PageModel("Bobby", "Xperia", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Bella", "Desire", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Ben", "Chocolate", new switchCellPage(), "grapefruit.jpg")
            }
        }
        All = Groups; //set the publicly accessible list
}

在上面的代码中，我们还可以调用Add元素groups，它们是类型的实例PageTypeGroup。这是可能的，因为 PageTypeGroup继承List<PageModel>。这是上面列出的列表模式的示例。

这是用于显示分组列表的XAML：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DemoListView.GroupingViewPage"
    <ContentPage.Content>
        <ListView  x:Name="GroupedView"
        GroupDisplayBinding="{Binding Title}"
        GroupShortNameBinding="{Binding ShortName}"
        IsGroupingEnabled="true">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}"
                     Detail="{Binding Subtitle}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

这导致以下结果：

请注意，我们有：

设置GroupShortNameBinding为ShortName我们组类中定义的属性
设置GroupDisplayBinding为Title我们组类中定义的属性
设置IsGroupingEnabled为true
改变了ListView的ItemsSource，以分组名单

自定义分组

现在我们已经看到了如何在ListView中实现基本分组，让我们看看如何自定义组头的显示。

如何在类似ListView有ItemTemplate定义列的显示方式，ListView有一个GroupHeaderTemplate。这是来自上面的ListView的示例，具有自定义组头模板：

以下是在XAML中完成该设计的方法：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DemoListView.GroupingViewPage">
    <ContentPage.Content>
        <ListView x:Name="GroupedView"
         GroupDisplayBinding="{Binding Title}"
         GroupShortNameBinding="{Binding ShortName}"
         IsGroupingEnabled="true">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}"
                    Detail="{Binding Subtitle}"
                    TextColor="#f35e20"
                    DetailColor="#503026" />
                </DataTemplate>
            </ListView.ItemTemplate>
            <!-- Group Header Customization-->
            <ListView.GroupHeaderTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}"
                    Detail="{Binding ShortName}"
                    TextColor="#f35e20"
                    DetailColor="#503026" />
                </DataTemplate>
            </ListView.GroupHeaderTemplate>
            <!-- End Group Header Customization
        </ListView>
    </ContentPage.Content>
</ContentPage>

页眉和页脚

ListView可以显示与列表的元素一起滚动的页眉和页脚。页眉和页脚可以是文本的字符串或更复杂的布局。请注意，这与区段组是分开的。

您可以设置Header和/或Footer简单的字符串值，也可以将它们设置为更复杂的布局。也有HeaderTemplate和FooterTemplate，让您创建支持数据绑定的页眉和页脚更复杂的布局特性。

要创建一个简单的页眉/页脚，只需将页眉或页脚属性设置为要显示的文本即可。代码：

ListView HeaderList = new ListView() {
    Header = "Header",
    Footer = "Footer"
    };

在XAML中：

<ListView  x:Name="HeaderList"  Header="Header" Footer="Footer"></ListView>

要创建自定义的页眉和页脚，请定义页眉和页脚视图：

<ListView.Header>
    <StackLayout Orientation="Horizontal">
        <Label Text="Header"
        TextColor="Olive"
        BackgroundColor="Red" />
    </StackLayout>
</ListView.Header>
<ListView.Footer>
    <StackLayout Orientation="Horizontal">
        <Label Text="Footer"
        TextColor="Gray"
        BackgroundColor="Blue" />
    </StackLayout>
</ListView.Footer>

行分隔符

ListView在iOS和Android上，默认情况下，分隔符线在元素之间显示。Windows Phone不支持按照该平台UX指南的分隔符。如果您希望在iOS和Android上隐藏分隔线，请SeparatorVisibility在ListView上设置属性。选项SeparatorVisibility是：

默认 - 在iOS和Android上显示分隔线。
无 - 在所有平台上隐藏分隔符。

默认可见性：

C＃：

SepratorDemoListView.SeparatorVisibility = SeparatorVisibility.Default;

XAML：

<ListView x:Name="SeparatorDemoListView" SeparatorVisibility="Default" />

没有：

C＃：

SepratorDemoListView.SeparatorVisibility = SeparatorVisibility.None;

XAML：

<ListView x:Name="SeparatorDemoListView" SeparatorVisibility="None" />

您还可以通过SeparatorColor属性设置分隔线的颜色：

C＃：

SepratorDemoListView.SeparatorColor = Color.Green;

XAML：

<ListView x:Name="SeparatorDemoListView" SeparatorColor="Green" />

注意：在加载后，在Android上设置这些属性之一ListView会导致很大的性能损失。

行高

默认情况下，ListView中的所有行都具有相同的高度。ListView有两个属性可用于更改该行为：

HasUnevenRows- true/ falsevalue，行设置为不同的高度true。默认为false。
RowHeight-设置每行的高度时，HasUnevenRows是false。

您可以通过设置所有行的高度来设置RowHeight属性ListView。

自定义固定行高度

C＃：

RowHeightDemoListView.RowHeight = 100;

XAML：

<ListView x:Name="RowHeightDemoListView" RowHeight="100" />

不平行

如果您希望单独的行具有不同的高度，您可以将HasUnevenRows属性设置为true。请注意，一旦HasUnevenRows设置了行高，则不必手动设置true，因为Xamarin.Forms将自动计算高度。

C＃：

RowHeightDemoListView.HasUnevenRows = true;

XAML：

<ListView x:Name="RowHeightDemoListView" HasUnevenRows="true" />

运行时调整行大小

ListView只要HasUnevenRows属性设置为单独的行可以在运行时以编程方式调整大小true。该Cell.ForceUpdateSize方法更新单元格的大小，即使它当前不可见，如下面的代码示例所示：

void OnImageTapped (object sender, EventArgs args)
{
    var image = sender as Image;
    var viewCell = image.Parent.Parent as ViewCell;

    if (image.HeightRequest < 250) {
        image.HeightRequest = image.Height + 100;
        viewCell.ForceUpdateSize ();
    }
}

的OnImageTapped事件处理程序响应于执行Image在被窃听的细胞，并且增加了的尺寸Image，使得它容易地观看显示在单元格。

请注意，如果此功能过度使用，则性能下降的可能性很大。

xpHoloAI

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Xamarin.Forms 用户界面——控件——ListView——List外观

列表外观使用页眉，页脚，组和可变高度单元格自定义ListView。PDF用于离线使用下载PDF相关样品：分组自定义渲染器视图动态调整行大小让我们知道你对此的感受最后更新：2016年3月ListView除了基础之外，还有控制整体列表表现的选项ViewCell。选项包括：
复制链接

扫一扫