Widok zawartości

Przeglądaj przykład

Wieloplatformowy interfejs użytkownika aplikacji platformy .NET (.NET MAUI ContentView) to kontrolka umożliwiająca tworzenie niestandardowych kontrolek wielokrotnego użytku.

Klasa ContentView definiuje właściwość Content typu View, która reprezentuje zawartość ContentView. Ta właściwość jest wspierana przez obiekt BindableProperty, co oznacza, że może być obiektem docelowym powiązań danych i stylizowany.

Klasa ContentView pochodzi z klasy TemplatedView, która definiuje właściwość bindowalną ControlTemplate typu ControlTemplate, określającą wygląd kontrolki. Aby uzyskać więcej informacji na temat właściwości ControlTemplate, zobacz Dostosowywanie wyglądu za pomocąControlTemplate.

Notatka

ContentView może zawierać tylko jedno dziecko.

Tworzenie kontrolki niestandardowej

Klasa ContentView oferuje niewielką funkcjonalność, ale może służyć do tworzenia niestandardowej kontrolki. Proces tworzenia kontrolki niestandardowej obejmuje:

1. Utwórz klasę pochodzącą z klasy ContentView.
2. Zdefiniuj wszelkie właściwości lub zdarzenia kontrolki w pliku z logiką programu dla kontrolki niestandardowej.
3. Zdefiniuj interfejs użytkownika dla kontrolki niestandardowej.

W tym artykule pokazano, jak utworzyć kontrolkę CardView, która jest elementem interfejsu użytkownika, który wyświetla obraz, tytuł i opis w układzie przypominającym kartę.

Tworzenie klasy pochodnej ContentView

Klasę pochodną ContentViewmożna utworzyć przy użyciu szablonu elementu ContentView w programie Visual Studio. Ten szablon tworzy plik XAML, w którym można zdefiniować interfejs użytkownika dla kontrolki niestandardowej, oraz plik za pomocą kodu, w którym można zdefiniować dowolne właściwości, zdarzenia i inną logikę.

Definiowanie właściwości kontrolki

Wszelkie właściwości kontrolki, zdarzenia i inna logika powinny być zdefiniowane w pliku code-behind dla klasy pochodnej od ContentView.

Kontrolka niestandardowa CardView definiuje następujące właściwości:

• CardTitletypu string, który reprezentuje tytuł wyświetlany na karcie.
• CardDescription, który jest typu string, i reprezentuje opis wyświetlany na karcie.
• IconImageSourcetypu ImageSource, który reprezentuje obraz wyświetlany na karcie.
• IconBackgroundColor, typu Color, reprezentuje kolor tła dla obrazu pokazanego na karcie.
• BorderColortypu Color, który reprezentuje kolor obramowania karty, obramowania obrazu i linii podziału.
• CardColortypu Color, który reprezentuje kolor tła karty.

Każda właściwość jest wspierana przez wystąpienie BindableProperty.

W poniższym przykładzie przedstawiono właściwość powiązaną CardTitle w pliku z kodem dla klasy CardView:

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();
    }
}

Aby uzyskać więcej informacji na temat obiektów BindableProperty, zobacz Właściwości wiązane.

Definiowanie interfejsu użytkownika

Interfejs użytkownika kontrolki niestandardowej można zdefiniować w pliku XAML dla klasy pochodnej ContentView, która używa ContentView jako głównego elementu kontrolki.

<ContentView ...
             xmlns:local="clr-namespace:CardViewDemo.Controls"
             x:Name="this"
             x:Class="CardViewDemo.Controls.CardView"
             x:DataType="local: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>

Element ContentView ustawia właściwość x:Name na this, która może służyć do uzyskiwania dostępu do obiektu powiązanego z wystąpieniem CardView. Elementy w układzie ustawiają powiązania dla ich właściwości na wartości zdefiniowane w powiązanym obiekcie. Aby uzyskać więcej informacji na temat powiązania danych, zobacz Powiązanie danych.

Notatka

Właściwość FallbackValue w wyrażeniu Binding zawiera wartość domyślną, jeśli powiązanie jest null.

Zainstancjowanie kontrolki niestandardowej

Odwołanie do przestrzeni nazw dla kontrolek niestandardowych musi zostać dodane do strony, która tworzy wystąpienie niestandardowej kontrolki. Po dodaniu referencji można utworzyć instancję CardView i zdefiniować jej właściwości:

<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>                   

Poniższy zrzut ekranu przedstawia wiele obiektów CardView:

Dostosuj wygląd za pomocą ControlTemplate

Kontrolka niestandardowa pochodząca z klasy ContentView może definiować swój interfejs użytkownika przy użyciu języka XAML lub kodu lub może w ogóle nie definiować interfejsu użytkownika. Można użyć ControlTemplate do zmiany wyglądu kontrolki, niezależnie od tego, jak ten wygląd jest zdefiniowany.

Na przykład układ CardView może zajmować zbyt dużo miejsca w niektórych przypadkach użycia. ControlTemplate można użyć do zastąpienia układu CardView w celu zapewnienia bardziej kompaktowego widoku, odpowiedniego dla listy skondensowanej:

<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>

Powiązanie danych w ControlTemplate używa rozszerzenia znaczników TemplateBinding do określania powiązań. Właściwość ControlTemplate można następnie ustawić na zdefiniowany obiekt ControlTemplate przy użyciu jego wartości x:Key. Na następnym przykładzie pokazano, jak właściwość ControlTemplate jest ustawiona na instancji CardView.

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

Poniższy zrzut ekranu przedstawia standardowe wystąpienie CardView oraz wiele wystąpień CardView, których szablony kontrolek zostały zastąpione:

Aby uzyskać więcej informacji na temat szablonów kontrolek, zobacz Szablony kontrolek.