Xamarin.Forms-ContentView ContentView

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Die Xamarin.Forms ContentView -Klasse ist ein Typ von Layout , der ein einzelnes untergeordnetes Element enthält und in der Regel zum Erstellen benutzerdefinierter, wiederverwendbarer Steuerelemente verwendet wird.The Xamarin.Forms ContentView class is a type of Layout that contains a single child element and is typically used to create custom, reusable controls. Die ContentView Klasse erbt von TemplatedView .The ContentView class inherits from TemplatedView. In diesem Artikel und dem zugehörigen Beispiel wird erläutert, wie ein benutzerdefiniertes Steuerelement auf CardView Grundlage der-Klasse erstellt wird ContentView .This article, and associated sample, explain how to create a custom CardView control based on the ContentView class.

Der folgende Screenshot zeigt ein CardView Steuerelement, das von der-Klasse abgeleitet ist ContentView :The following screenshot shows a CardView control that derives from the ContentView class:

Bildschirm Abbildung der CardView-BeispielanwendungCardView sample application screenshot

Die- ContentView Klasse definiert eine einzelne Eigenschaft:The ContentView class defines a single property:

  • Contentist ein- View Objekt.Content is a View object. Diese Eigenschaft wird von einem-Objekt unterstützt, BindableProperty sodass Sie das Ziel von Daten Bindungen sein kann.This property is backed by a BindableProperty object so it can be the target of data bindings.

Die ContentView erbt auch eine-Eigenschaft von der- TemplatedView Klasse:The ContentView also inherits a property from the TemplatedView class:

  • ControlTemplateist ein ControlTemplate , mit dem die Darstellung des Steuer Elements definiert oder überschrieben werden kann.ControlTemplate is a ControlTemplate that can define or override the appearance of the control.

Weitere Informationen zur-Eigenschaft finden Sie unter Anpassen der Darstellung ControlTemplate mit einer ControlTemplate.For more information about the ControlTemplate property, see Customize appearance with a ControlTemplate.

Erstellen eines benutzerdefinierten Steuer ElementsCreate a custom control

Die- ContentView Klasse bietet nur wenige Funktionen, kann jedoch verwendet werden, um ein benutzerdefiniertes Steuerelement zu erstellen.The ContentView class offers little functionality by itself but can be used to create a custom control. Das Beispiel Projekt definiert ein CardView Steuerelement-ein UI-Element, das ein Bild, einen Titel und eine Beschreibung in einem Karten ähnlichen Layout anzeigt.The sample project defines a CardView control - a UI element that displays an image, title, and description in a card-like layout.

Der Prozess zum Erstellen eines benutzerdefinierten Steuer Elements lautet:The process for creating a custom control is to:

  1. Erstellen Sie eine neue Klasse mithilfe der ContentView Vorlage in Visual Studio 2019.Create a new class using the ContentView template in Visual Studio 2019.
  2. Definieren Sie eindeutige Eigenschaften oder Ereignisse in der Code-Behind-Datei für das neue benutzerdefinierte Steuerelement.Define any unique properties or events in the code-behind file for the new custom control.
  3. Erstellen Sie die Benutzeroberfläche für das benutzerdefinierte Steuerelement.Create the UI for the custom control.

Hinweis

Es ist möglich, ein benutzerdefiniertes Steuerelement zu erstellen, dessen Layout im Code anstelle von XAML definiert ist.It's possible to create a custom control whose layout is defined in code instead of XAML. Der Einfachheit halber definiert die Beispielanwendung nur eine einzelne CardView Klasse mit einem XAML-Layout.For simplicity, the sample application only defines a single CardView class with a XAML layout. Die Beispielanwendung enthält jedoch eine cardviewcodepage -Klasse, die den Prozess der Verwendung des benutzerdefinierten Steuer Elements im Code anzeigt.However, the sample application contains a CardViewCodePage class that shows the process of consuming the custom control in code.

Code Behind-Eigenschaften erstellenCreate code-behind properties

Das CardView benutzerdefinierte Steuerelement definiert die folgenden Eigenschaften:The CardView custom control defines the following properties:

  • CardTitle: ein- string Objekt, das den auf der Karte angezeigten Titel darstellt.CardTitle: a string object that represents the title shown on the card.
  • CardDescription: ein- string Objekt, das die auf der Karte angezeigte Beschreibung darstellt.CardDescription: a string object that represents the description shown on the card.
  • IconImageSource: ein ImageSource Objekt, das das Bild darstellt, das auf der Karte angezeigt wird.IconImageSource: an ImageSource object that represents the image shown on the card.
  • IconBackgroundColor: ein- Color Objekt, das die Hintergrundfarbe für das Bild darstellt, das auf der Karte angezeigt wird.IconBackgroundColor: a Color object that represents the background color for the image shown on the card.
  • BorderColor: ein- Color Objekt, das die Farbe des Karten Rahmens, des Bildrands und der Trennlinie darstellt.BorderColor: a Color object that represents the color of the card border, image border, and divider line.
  • CardColor: ein- Color Objekt, das die Hintergrundfarbe der Karte darstellt.CardColor: a Color object that represents the background color of the card.

