ContentView

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ść typu View, która reprezentuje zawartość obiektu ContentViewContent . Ta właściwość jest wspierana BindableProperty przez obiekt, co oznacza, że może być obiektem docelowym powiązań danych i stylizowany.

Klasa ContentView pochodzi z TemplatedView klasy, która definiuje ControlTemplate właściwość, którą można powiązać, typu ControlTemplate, który definiuje wygląd kontrolki. Aby uzyskać więcej informacji na temat właściwości, zobacz Dostosowywanie wyglądu ControlTemplate za pomocą elementu ControlTemplate.

Uwaga

Obiekt 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 polega na następujących celach:

1. Utwórz klasę pochodną od klasy ContentView.
2. Zdefiniuj wszelkie właściwości lub zdarzenia kontrolki w pliku za pomocą kodu 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, zdarzenia i inna logika kontrolki powinny być zdefiniowane w pliku za kodem dla klasy -pochodnej ContentView.

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

• CardTitle, typu string, który reprezentuje tytuł wyświetlany na karcie.
• CardDescription, typu string, który reprezentuje opis wyświetlany na karcie.
• IconImageSource, typu ImageSource, który reprezentuje obraz pokazany na karcie.
• IconBackgroundColor, typu Color, który reprezentuje kolor tła obrazu pokazanego na karcie.
• BorderColor, typu Color, który reprezentuje kolor obramowania karty, obramowania obrazu i linii podziału.
• CardColor, typu Color, który reprezentuje kolor tła karty.

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

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

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 BindableProperty obiektów, zobacz Właściwości możliwe do powiązania.

Definiowanie interfejsu użytkownika

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

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

Element ContentView ustawia właściwość na this, która może służyć do uzyskiwania dostępu do obiektu powiązanego z wystąpieniem CardViewx:Name. 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.

Uwaga

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

Tworzenie wystąpienia kontrolki niestandardowej

Odwołanie do niestandardowej przestrzeni nazw kontrolek musi zostać dodane do strony, która tworzy wystąpienie kontrolki niestandardowej. Po dodaniu CardView odwołania można utworzyć wystąpienie i zdefiniować jego 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 CardView obiektów:

Dostosowywanie wyglądu za pomocą kontrolkiTemplate

Kontrolka niestandardowa pochodząca z ContentView klasy 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. Element ControlTemplate może służyć do zastępowania wyglądu kontrolki, niezależnie od sposobu definiowania tego wyglądu.

Na przykład CardView układ może zajmować zbyt dużo miejsca w niektórych przypadkach użycia. Element ControlTemplate może służyć do zastąpienia CardView układu 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 rozszerzeniu ControlTemplate znaczników używa do określania TemplateBinding powiązań. Właściwość ControlTemplate można następnie ustawić na zdefiniowany ControlTemplate obiekt przy użyciu jego x:Key wartości. W poniższym przykładzie ControlTemplate przedstawiono właściwość ustawioną na wystąpieniu CardView :

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

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

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