ListView-Darstellung

Das Beispiel herunterladen

Mit Xamarin.FormsListView können Sie die Darstellung der Liste zusätzlich zu den ViewCell Instanzen für jede Zeile in der Liste anpassen.

Gruppierung

Große Datensätze können unhandlich werden, wenn sie in einer kontinuierlich scrollenden Liste angezeigt werden. Das Aktivieren der Gruppierung kann in diesen Fällen die Benutzerfreundlichkeit verbessern, indem der Inhalt besser organisiert und plattformspezifische Steuerelemente aktiviert werden, die das Navigieren in Daten erleichtern.

Wenn die Gruppierung für ein ListViewaktiviert ist, wird für jede Gruppe eine Headerzeile hinzugefügt.

So aktivieren Sie die Gruppierung:

• Erstellen Sie eine Liste von Listen (eine Liste von Gruppen, wobei jede Gruppe eine Liste von Elementen ist).
• Legen Sie die ListViews ItemsSource auf diese Liste fest.
• Legen Sie IsGroupingEnabled auf TRUE fest.
• Legen Sie fest GroupDisplayBinding , um an die Eigenschaft der Gruppen zu binden, die als Titel der Gruppe verwendet werden.
• [Optional] Legen Sie fest GroupShortNameBinding , um an die Eigenschaft der Gruppen zu binden, die als Kurzname für die Gruppe verwendet werden. Der kurze Name wird für die Sprunglisten (rechte Spalte unter iOS) verwendet.

Erstellen Sie zunächst eine Klasse für die Gruppen:

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

Im obigen Code ist die Liste, All die unserer ListView als Bindungsquelle zugewiesen wird. Title und ShortName sind die Eigenschaften, die für Gruppenüberschriften verwendet werden.

In dieser Phase All ist eine leere Liste. Fügen Sie einen statischen Konstruktor hinzu, damit die Liste beim Programmstart aufgefüllt wird:

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
}

Im obigen Code können wir auch Elemente von GroupsaufrufenAdd, bei denen es sich um Instanzen vom Typ handeltPageTypeGroup. Diese Methode ist möglich, da PageTypeGroup sie von List<PageModel>erbt.

Hier sehen Sie den XAML-Code zum Anzeigen der gruppierten Liste:

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

Dieser XAML-Code führt die folgenden Aktionen aus:

• Legen Sie auf die ShortName in unserer Gruppenklasse definierte Eigenschaft festGroupShortNameBinding.
• Legen Sie auf die Title in unserer Gruppenklasse definierte Eigenschaft festGroupDisplayBinding.
• Auf true festlegen IsGroupingEnabled
• ListViewDie 's ItemsSource in die gruppierte Liste geändert

Der folgende Screenshot zeigt die resultierende Benutzeroberfläche:

Anpassen der Gruppierung

Wenn die Gruppierung in der Liste aktiviert wurde, kann auch der Gruppenheader angepasst werden.

Ähnlich wie der hat ein ListViewItemTemplate zum Definieren, wie Zeilen angezeigt werden, ListView hat ein GroupHeaderTemplate.

Hier finden Sie ein Beispiel für das Anpassen des Gruppenheaders in 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>

Kopf- und Fußzeilen

Es ist möglich, dass eine ListView eine Kopf- und Fußzeile darstellt, die mit den Elementen der Liste scrollen. Die Kopf- und Fußzeile kann Textzeichenfolgen oder ein komplizierteres Layout sein. Dieses Verhalten ist von Abschnittsgruppen getrennt.

Sie können das Header und/oder Footer auf einen string Wert festlegen oder sie auf ein komplexeres Layout festlegen. Es gibt auch HeaderTemplate Eigenschaften und FooterTemplate , mit denen Sie komplexere Layouts für die Kopf- und Fußzeile erstellen können, die die Datenbindung unterstützen.

Um eine einfache Kopf-/Fußzeile zu erstellen, legen Sie einfach die Header- oder Footer-Eigenschaften auf den text fest, den Sie anzeigen möchten. In Code:

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

In XAML:

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

Um eine benutzerdefinierte Kopf- und Fußzeile zu erstellen, definieren Sie die Kopf- und Fußzeilenansichten:

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

Sichtbarkeit der Scrollleiste

