ContentView

Статья
02/13/2024

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

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

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

Примечание.

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

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

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

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

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

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

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

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

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

CardView Пользовательский элемент управления определяет следующие свойства:

CardTitleтипstring, представляющий заголовок, отображаемый на карта.
CardDescriptionтип string, представляющий описание, показанное на карта.
IconImageSourceтипImageSource, представляющий изображение, показанное на карта.
IconBackgroundColorColorтип , представляющий цвет фона для изображения, показанного на карта.
BorderColorColorтип, представляющий цвет границы карта, границы изображения и линии разделителя.
CardColorтипColor, представляющий цвет фона карта.

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

В следующем примере показано привязываемое CardTitle свойство в файле кода программной части класса 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();
    }
}

Дополнительные сведения об объектах см. в BindableProperty разделе "Привязываемые свойства".

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

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

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

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

Примечание.

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

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

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

<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 объектов:

Screenshot of CardView objects.

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

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

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

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

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

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

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

Screenshot of CardView overridden with a ControlTemplate.

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