Hinweis

Die- BorderColor Eigenschaft wirkt sich auf mehrere-Elemente aus, um Sie zu demonstrieren.The BorderColor property affects multiple items for the purposes of demonstration. Diese Eigenschaft könnte bei Bedarf in drei Eigenschaften aufgeteilt werden.This property could be broken out into three properties if needed.

Jede Eigenschaft wird von einer- BindableProperty Instanz unterstützt.Each property is backed by a BindableProperty instance. Durch die Unterstützung BindableProperty kann jede Eigenschaft mithilfe des MVVM-Musters formatiert und gebunden werden.The backing BindableProperty allows each property to be styled, and bound, using the MVVM pattern.

Im folgenden Beispiel wird gezeigt, wie Sie eine Sicherung erstellen BindableProperty :The following example shows how to create a backing BindableProperty:

public static readonly BindableProperty CardTitleProperty = BindableProperty.Create(
    "CardTitle",        // the name of the bindable property
    typeof(string),     // the bindable property type
    typeof(CardView),   // the parent object type
    string.Empty);      // the default value for the property

Die benutzerdefinierte Eigenschaft verwendet die GetValue -und- SetValue Methoden, um die Objektwerte zu erhalten und festzulegen BindableProperty :The custom property uses the GetValue and SetValue methods to get and set the BindableProperty object values:

public string CardTitle
{
    get => (string)GetValue(CardView.CardTitleProperty);
    set => SetValue(CardView.CardTitleProperty, value);
}

Weitere Informationen zu BindableProperty Objekten finden Sie unter bindbare Eigenschaften.For more information about BindableProperty objects, see Bindable Properties.

Definieren der BenutzeroberflächeDefine UI

Die benutzerdefinierte Steuerelement-Benutzeroberfläche verwendet einen ContentView als Stamm Element für das- CardView Steuerelement.The custom control UI uses a ContentView as the root element for the CardView control. Das folgende Beispiel zeigt das CardView XAML:The following example shows the CardView XAML:

<ContentView ...
             x:Name="this"
             x:Class="CardViewDemo.Controls.CardView">
    <Frame BindingContext="{x:Reference this}"
            BackgroundColor="{Binding CardColor}"
            BorderColor="{Binding BorderColor}"
            ...>
        <Grid>
            ...
            <Frame BorderColor="{Binding BorderColor, FallbackValue='Black'}"
                   BackgroundColor="{Binding IconBackgroundColor, FallbackValue='Grey'}"
                   ...>
                <Image Source="{Binding IconImageSource}"
                       .. />
            </Frame>
            <Label Text="{Binding CardTitle, FallbackValue='Card Title'}"
                   ... />
            <BoxView BackgroundColor="{Binding BorderColor, FallbackValue='Black'}"
                     ... />
            <Label Text="{Binding CardDescription, FallbackValue='Card description text.'}"
                   ... />
        </Grid>
    </Frame>
</ContentView>

Das- ContentView Element legt die- x:Name Eigenschaft auf diesefest, die verwendet werden kann, um auf das Objekt zuzugreifen, das an die Instanz gebunden ist CardView .The ContentView element sets the x:Name property to this, which can be used to access the object bound to the CardView instance. Elemente im Layout legen Bindungen an ihren Eigenschaften auf Werte fest, die für das gebundene Objekt definiert sind.Elements in the layout set bindings on their properties to values defined on the bound object.

Weitere Informationen zur Datenbindung finden Sie unter Xamarin.Forms-Datenbindung.For more information about data binding, see Xamarin.Forms Data Binding.

Hinweis

Die- FallbackValue Eigenschaft stellt einen Standardwert für den Fall bereit, dass die Bindung ist null .The FallbackValue property provides a default value in case the binding is null. Dadurch kann der XAML-Previewer in Visual Studio das Steuerelement auch Rendering CardView .This also allows the XAML Previewer in Visual Studio to render the CardView control.

Instanziieren eines benutzerdefinierten Steuer ElementsInstantiate a custom control

