Anpassen der ListView-Zellen DarstellungCustomizing ListView Cell Appearance

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Die- Xamarin.Forms ListView Klasse wird verwendet, um scrollbare Listen darzustellen, die durch die Verwendung von-Elementen angepasst werden können ViewCell .The Xamarin.Forms ListView class is used to present scrollable lists, which can be customized through the use of ViewCell elements. Ein- ViewCell Element kann Text und Bilder anzeigen, den Zustand true/false angeben und Benutzereingaben empfangen.A ViewCell element can display text and images, indicate a true/false state, and receive user input.

Integrierte ZellenBuilt in Cells

Xamarin.Formsenthält integrierte Zellen, die für viele Anwendungen funktionieren: comes with built-in cells that work for many applications:

  • TextCellSteuerelemente werden zum Anzeigen von Text mit einer optionalen zweiten Zeile für Detail Text verwendet.TextCell controls are used for displaying text with an optional second line for detail text.
  • ImageCellSteuerelemente ähneln TextCell s, enthalten aber ein Bild links neben dem Text.ImageCell controls are similar to TextCells but include an image to the left of the text.
  • SwitchCellSteuerelemente werden verwendet, um den Status "ein/aus" oder "true/false" darzustellen und aufzuzeichnen.SwitchCell controls are used to present and capture on/off or true/false states.
  • EntryCellSteuerelemente werden verwendet, um Textdaten darzustellen, die der Benutzer bearbeiten kann.EntryCell controls are used to present text data that the user can edit.

Die SwitchCell -und-Steuer EntryCell Elemente werden üblicherweise im Kontext einer verwendet TableView .The SwitchCell and EntryCell controls are more commonly used in the context of a TableView.

TextcellTextCell

TextCellist eine Zelle zum Anzeigen von Text, optional mit einer zweiten Zeile als Detailtext.TextCell is a cell for displaying text, optionally with a second line as detail text. Der folgende Screenshot zeigt TextCell Elemente unter IOS und Android:The following screenshot shows TextCell items on iOS and Android:

Standard textcell-Beispiel

Textcells werden zur Laufzeit als native Steuerelemente gerendert, sodass die Leistung im Vergleich zu einem benutzerdefinierten sehr gut ist ViewCell .TextCells are rendered as native controls at runtime, so performance is very good compared to a custom ViewCell. Textcells können angepasst werden, sodass Sie die folgenden Eigenschaften festlegen können:TextCells are customizable, allowing you to set the following properties:

  • Text–der Text, der in der ersten Zeile in der großen Schriftart angezeigt wird.Text – the text that is shown on the first line, in large font.
  • Detail–der Text, der unterhalb der ersten Zeile angezeigt wird, in einer kleineren Schriftart.Detail – the text that is shown underneath the first line, in a smaller font.
  • TextColor–die Textfarbe.TextColor – the color of the text.
  • DetailColor–die Farbe des Detail Texts.DetailColor – the color of the detail text

Der folgende Screenshot zeigt TextCell Elemente mit angepassten Farbeigenschaften:The following screenshot shows TextCell items with customized color properties:

Beispiel für benutzerdefinierte textcell

ImageCellImageCell

ImageCell, wie TextCell , kann zum Anzeigen von Text und sekundärem Detail Text verwendet werden, und bietet eine hohe Leistung durch die Verwendung der nativen Steuerelemente der einzelnen Plattformen.ImageCell, like TextCell, can be used for displaying text and secondary detail text, and it offers great performance by using each platform's native controls. ImageCellunterscheidet sich von TextCell insofern, dass ein Bild links neben dem Text angezeigt wird.ImageCell differs from TextCell in that it displays an image to the left of the text.

Der folgende Screenshot zeigt ImageCell Elemente unter IOS und Android: "Default ImageCell example"The following screenshot shows ImageCell items on iOS and Android: "Default ImageCell Example"