Die ListView -Klasse verfügt über HorizontalScrollBarVisibility - und VerticalScrollBarVisibility -Eigenschaften, die einen ScrollBarVisibility Wert abrufen oder festlegen, der darstellt, wenn die horizontale oder vertikale Bildlaufleiste sichtbar ist. Beide Eigenschaften können auf die folgenden Werte festgelegt werden:

• Default gibt das Standardverhalten der Bildlaufleiste für die Plattform an und ist der Standardwert für die HorizontalScrollBarVisibility Eigenschaften und VerticalScrollBarVisibility .
• Always gibt an, dass Bildlaufleisten sichtbar sind, auch wenn der Inhalt in die Ansicht passt.
• Never gibt an, dass Bildlaufleisten nicht sichtbar sind, auch wenn der Inhalt nicht in die Ansicht passt.

Zeilentrennzeichen

Trennlinien werden unter iOS und Android standardmäßig zwischen ListView Elementen angezeigt. Wenn Sie die Trennlinien unter iOS und Android lieber ausblenden möchten, legen Sie die SeparatorVisibility Eigenschaft in Ihrer ListView fest. Die Optionen für SeparatorVisibility sind:

• Standard: Zeigt eine Trennlinie unter iOS und Android an.
• None: Blendet das Trennzeichen auf allen Plattformen aus.

Standardsichtbarkeit:

C#:

SeparatorDemoListView.SeparatorVisibility = SeparatorVisibility.Default;

XAML:

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

Keine:

C#:

SeparatorDemoListView.SeparatorVisibility = SeparatorVisibility.None;

XAML:

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

Sie können auch die Farbe der Trennlinie über die SeparatorColor -Eigenschaft festlegen:

C#:

SeparatorDemoListView.SeparatorColor = Color.Green;

XAML:

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

Hinweis

Wenn Sie eine dieser Eigenschaften unter Android nach dem Laden festlegen, ListView wird eine hohe Leistungseinbuße verursacht.

Zeilenhöhe

Alle Zeilen in einer ListView haben standardmäßig die gleiche Höhe. ListView verfügt über zwei Eigenschaften, die verwendet werden können, um dieses Verhalten zu ändern:

• HasUnevenRows – true/false Wert, Zeilen haben unterschiedliche Höhen, wenn sie auf truefestgelegt sind. Wird standardmäßig auf false festgelegt.
• RowHeight – legt die Höhe jeder Zeile fest, wenn HasUnevenRows ist false.

Sie können die Höhe aller Zeilen festlegen, indem Sie die RowHeight -Eigenschaft für ListViewfestlegen.

Benutzerdefinierte feste Zeilenhöhe

C#:

RowHeightDemoListView.RowHeight = 100;

XAML:

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

Ungleichmäßige Zeilen

Wenn Sie möchten, dass einzelne Zeilen unterschiedliche Höhen aufweisen, können Sie die HasUnevenRows -Eigenschaft auf truefestlegen. Zeilenhöhen müssen nicht manuell festgelegt werden, sobald HasUnevenRows auf truefestgelegt wurde, da die Höhen automatisch von Xamarin.Formsberechnet werden.

C#:

RowHeightDemoListView.HasUnevenRows = true;

XAML:

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

Ändern der Größe von Zeilen zur Laufzeit

Die Größe einzelner ListView Zeilen kann zur Laufzeit programmgesteuert geändert werden, vorausgesetzt, die HasUnevenRows Eigenschaft ist auf truefestgelegt. Die Cell.ForceUpdateSize -Methode aktualisiert die Größe einer Zelle, auch wenn sie derzeit nicht sichtbar ist, wie im folgenden Codebeispiel veranschaulicht:

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

Der OnImageTapped Ereignishandler wird als Reaktion auf eine Image in einer Zelle ausgeführt, die getippt wird, und erhöht die Größe des Image in der Zelle angezeigten, sodass er leicht sichtbar ist.

Warnung

Eine übermäßige Nutzung der Laufzeitzeilengröße kann zu Leistungseinbußen führen.

Verwandte Links

• Gruppierung (Beispiel)
• Benutzerdefinierte Rendereransicht (Beispiel)
• Dynamische Größenänderung von Zeilen (Beispiel)
• Versionshinweise 1.4
• Versionshinweise zu 1.3