Vzhled Objektu ListView

Umožňuje Xamarin.FormsListView přizpůsobit prezentaci seznamu kromě ViewCell instancí pro každý řádek v seznamu.

Seskupení

Velké sady dat se můžou stát nepraktným, když se budou zobrazovat v neustále posouvání seznamu. Povolení seskupování může v těchto případech zlepšit uživatelské prostředí lepším uspořádáním obsahu a aktivací ovládacích prvků specifických pro platformu, které usnadňují navigaci v datech.

Při aktivaci seskupení pro každou ListViewskupinu se přidá řádek záhlaví.

Povolení seskupování:

• Vytvořte seznam seznamů (seznam skupin, každá skupina je seznamem prvků).
• ListViewNastavte ho ItemsSource na tento seznam.
• Nastavte IsGroupingEnabled na true.
• Nastavte GroupDisplayBinding vazbu na vlastnost skupin, které se používají jako název skupiny.
• [Volitelné] Nastavte GroupShortNameBinding vazbu na vlastnost skupin, které se používají jako krátký název skupiny. Krátký název se používá pro seznamy přeskakování (pravý sloupec v iOSu).

Začněte vytvořením třídy pro skupiny:

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; }
    }

Ve výše uvedeném kódu je seznam, All který bude předán našemu ListView jako zdroj vazby. Title a ShortName jsou vlastnosti, které se použijí pro záhlaví skupin.

V této fázi All je prázdný seznam. Přidejte statický konstruktor tak, aby se seznam naplnil při spuštění programu:

static PageTypeGroup()
{
    List<PageTypeGroup> Groups = new List<PageTypeGroup> {
            new PageTypeGroup ("Alpha", "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
}

Ve výše uvedeném kódu můžeme také volat Add prvky Groups, které jsou instancemi typu PageTypeGroup. Tato metoda je možná, protože PageTypeGroup dědí z List<PageModel>.

Tady je XAML pro zobrazení seskupovaného seznamu:

<?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>

Tento XAML provádí následující akce:

• Nastavte GroupShortNameBinding na vlastnost definovanou ShortName v naší třídě skupiny.
• Nastavte GroupDisplayBinding na vlastnost definovanou Title v naší třídě skupiny.
• Nastavit IsGroupingEnabled na true
• Změna seznamu ListViewseskupených položek ItemsSource

Následující snímek obrazovky ukazuje výsledné uživatelské rozhraní:

Přizpůsobení seskupování

Pokud je v seznamu povolené seskupení, můžete také upravit záhlaví skupiny.

Podobá se tomu, jak ListView má ItemTemplate definovat, jak se zobrazují řádky, ListView má .GroupHeaderTemplate

Tady je příklad přizpůsobení záhlaví skupiny v JAZYCE 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>

Záhlaví a zápatí

ListView může zobrazit záhlaví a zápatí, které se posunou s prvky seznamu. Záhlaví a zápatí můžou být řetězce textu nebo složitější rozložení. Toto chování je oddělené od skupin oddílů.

Můžete nastavit Header hodnotu nebo Footer na string hodnotu nebo je můžete nastavit na složitější rozložení. Existují také HeaderTemplate FooterTemplate vlastnosti, které umožňují vytvořit složitější rozložení pro záhlaví a zápatí, které podporují datové vazby.

Pokud chcete vytvořit základní záhlaví nebo zápatí, stačí nastavit vlastnosti Záhlaví nebo zápatí na text, který chcete zobrazit. V kódu:

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

V JAZYCE XAML:

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

Pokud chcete vytvořit vlastní záhlaví a zápatí, definujte zobrazení Záhlaví a zápatí:

<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>

Viditelnost posuvníku

Třída ListView má HorizontalScrollBarVisibility a VerticalScrollBarVisibility vlastnosti, které získají nebo nastaví ScrollBarVisibility hodnotu, která představuje, když je vodorovný nebo svislý posuvník viditelný. Obě vlastnosti lze nastavit na následující hodnoty:

• Default označuje výchozí chování posuvníku pro platformu a je výchozí hodnotou pro vlastnosti HorizontalScrollBarVisibility a VerticalScrollBarVisibility vlastnosti.
• Always označuje, že posuvníky budou viditelné, i když se obsah vejde do zobrazení.
• Never označuje, že posuvníky nebudou viditelné, i když se obsah nevejde do zobrazení.

Oddělovače řádků

Oddělovače se ve výchozím nastavení zobrazují mezi ListView prvky v iOSu a Androidu. Pokud chcete skrýt oddělovače v iOSu a Androidu, nastavte SeparatorVisibility vlastnost v ListView. Možnosti pro SeparatorVisibility :

• Výchozí – zobrazuje čáru oddělovače v iOSu a Androidu.
• Žádné – skryje oddělovač na všech platformách.

Výchozí viditelnost:

C#:

SeparatorDemoListView.SeparatorVisibility = SeparatorVisibility.Default;

XAML:

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

None:

C#:

SeparatorDemoListView.SeparatorVisibility = SeparatorVisibility.None;

XAML:

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

Můžete také nastavit barvu čáry oddělovače prostřednictvím SeparatorColor vlastnosti:

C#:

SeparatorDemoListView.SeparatorColor = Color.Green;

XAML:

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

Poznámka:

Nastavení některé z těchto vlastností v Androidu po načtení způsobuje velkou pokutu ListView za výkon.

Výška řádku

Všechny řádky v objektu ListView mají ve výchozím nastavení stejnou výšku. ListView má dvě vlastnosti, které lze použít ke změně chování:

• HasUnevenRows – true/false hodnota, řádky mají různé výšky, pokud jsou nastaveny na true. Výchozí hodnota falseje .
• RowHeight – nastaví výšku každého řádku, pokud HasUnevenRows je false.

Výšku všech řádků můžete nastavit nastavením RowHeight vlastnosti v objektu ListView.

Vlastní pevná výška řádku

C#:

RowHeightDemoListView.RowHeight = 100;

XAML:

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

Nerovnoměrné řádky

Pokud chcete, aby jednotlivé řádky měly různé výšky, můžete vlastnost nastavit HasUnevenRows na truehodnotu . Výška řádků nemusí být ručně nastavena HasUnevenRows tak, aby byla nastavena na truehodnotu , protože výška se automaticky vypočítá Xamarin.Forms.

C#:

RowHeightDemoListView.HasUnevenRows = true;

XAML:

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

Změna velikosti řádků za běhu

Jednotlivé ListView řádky lze programově změnit velikost za běhu za předpokladu HasUnevenRows , že je vlastnost nastavena na true. Metoda Cell.ForceUpdateSize aktualizuje velikost buňky, i když není aktuálně viditelná, jak je znázorněno v následujícím příkladu kódu:

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 ();
    }
}

Obslužná OnImageTapped rutina události se spustí v reakci na Image klepnutí na buňku a zvětšuje velikost Image zobrazené v buňce tak, aby se dala snadno zobrazit.

Upozorňující

Nadměrné využití změny velikosti řádku modulu runtime může způsobit snížení výkonu.

Související odkazy

• Zpráva k vydání verze 1.4
• Zpráva k vydání verze 1.3