ImageCellist nützlich, wenn Sie eine Liste von Daten mit einem visuellen Aspekt anzeigen müssen, z. b. eine Liste von Kontakten oder Filmen.ImageCell is useful when you need to display a list of data with a visual aspect, such as a list of contacts or movies. ImageCells sind anpassbar, sodass Sie Folgendes festlegen können:ImageCells are customizable, allowing you to set:

  • Text–der Text, der in der ersten Zeile in der großen Schriftart angezeigt wird.Text – the text that is shown on the first line, in large font
  • Detail–der Text, der unterhalb der ersten Zeile angezeigt wird, in einer kleineren Schriftart.Detail – the text that is shown underneath the first line, in a smaller font
  • TextColor–die Farbe des Texts.TextColor – the color of the text
  • DetailColor–die Farbe des Detail Texts.DetailColor – the color of the detail text
  • ImageSource–das Bild, das neben dem Text angezeigt werden soll.ImageSource – the image to display next to the text

Der folgende Screenshot zeigt ImageCell Elemente mit angepassten Farbeigenschaften: "angepasste ImageCell example"The following screenshot shows ImageCell items with customized color properties: "Customized ImageCell Example"

Benutzerdefinierte ZellenCustom Cells

Mithilfe von benutzerdefinierten Zellen können Sie Zellen Layouts erstellen, die von den integrierten Zellen nicht unterstützt werden.Custom cells allow you to create cell layouts that aren't supported by the built-in cells. Beispielsweise kann es vorkommen, dass Sie eine Zelle mit zwei Bezeichnungen mit gleicher Gewichtung präsentieren möchten.For example, you may want to present a cell with two labels that have equal weight. Ein TextCell ist unzureichend, weil eine TextCell Bezeichnung hat, die kleiner ist.A TextCell would be insufficient because the TextCell has one label that is smaller. Bei den meisten Zell Anpassungen werden zusätzliche schreibgeschützte Daten (z. b. zusätzliche Bezeichnungen, Bilder oder andere Anzeigeinformationen) hinzugefügt.Most cell customizations add additional read-only data (such as additional labels, images or other display information).

Alle benutzerdefinierten Zellen müssen von abgeleitet ViewCell werden. Dies ist die Basisklasse, die von allen integrierten Zelltypen verwendet wird.All custom cells must derive from ViewCell, the same base class that all of the built-in cell types use.

Xamarin.Formsbietet ein Cachingverhalten für das-Steuerelement, das die Bild Lauf ListView Leistung für einige Arten von benutzerdefinierten Zellen verbessern kann. offers a caching behavior on the ListView control which can improve scrolling performance for some types of custom cells.

Der folgende Screenshot zeigt ein Beispiel für eine benutzerdefinierte Zelle:The following screenshot shows an example of a custom cell:

Beispiel für eine benutzerdefinierte Zelle"Custom Cell Example"

XAMLXAML

Die im vorherigen Screenshot gezeigte benutzerdefinierte Zelle kann mit dem folgenden XAML-Code erstellt werden:The custom cell shown in the previous screenshot can be created with the following 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.ImageCellPage">
    <ContentPage.Content>
        <ListView  x:Name="listView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout BackgroundColor="#eee"
                        Orientation="Vertical">
                            <StackLayout Orientation="Horizontal">
                                <Image Source="{Binding image}" />
                                <Label Text="{Binding title}"
                                TextColor="#f35e20" />
                                <Label Text="{Binding subtitle}"
                                HorizontalOptions="EndAndExpand"
                                TextColor="#503026" />
                            </StackLayout>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

Die XAML funktioniert wie folgt:The XAML works as follows:

  • Die benutzerdefinierte Zelle ist in einer geschachtelt DataTemplate , die sich in befindet ListView.ItemTemplate .The custom cell is nested inside a DataTemplate, which is inside ListView.ItemTemplate. Dies ist der gleiche Prozess wie die Verwendung einer beliebigen integrierten Zelle.This is the same process as using any built-in cell.
  • ViewCellder Typ der benutzerdefinierten Zelle.ViewCell is the type of the custom cell. Das untergeordnete Element des- DataTemplate Elements muss von der-Klasse oder davon abgeleitet sein ViewCell .The child of the DataTemplate element must be of, or derive from, the ViewCell class.
  • Innerhalb ViewCell von kann das Layout durch ein beliebiges Xamarin.Forms Layout verwaltet werden.Inside the ViewCell, layout can be managed by any Xamarin.Forms layout. In diesem Beispiel wird das Layout von einem verwaltet StackLayout , wodurch die Hintergrundfarbe angepasst werden kann.In this example, layout is managed by a StackLayout, which allows the background color to be customized.

