列表外觀

使用頁眉，頁腳，組和可變高度單元格自定義ListView。

PDF用於離線使用

下載PDF

相關樣品：

讓我們知道你對此的感受

最後更新：2016年3月

ListView除了基礎之外，還有控制整體列表表現的選項ViewCell。選項包括：

分組 - ListView中的組項目，以便於導航和改進組織。
頁眉和頁腳 - 在視圖的開頭和結尾顯示信息，並與其他項目滾動。
行分隔符 - 顯示或隱藏項之間的分隔線。
可變高度行 - 默認情況下，所有行都是相同的高度，但是這可以被更改爲允許顯示具有不同高度的行。

分組

通常，當連續滾動列表中呈現時，大量數據可能變得笨重。啓用分組可以通過更好地組織內容和激活導航數據更容易的平臺特定控件來改善用戶體驗。

當爲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，使得它容易地觀看顯示在單元格。

請注意，如果此功能過度使用，則性能下降的可能性很大。

Xamarin.Forms 用戶界面——控件——ListView——List外觀

列表外觀

分組

自定義分組

頁眉和頁腳

行分隔符

行高

自定義固定行高度

不平行

運行時調整行大小

Xamarin.Forms 用戶界面——控件——ListView——Cell 外觀

Xamarin.Forms 用戶界面——控件——佈局——創建自定義佈局

Xamarin.Forms 用戶界面——控件——主題——Light Theme

Xamarin.Forms 用戶界面——控件——ListView——ListView 性能

Xamarin.Forms 用戶界面——控件——佈局——Layout for Tablet and Desktop apps

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結