Ein Verweis auf den Namespace des benutzerdefinierten Steuer Elements muss einer Seite hinzugefügt werden, die das benutzerdefinierte Steuerelement instanziiert.A reference to the custom control namespace must be added to a page that instantiates the custom control. Das folgende Beispiel zeigt einen Namespace Verweis namens Steuer Elemente , die einer- ContentPage Instanz in XAML hinzugefügt werden:The following example shows a namespace reference called controls added to a ContentPage instance in XAML:

<ContentPage ...
             xmlns:controls="clr-namespace:CardViewDemo.Controls" >

Nachdem der Verweis hinzugefügt wurde CardView , kann in XAML instanziiert und seine Eigenschaften definiert werden:Once the reference has been added the CardView can be instantiated in XAML, and its properties defined:

<controls:CardView BorderColor="DarkGray"
                   CardTitle="Slavko Vlasic"
                   CardDescription="Lorem ipsum dolor sit..."
                   IconBackgroundColor="SlateGray"
                   IconImageSource="user.png"/>

Eine CardView kann auch im Code instanziiert werden:A CardView can also be instantiated in code:

CardView card = new CardView
{
    BorderColor = Color.DarkGray,
    CardTitle = "Slavko Vlasic",
    CardDescription = "Lorem ipsum dolor sit...",
    IconBackgroundColor = Color.SlateGray,
    IconImageSource = ImageSource.FromFile("user.png")
};

Anpassen des Erscheinungs Bilds mit einer ControlTemplateCustomize appearance with a ControlTemplate

Ein benutzerdefiniertes Steuerelement, das von der-Klasse abgeleitet wird, kann die Darstellung ContentView mithilfe von XAML oder Code definieren, oder es kann überhaupt keine Darstellung definieren.A custom control that derives from the ContentView class can define appearance using XAML, code, or may not define appearance at all. Unabhängig davon, wie das Erscheinungsbild definiert ist, kann ein- ControlTemplate Objekt die Darstellung mit einem benutzerdefinierten Layout überschreiben.Regardless of how appearance is defined, a ControlTemplate object can override the appearance with a custom layout.

Das CardView Layout kann für einige Anwendungsfälle zu viel Speicherplatz belegen.The CardView layout might occupy too much space for some use cases. Ein ControlTemplate kann das CardView Layout überschreiben, um eine kompaktere Ansicht bereitzustellen, die für eine komprimierte Liste geeignet ist:A ControlTemplate can override the CardView layout to provide a more compact view, suitable for a condensed list:

<ContentPage.Resources>
    <ResourceDictionary>
        <ControlTemplate x:Key="CardViewCompressed">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="100" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="100*" />
                </Grid.ColumnDefinitions>
                <Image Grid.Row="0"
                       Grid.Column="0"
                       Source="{TemplateBinding IconImageSource}"
                       BackgroundColor="{TemplateBinding IconBackgroundColor}"
                       WidthRequest="100"
                       HeightRequest="100"
                       Aspect="AspectFill"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"/>
                <StackLayout Grid.Row="0"
                             Grid.Column="1">
                    <Label Text="{TemplateBinding CardTitle}"
                           FontAttributes="Bold" />
                    <Label Text="{TemplateBinding CardDescription}" />
                </StackLayout>
            </Grid>
        </ControlTemplate>
    </ResourceDictionary>
</ContentPage.Resources>

Die Datenbindung in einem ControlTemplate verwendet die TemplateBinding Markup Erweiterung zum Angeben von Bindungen.Data binding in a ControlTemplate uses the TemplateBinding markup extension to specify bindings. Die- ControlTemplate Eigenschaft kann dann mithilfe ihres Werts auf das definierte ControlTemplate-Objekt festgelegt werden x:Key .The ControlTemplate property can then be set to the defined ControlTemplate object, by using its x:Key value. Im folgenden Beispiel wird die- ControlTemplate Eigenschaft auf einer-Instanz festgelegt CardView :The following example shows the ControlTemplate property set on a CardView instance:

<controls:CardView ControlTemplate="{StaticResource CardViewCompressed}"/>

Die folgenden Screenshots zeigen eine Standard CardView Instanz, CardView deren ControlTemplate überschrieben wurde:The following screenshots show a standard CardView instance and CardView whose ControlTemplate has been overridden:

Bildschirm Abbildung von CardView ControlTemplateCardView ControlTemplate screenshot

Weitere Informationen zu Steuerelementvorlagen finden Sie unter Xamarin.Forms-Steuerelementvorlagen.For more information about control templates, see Xamarin.Forms Control Templates.