Hinweis

Jede Eigenschaft von StackLayout , die bindbar ist, kann innerhalb einer benutzerdefinierten Zelle gebunden werden.Any property of StackLayout that is bindable can be bound inside a custom cell. Diese Funktion wird im XAML-Beispiel jedoch nicht angezeigt.However, this capability is not shown in the XAML example.

CodeCode

Eine benutzerdefinierte Zelle kann auch im Code erstellt werden.A custom cell can also be created in code. Zuerst muss eine benutzerdefinierte Klasse, die von abgeleitet ViewCell wird, erstellt werden:First, a custom class that derives from ViewCell must be created:

public class CustomCell : ViewCell
    {
        public CustomCell()
        {
            //instantiate each of our views
            var image = new Image ();
            StackLayout cellWrapper = new StackLayout ();
            StackLayout horizontalLayout = new StackLayout ();
            Label left = new Label ();
            Label right = new Label ();

            //set bindings
            left.SetBinding (Label.TextProperty, "title");
            right.SetBinding (Label.TextProperty, "subtitle");
            image.SetBinding (Image.SourceProperty, "image");

            //Set properties for desired design
            cellWrapper.BackgroundColor = Color.FromHex ("#eee");
            horizontalLayout.Orientation = StackOrientation.Horizontal;
            right.HorizontalOptions = LayoutOptions.EndAndExpand;
            left.TextColor = Color.FromHex ("#f35e20");
            right.TextColor = Color.FromHex ("503026");

            //add views to the view hierarchy
            horizontalLayout.Children.Add (image);
            horizontalLayout.Children.Add (left);
            horizontalLayout.Children.Add (right);
            cellWrapper.Children.Add (horizontalLayout);
            View = cellWrapper;
        }
    }

Im Seitenkonstruktor wird die-Eigenschaft von ListView ItemTemplate auf eine DataTemplate mit dem CustomCell angegebenen Typ festgelegt:In the page constructor, the ListView's ItemTemplate property is set to a DataTemplate with the CustomCell type specified:

public partial class ImageCellPage : ContentPage
    {
        public ImageCellPage ()
        {
            InitializeComponent ();
            listView.ItemTemplate = new DataTemplate (typeof(CustomCell));
        }
    }

Bindungs Kontext ÄnderungenBinding Context Changes

Beim Binden an die Instanzen eines benutzerdefinierten Zelltyps sollten die UI-Steuerelemente, die BindableProperty die Werte anzeigen, die-Überschreibung BindableProperty verwenden, OnBindingContextChanged um die Daten festzulegen, die in jeder Zelle angezeigt werden sollen, und nicht den zellkonstruktor, wie im folgenden Codebeispiel gezeigt:When binding to a custom cell type's BindableProperty instances, the UI controls displaying the BindableProperty values should use the OnBindingContextChanged override to set the data to be displayed in each cell, rather than the cell constructor, as demonstrated in the following code example:

public class CustomCell : ViewCell
{
    Label nameLabel, ageLabel, locationLabel;

    public static readonly BindableProperty NameProperty =
        BindableProperty.Create ("Name", typeof(string), typeof(CustomCell), "Name");
    public static readonly BindableProperty AgeProperty =
        BindableProperty.Create ("Age", typeof(int), typeof(CustomCell), 0);
    public static readonly BindableProperty LocationProperty =
        BindableProperty.Create ("Location", typeof(string), typeof(CustomCell), "Location");

    public string Name
    {
        get { return(string)GetValue (NameProperty); }
        set { SetValue (NameProperty, value); }
    }

    public int Age
    {
        get { return(int)GetValue (AgeProperty); }
        set { SetValue (AgeProperty, value); }
    }

    public string Location
    {
        get { return(string)GetValue (LocationProperty); }
        set { SetValue (LocationProperty, value); }
    }
    ...

    protected override void OnBindingContextChanged ()
    {
        base.OnBindingContextChanged ();

        if (BindingContext != null)
        {
            nameLabel.Text = Name;
            ageLabel.Text = Age.ToString ();
            locationLabel.Text = Location;
        }
    }
}

