Xamarin.Forms ContentView

Das Beispiel herunterladen

Die Xamarin.FormsContentView -Klasse ist ein Typ von, der ein einzelnes untergeordnetes Element enthält und in der Layout Regel zum Erstellen benutzerdefinierter, wiederverwendbarer Steuerelemente verwendet wird. Die Klasse ContentView erbt von TemplatedView. In diesem Artikel und dem zugehörigen Beispiel wird erläutert, wie Sie ein benutzerdefiniertes CardView Steuerelement basierend auf der ContentView -Klasse erstellen.

Der folgende Screenshot zeigt ein CardView Steuerelement, das von der ContentView -Klasse abgeleitet ist:

Die ContentView -Klasse definiert eine einzelne Eigenschaft:

• Content ist ein View-Objekt. Diese Eigenschaft wird von einem BindableProperty -Objekt unterstützt, sodass sie das Ziel von Datenbindungen sein kann.

Erbt ContentView auch eine Eigenschaft von der TemplatedView -Klasse:

• ControlTemplate ist ein , ControlTemplate der die Darstellung des Steuerelements definieren oder überschreiben kann.

Weitere Informationen zur -Eigenschaft finden Sie unter Anpassen der ControlTemplateDarstellung mit einer ControlTemplate.

Erstellen eines benutzerdefinierten Steuerelements

Die ContentView -Klasse bietet nur wenige Funktionen, kann aber zum Erstellen eines benutzerdefinierten Steuerelements verwendet werden. Das Beispielprojekt definiert ein CardView Steuerelement – ein UI-Element, das ein Bild, einen Titel und eine Beschreibung in einem Karte layout anzeigt.

Der Prozess zum Erstellen eines benutzerdefinierten Steuerelements besteht darin, folgendes zu erstellen:

1. Erstellen Sie eine neue Klasse mithilfe der ContentView Vorlage in Visual Studio 2019.
2. Definieren Sie alle eindeutigen Eigenschaften oder Ereignisse in der CodeBehind-Datei für das neue benutzerdefinierte Steuerelement.
3. Erstellen Sie die Benutzeroberfläche für das benutzerdefinierte Steuerelement.

Hinweis

Es ist möglich, ein benutzerdefiniertes Steuerelement zu erstellen, dessen Layout nicht in XAML, sondern im Code definiert ist. Der Einfachheit halber definiert die Beispielanwendung nur eine einzelne CardView Klasse mit einem XAML-Layout. Die Beispielanwendung enthält jedoch eine CardViewCodePage-Klasse , die den Prozess der Verwendung des benutzerdefinierten Steuerelements im Code zeigt.

Erstellen von CodeBehind-Eigenschaften

Das CardView benutzerdefinierte Steuerelement definiert die folgenden Eigenschaften:

• CardTitle: Ein string -Objekt, das den Titel darstellt, der auf der Karte angezeigt wird.
• CardDescription: Ein string -Objekt, das die Beschreibung darstellt, die auf der Karte angezeigt wird.
• IconImageSource: Ein ImageSource Objekt, das das auf dem Karte angezeigte Bild darstellt.
• IconBackgroundColor: Ein Color -Objekt, das die Hintergrundfarbe für das Bild darstellt, das auf der Karte angezeigt wird.
• BorderColor: Ein Color -Objekt, das die Farbe des Karte Rahmens, des Bildrahmens und der Trennlinie darstellt.
• CardColor: Ein Color -Objekt, das die Hintergrundfarbe des Karte darstellt.

Hinweis

Die BorderColor -Eigenschaft wirkt sich zu Demonstrationszwecken auf mehrere Elemente aus. Diese Eigenschaft kann bei Bedarf in drei Eigenschaften unterteilt werden.

Jede Eigenschaft wird durch eine BindableProperty instance unterstützt. Die Unterstützung BindableProperty ermöglicht es, jede Eigenschaft mithilfe des MVVM-Musters zu formatieren und zu binden.

Das folgende Beispiel zeigt, wie eine Unterstützung erstellt wird 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 Methoden und SetValue , um die BindableProperty Objektwerte abzurufen und festzulegen:

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

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

Definieren der Benutzeroberfläche

Die Benutzeroberfläche des benutzerdefinierten Steuerelements verwendet ein ContentView als Stammelement für das CardView Steuerelement. Das folgende Beispiel zeigt den CardView XAML-Code:

<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 diese fest, die verwendet werden kann, um auf das Objekt zuzugreifen, das an die CardView instance gebunden ist. Elemente im Layout legen Bindungen für ihre Eigenschaften auf Werte fest, die für das gebundene Objekt definiert sind.

Weitere Informationen zur Datenbindung finden Sie unter Xamarin.Forms-Datenbindung.

Hinweis

Die FallbackValue -Eigenschaft stellt einen Standardwert für den Fall bereit, dass die Bindung ist null. Dadurch kann die XAML-Vorschau in Visual Studio auch das Steuerelement rendern CardView .

Instanziieren eines benutzerdefinierten Steuerelements

Einer Seite, die das benutzerdefinierte Steuerelement instanziiert, muss ein Verweis auf den Namespace des benutzerdefinierten Steuerelements hinzugefügt werden. Das folgende Beispiel zeigt einen Namespaceverweis namens Steuerelemente, die einem ContentPage instance in XAML hinzugefügt wurden:

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

Nachdem der Verweis hinzugefügt CardView wurde, kann in XAML instanziiert und die zugehörigen Eigenschaften definiert werden:

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

Ein CardView kann auch im Code instanziiert werden:

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

Anpassen der Darstellung mit einer ControlTemplate

Ein benutzerdefiniertes Steuerelement, das von der -Klasse abgeleitet wird, kann die ContentView Darstellung mithilfe von XAML, Code oder überhaupt nicht definieren. Unabhängig davon, wie die Darstellung definiert wird, kann ein ControlTemplate Objekt die Darstellung mit einem benutzerdefinierten Layout überschreiben.

Das CardView Layout nimmt für einige Anwendungsfälle möglicherweise zu viel Platz ein. Ein ControlTemplate kann das CardView Layout überschreiben, 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 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 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 -Eigenschaft, die ControlTemplate auf einem CardView instance festgelegt ist:

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

Die folgenden Screenshots zeigen eine Standard-instance CardView , deren CardView Überschreibung überschrieben ControlTemplate wurde:

Weitere Informationen zu Steuerelementvorlagen finden Sie unter Xamarin.Forms-Steuerelementvorlagen.

Verwandte Links

• ContentView-Beispielanwendung
• Xamarin.Forms-Datenbindung
• Bindbare Eigenschaften.
• Xamarin.Forms-Steuerelementvorlagen