Xamarin.Forms ContentView
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 einView
-Objekt. Diese Eigenschaft wird von einemBindableProperty
-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 ControlTemplate
Darstellung 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:
- Erstellen Sie eine neue Klasse mithilfe der
ContentView
Vorlage in Visual Studio 2019. - Definieren Sie alle eindeutigen Eigenschaften oder Ereignisse in der CodeBehind-Datei für das neue benutzerdefinierte Steuerelement.
- 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
: Einstring
-Objekt, das den Titel darstellt, der auf der Karte angezeigt wird.CardDescription
: Einstring
-Objekt, das die Beschreibung darstellt, die auf der Karte angezeigt wird.IconImageSource
: EinImageSource
Objekt, das das auf dem Karte angezeigte Bild darstellt.IconBackgroundColor
: EinColor
-Objekt, das die Hintergrundfarbe für das Bild darstellt, das auf der Karte angezeigt wird.BorderColor
: EinColor
-Objekt, das die Farbe des Karte Rahmens, des Bildrahmens und der Trennlinie darstellt.CardColor
: EinColor
-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.