Die OnBindingContextChanged außer Kraft setzung wird aufgerufen, wenn das Ereignis ausgelöst wird BindingContextChanged , als Reaktion auf den Wert der geänderten BindingContext Eigenschaft.The OnBindingContextChanged override will be called when the BindingContextChanged event fires, in response to the value of the BindingContext property changing. Daher sollten die Benutzeroberflächen-Steuerelemente, die BindingContext die Werte anzeigen, die Daten festlegen, wenn Sie geändert werden BindableProperty .Therefore, when the BindingContext changes, the UI controls displaying the BindableProperty values should set their data. Beachten Sie, dass BindingContext auf einen Wert geprüft werden muss null , da dieser von für Garbage Collection festgelegt werden kann Xamarin.Forms , was wiederum dazu führt, dass die OnBindingContextChanged außer Kraft Setzung aufgerufen wird.Note that the BindingContext should be checked for a null value, as this can be set by Xamarin.Forms for garbage collection, which in turn will result in the OnBindingContextChanged override being called.

Alternativ können UI-Steuerelemente an die- BindableProperty Instanzen gebunden werden, um ihre Werte anzuzeigen. Dadurch entfällt die Notwendigkeit, die-Methode zu überschreiben OnBindingContextChanged .Alternatively, UI controls can bind to the BindableProperty instances to display their values, which removes the need to override the OnBindingContextChanged method.

Hinweis

Stellen Sie beim Überschreiben OnBindingContextChanged sicher, dass die-Methode der Basisklasse OnBindingContextChanged aufgerufen wird, damit registrierte Delegaten das BindingContextChanged Ereignis empfangen.When overriding OnBindingContextChanged, ensure that the base class's OnBindingContextChanged method is called so that registered delegates receive the BindingContextChanged event.

In XAML können Sie den benutzerdefinierten Zellentyp an Daten binden, wie im folgenden Codebeispiel gezeigt:In XAML, binding the custom cell type to data can be achieved as shown in the following code example:

<ListView x:Name="listView">
    <ListView.ItemTemplate>
        <DataTemplate>
            <local:CustomCell Name="{Binding Name}" Age="{Binding Age}" Location="{Binding Location}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Dadurch werden die Name Age Location bindbaren Eigenschaften, und in der- CustomCell Instanz an die Name Eigenschaften, Age und Location jedes-Objekts in der zugrunde liegenden Auflistung gebunden.This binds the Name, Age, and Location bindable properties in the CustomCell instance, to the Name, Age, and Location properties of each object in the underlying collection.

Die entsprechende Bindung in c# wird im folgenden Codebeispiel gezeigt:The equivalent binding in C# is shown in the following code example:

var customCell = new DataTemplate (typeof(CustomCell));
customCell.SetBinding (CustomCell.NameProperty, "Name");
customCell.SetBinding (CustomCell.AgeProperty, "Age");
customCell.SetBinding (CustomCell.LocationProperty, "Location");

var listView = new ListView
{
    ItemsSource = people,
    ItemTemplate = customCell
};

Wenn unter IOS und Android Elemente wieder ListView verwendet und die benutzerdefinierte Zelle einen benutzerdefinierten Renderer verwendet, muss der benutzerdefinierte Renderer ordnungsgemäß eine Eigenschafts Änderungs Benachrichtigung implementieren.On iOS and Android, if the ListView is recycling elements and the custom cell uses a custom renderer, the custom renderer must correctly implement property change notification. Wenn Zellen wieder verwendet werden, ändern sich die Eigenschaftswerte, wenn der Bindungs Kontext auf den einer verfügbaren Zelle aktualisiert wird, wobei PropertyChanged Ereignisse ausgelöst werden.When cells are reused their property values will change when the binding context is updated to that of an available cell, with PropertyChanged events being raised. Weitere Informationen finden Sie unter Anpassen einer viewcell.For more information, see Customizing a ViewCell. Weitere Informationen zur Wiederverwendung von Zellen finden Sie unter Caching-Strategie.For more information about cell recycling, see Caching Strategy.