ContentView

Просмотреть образец

ContentView многоплатформенного пользовательского интерфейса приложений .NET (.NET MAUI) — это элемент управления, который позволяет создавать пользовательские, многократно используемые элементы управления.

Класс ContentView определяет свойство Content типа View, представляющее содержимое ContentView. Это свойство поддерживается объектом BindableProperty, что означает, что оно может быть целевым объектом для привязки данных и может быть стилизовано.

Класс ContentView является производным от класса TemplatedView, который определяет привязываемое свойство ControlTemplate типа ControlTemplate, определяющее внешний вид элемента управления. Дополнительные сведения о свойстве ControlTemplate см. в разделе Настройка внешнего вида с помощьюControlTemplate.

Примечание

ContentView может содержать только один дочерний элемент.

Создание пользовательского элемента управления

Класс ContentView предлагает небольшие функциональные возможности, но можно использовать для создания пользовательского элемента управления. Процесс создания пользовательского элемента управления состоит в том, чтобы:

1. Создайте класс, производный от класса ContentView.
2. Определите все свойства или события элемента управления в файле кода для пользовательского элемента управления.
3. Определите пользовательский интерфейс для пользовательского элемента управления.

В этой статье показано, как создать элемент управления CardView, который представляет собой элемент пользовательского интерфейса, отображающий изображение, название и описание в макете карты.

Создание класса, производного от ContentView

Класс, производный от ContentView, можно создать с помощью шаблона элемента ContentView в Visual Studio. Этот шаблон создает XAML-файл, в котором можно определить пользовательский интерфейс для пользовательского элемента управления, а также файл программной части, в котором можно определить любые свойства, события и другую логику.

Определение свойств элемента управления

Все свойства элемента управления, события и другая логика должны быть определены в файле программной части для класса, производного от ContentView.

Настраиваемый элемент управления CardView определяет следующие свойства:

• CardTitle, который типа string, обозначает заголовок, отображаемый на карточке.
• CardDescriptionтипа string, который представляет описание, показанное на карточке.
• IconImageSourceтипа ImageSource, представляющий изображение, которое показано на карточке.
• IconBackgroundColorтипа Color, обозначающий цвет фона изображения на карточке.
• BorderColorтипа Color, который обозначает цвет границы карточки, рамки изображения и разделительной линии.
• CardColor— это тип Color, который обозначает цвет фона карточки.

Каждое свойство подкрепляется экземпляром BindableProperty.

В следующем примере показано свойство привязки CardTitle в файле кода класса CardView.

C#

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

Для получения дополнительной информации об объектах BindableProperty см. раздел "Свойства привязки".

Определение пользовательского интерфейса

Пользовательский интерфейс элемента управления можно определить в XAML-файле для класса, производного от ContentView, который использует ContentView в качестве корневого элемента элемента управления.

XAML

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

Элемент ContentView задает свойству x:Name значение this, которое можно использовать для доступа к объекту, привязанного к экземпляру CardView. Элементы в наборе макетов привязывают свойства к значениям, определенным в связанном объекте. Для получения дополнительной информации о привязке данных см. Привязка данных.

Примечание

Свойство FallbackValue в выражении Binding предоставляет значение по умолчанию, если привязка null.

Создание экземпляра пользовательского элемента управления

Ссылка на пользовательское пространство имен элемента управления должна быть добавлена на страницу, которая создает экземпляр пользовательского элемента управления. После добавления ссылки можно создать экземпляр CardView и определить его свойства:

XAML

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

На следующем снимка экрана показано несколько объектов CardView:

Настройка внешнего вида с помощью ControlTemplate

Пользовательский элемент управления, производный от класса ContentView, может определять интерфейс с помощью XAML или кода, или вообще не определять его. ControlTemplate можно использовать для переопределения внешнего вида элемента управления независимо от того, как определяется этот внешний вид.

Например, макет CardView может занять слишком много места для некоторых вариантов использования. Для переопределения макета CardView можно использовать ControlTemplate, чтобы обеспечить более компактное представление, подходящее для сжатого списка:

XAML

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

Привязка данных в ControlTemplate использует расширение разметки TemplateBinding для указания привязок. Затем свойство ControlTemplate можно задать для определенного объекта ControlTemplate с помощью его x:Key значения. В следующем примере показано, как свойство ControlTemplate задаётся для экземпляра CardView.

XAML

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

На следующем снимке экрана показан стандартный экземпляр CardView и несколько экземпляров CardView, у которых переопределены шаблоны элементов управления.

Дополнительные сведения о шаблонах элементов управления см. в шаблонах элементов управления.