ListView-Darstellung
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 ListView
aktiviert 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
ListView
sItemsSource
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 Groups
aufrufenAdd
, 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
ListView
Die 'sItemsSource
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 ListView
ItemTemplate
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 dieHorizontalScrollBarVisibility
Eigenschaften undVerticalScrollBarVisibility
.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 auftrue
festgelegt sind. Wird standardmäßig auffalse
festgelegt.RowHeight
– legt die Höhe jeder Zeile fest, wennHasUnevenRows
istfalse
.
Sie können die Höhe aller Zeilen festlegen, indem Sie die RowHeight
-Eigenschaft für ListView
festlegen.
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 true
festlegen. Zeilenhöhen müssen nicht manuell festgelegt werden, sobald HasUnevenRows
auf true
festgelegt 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 true
festgelegt. 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.