ContentView

.NET Multi-Platform App UI (.NET MAUI)-ContentView ist ein Steuerelement, das die Erstellung benutzerdefinierter wiederverwendbarer Steuerelemente ermöglicht.

Die ContentView-Klasse definiert eine Content-Eigenschaft vom Typ View, die den Inhalt der ContentView darstellt. Diese Eigenschaft wird durch ein BindableProperty-Objekt unterstützt, was bedeutet, dass sie das Ziel von Datenbindungen sein kann und formatiert werden kann.

Die ContentView-Klasse wird von der TemplatedView-Klasse abgeleitet, die die bindbare Eigenschaft ControlTemplate vom Typ ControlTemplate definiert, die die Darstellung des Steuerelements definiert. Weitere Informationen zur ControlTemplate-Eigenschaft finden Sie unter Anpassen der Darstellung mit einer ControlTemplate.

Hinweis

Eine ContentView kann nur ein einzelnes untergeordnetes Element enthalten.

Erstellen eines benutzerdefinierten Steuerelements

Die ContentView-Klasse selbst bietet wenig Funktionalität, kann aber zum Erstellen eines benutzerdefinierten Steuerelements verwendet werden. Der Prozess zum Erstellen eines benutzerdefinierten Steuerelements ist wie folgt:

1. Erstellen Sie eine von der ContentView-Klasse abgeleitete Klasse.
2. Definieren Sie alle Steuerelementeigenschaften oder Ereignisse in der CodeBehind-Datei für das benutzerdefinierte Steuerelement.
3. Definieren Sie die Benutzeroberfläche für das benutzerdefinierte Steuerelement.

In diesem Artikel wird veranschaulicht, wie Sie ein CardView-Steuerelement erstellen, bei dem es sich um ein UI-Element handelt, das ein Bild, einen Titel und eine Beschreibung in einem kartenähnlichen Layout anzeigt.

Erstellen einer von ContentView abgeleiteten Klasse

Eine von ContentView abgeleitete Klasse kann mithilfe der ContentView-Elementvorlage in Visual Studio erstellt werden. Diese Vorlage erstellt eine XAML-Datei, in der die Benutzeroberfläche für das benutzerdefinierte Steuerelement definiert werden kann, sowie eine CodeBehind-Datei, in der alle Steuerelementeigenschaften, Ereignisse und andere Logik definiert werden können.

Definieren von Steuerelementeigenschaften

Alle Steuerelementeigenschaften, Ereignisse und andere Logik sollten in der CodeBehind-Datei für die von ContentView abgeleiteten Klasse definiert werden.

Das benutzerdefinierte Steuerelement CardView definiert die folgenden Eigenschaften:

• CardTitle, vom Typ string, die den Titel darstellt, der auf der Karte angezeigt wird.
• CardDescription, vom Typ string, die die Beschreibung darstellt, die auf der Karte angezeigt wird.
• IconImageSource, vom Typ ImageSource, die das Bild darstellt, das auf der Karte angezeigt wird.
• IconBackgroundColor, vom Typ Color, die die Hintergrundfarbe für das Bild darstellt, das auf der Karte angezeigt wird.
• BorderColor, vom Typ Color, die die Farbe des Kartenrahmens, Bildrahmens und der Trennlinie darstellt.
• CardColor, vom Typ Color, die die Hintergrundfarbe der Karte darstellt.

Jede Eigenschaft wird von einer BindableProperty-Instanz gestützt.

Das folgende Beispiel zeigt die bindbare Eigenschaft CardTitle in der CodeBehind-Datei für die CardView-Klasse:

public partial class CardView : ContentView
{
    public static readonly BindableProperty CardTitleProperty = BindableProperty.Create(nameof(CardTitle), typeof(string), typeof(CardView), string.Empty);

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

    public CardView()
    {
        InitializeComponent();
    }
}

Weitere Informationen zu BindableProperty-Objekten finden Sie unter Bindbare Objekte.

Definieren der Benutzeroberfläche

Die Benutzeroberfläche des benutzerdefinierten Steuerelements kann in der XAML-Datei für die von ContentView abgeleitete Klasse definiert werden, die eine ContentView als Stammelement des Steuerelements verwendet:

<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 this fest. Dies kann verwendet werden, um auf das Objekt zuzugreifen, das an die CardView-Instanz gebunden ist. Elemente im Layoutsatz legen Bindungen für ihre Eigenschaften für Werte fest, die für das gebundene Objekt definiert sind. Weitere Informationen zur Datenbindung finden Sie unter Datenbindung.

Hinweis

Die FallbackValue-Eigenschaft im Binding-Ausdruck stellt einen Standardwert bereit, falls die Bindung null ist.

Instanziieren eines benutzerdefinierten Steuerelements

Der Seite, die das benutzerdefinierte Steuerelement instanziiert, muss ein Verweis auf den Namespace des benutzerdefinierten Steuerelements hinzugefügt werden. Nachdem der Verweis hinzugefügt wurde, können die CardView instanziiert und die Eigenschaften definiert werden:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:CardViewDemo.Controls"
             x:Class="CardViewDemo.CardViewXamlPage">
   <ScrollView>
       <StackLayout>
           <controls:CardView BorderColor="DarkGray"
                              CardTitle="Slavko Vlasic"
                              CardDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit dolor, convallis non interdum."
                              IconBackgroundColor="SlateGray"
                              IconImageSource="user.png" />
            <!-- More CardView objects -->
       </StackLayout>
   </ScrollView>
</ContentPage>                   

Der folgende Screenshot zeigt mehrere CardView-Objekte:

Anpassen der Darstellung mit einer ControlTemplate

Ein benutzerdefiniertes Steuerelement, das von der ContentView-Klasse abgeleitet wird, kann seine Benutzeroberfläche mithilfe von XAML oder Code definieren oder die Benutzeroberfläche überhaupt nicht definieren. Es kann eine ControlTemplate verwendet werden, um die Darstellung des Steuerelements unabhängig davon zu überschreiben, wie diese Darstellung definiert ist.

Ein CardView-Layout kann für einige Anwendungsfälle beispielsweise zu viel Platz belegen. Eine ControlTemplate kann verwendet werden, um das CardView-Layout zu überschreiben und so eine kompaktere Ansicht bereitzustellen, die für eine komprimierte Liste geeignet ist:

<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 Source="{TemplateBinding IconImageSource}"
                       BackgroundColor="{TemplateBinding IconBackgroundColor}"
                       WidthRequest="100"
                       HeightRequest="100"
                       Aspect="AspectFill"
                       HorizontalOptions="Center"
                       VerticalOptions="Center" />
                <StackLayout Grid.Column="1">
                    <Label Text="{TemplateBinding CardTitle}"
                           FontAttributes="Bold" />
                    <Label Text="{TemplateBinding CardDescription}" />
                </StackLayout>
            </Grid>
        </ControlTemplate>
    </ResourceDictionary>
</ContentPage.Resources>

Die Datenbindung in einer ControlTemplate verwendet die TemplateBinding-Markuperweiterung, um Bindungen anzugeben. Anschließend kann die ControlTemplate-Eigenschaft mithilfe des x:Key-Werts auf das definierte ControlTemplate-Objekt festgelegt werden. Das folgende Beispiel zeigt die ControlTemplate-Eigenschaft, die für eine CardView-Instanz festgelegt wurde:

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

Der folgende Screenshot zeigt eine Standard-CardView-Instanz und mehrere CardView-Instanzen, deren Kontrollvorlagen überschrieben wurden:

Weitere Informationen zu Kontrollvorlagen finden Sie unter Kontrollvorlagen.