ContentView

Beispiel durchsuchen

Die .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 ContentViewdarstellt. Diese Eigenschaft wird von einem BindableProperty-Objekt unterstützt, was bedeutet, dass sie das Ziel von Datenbindungen sein kann und gestylt werden kann.

Die ContentView-Klasse leitet sich von der TemplatedView-Klasse ab, die die bindbare Eigenschaft ControlTemplate vom Typ ControlTemplatedefiniert, was das Erscheinungsbild des Steuerelements definiert. Weitere Informationen zur ControlTemplate-Eigenschaft finden Sie unter Anpassen der Darstellung mit einer ControlTemplate.

Erstellen eines benutzerdefinierten Steuerelements

Die ContentView Klasse bietet selbst wenig Funktionalität, kann jedoch zum Erstellen eines benutzerdefinierten Steuerelements verwendet werden. Der Prozess zum Erstellen eines benutzerdefinierten Steuerelements verläuft folgendermaßen:

1. Erstellen Sie eine Klasse, die von der ContentView Klasse abgeleitet wird.
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 das Erstellen eines CardView-Steuerelements veranschaulicht, 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 ContentViewabgeleitete 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, und eine CodeBehind-Datei, in der alle Steuerelementeigenschaften, Ereignisse und andere Logik definiert werden können.

Definieren von Steuerelementeigenschaften

Alle Eigenschaften von Steuerelementen, Ereignisse und sonstige Logik sollten in der Code-Behind-Datei für die von ContentViewabgeleitete Klasse definiert werden.

Das benutzerdefinierte steuerelement CardView definiert die folgenden Eigenschaften:

• CardTitle, vom Typ string, welcher den Titel auf der Karte darstellt.
• CardDescriptionvom Typ string, der die auf der Karte angezeigte Beschreibung darstellt.
• IconImageSourcevom Typ ImageSource, das das auf der Karte angezeigte Bild darstellt.
• IconBackgroundColor, vom Typ Color, repräsentiert die Hintergrundfarbe für das Bild, das auf der Karte angezeigt wird.
• BorderColorvom Typ Color, der die Farbe des Kartenrahmens, des Bildrahmens und der Trennlinie darstellt.
• CardColorvom Typ Color, der die Hintergrundfarbe der Karte darstellt.

Jede Eigenschaft wird von einer BindableProperty Instanz unterstützt.

Das folgende Beispiel zeigt die CardTitle bindbare Eigenschaft in der Code-Behind-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 Eigenschaften.

Definieren der Benutzeroberfläche

Die benutzerdefinierte Benutzeroberfläche des Steuerelements kann in der XAML-Datei für die von ContentViewabgeleitete Klasse definiert werden, welche ein ContentView als Stammelement des Steuerelements verwendet.

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

Das ContentView-Element legt die x:Name-Eigenschaft auf thisfest, die verwendet werden kann, um auf das Objekt zuzugreifen, das an die CardView Instanz gebunden ist. Elemente im Layout legen Bindungen an ihren Eigenschaften auf Werte fest, die am zugeordneten Objekt definiert sind. Weitere Informationen zur Datenbindung finden Sie unter Datenbindung.

Instanziieren eines benutzerdefinierten Steuerelements

Ein Verweis auf den Namespace des benutzerdefinierten Steuerelements muss der Seite hinzugefügt werden, die das benutzerdefinierte Steuerelement instanziiert. Nachdem der Verweis hinzugefügt wurde, kann der CardView instanziiert werden und seine 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:

Anpassung der Darstellung mit einer Steuerelementvorlage

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

Beispielsweise belegt ein CardView Layout für einige Anwendungsfälle möglicherweise zu viel Platz. Ein ControlTemplate kann verwendet werden, um das CardView Layout außer Kraft zu setzen, um 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 einem ControlTemplate verwendet die TemplateBinding Markuperweiterung, um Bindungen anzugeben. Die ControlTemplate-Eigenschaft kann dann 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 Standardinstanz CardView und mehrere CardView Instanzen, deren Steuerelementvorlagen außer Kraft gesetzt wurden:

Weitere Informationen zu Steuerelementvorlagen finden Sie unter Steuerelementvorlagen.