Xamarin.Forms ContentView

Класс Xamarin.FormsContentView является типом Layout , который содержит один дочерний элемент и обычно используется для создания пользовательских, многократно используемых элементов управления. Класс ContentView наследует от TemplatedView. В этой статье и связанном примере объясняется, как создать пользовательский CardView элемент управления на ContentView основе класса.

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

Класс ContentView определяет одно свойство:

• Content является объектом View. Это свойство поддерживается BindableProperty объектом, поэтому оно может быть целевым объектом привязок данных.

Свойство ContentView также наследует от TemplatedView класса:

• ControlTemplate — это средство ControlTemplate , которое может определять или переопределять внешний вид элемента управления.

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

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

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

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

1. Создайте класс с помощью ContentView шаблона в Visual Studio 2019.
2. Определите любые уникальные свойства или события в файле кода программной части для нового пользовательского элемента управления.
3. Создайте пользовательский интерфейс для пользовательского элемента управления.

Создание свойств программной части

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

• CardTitlestring: объект, представляющий заголовок, показанный на карточке.
• CardDescriptionstring: объект, представляющий описание, показанное на карточке.
• IconImageSourceImageSource: объект, представляющий изображение, показанное на карточке.
• IconBackgroundColorColor: объект, представляющий цвет фона для изображения, показанного на карточке.
• BorderColorColor: объект, представляющий цвет границы карточки, границы изображения и линии разделителя.
• CardColorColor: объект, представляющий цвет фона карточки.

Каждое свойство поддерживается экземпляром BindableProperty . Резервное копирование BindableProperty позволяет стили и привязки каждого свойства с помощью шаблона MVVM.

В следующем примере показано, как создать резервную копию 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

Пользовательское свойство использует GetValue методы и методы для получения и SetValue задания значений BindableProperty объектов:

public string CardTitle
{
    get => (string)GetValue(CardView.CardTitleProperty);
    set => SetValue(CardView.CardTitleProperty, value);
}

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

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

Пользовательский пользовательский интерфейс элемента управления используется ContentView в качестве корневого CardView элемента для элемента управления. В следующем примере показан CardView XAML:

<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 задает x:Name для этого свойство, которое можно использовать для доступа к объекту, привязанного к экземпляруCardView. Элементы в наборе макетов привязывают свойства к значениям, определенным в связанном объекте.

Дополнительные сведения о привязке данных см. в разделе Привязка данных Xamarin.Forms.

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

Ссылка на пользовательское пространство имен элемента управления должна быть добавлена на страницу, которая создает экземпляр пользовательского элемента управления. В следующем примере показана ссылка на пространство имен, которая называется элементами управления , добавленными в ContentPage экземпляр в XAML:

<ContentPage ...
             xmlns:controls="clr-namespace:CardViewDemo.Controls" >

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

<controls:CardView BorderColor="DarkGray"
                   CardTitle="Slavko Vlasic"
                   CardDescription="Lorem ipsum dolor sit..."
                   IconBackgroundColor="SlateGray"
                   IconImageSource="user.png"/>

Можно CardView также создать экземпляр в коде:

CardView card = new CardView
{
    BorderColor = Color.DarkGray,
    CardTitle = "Slavko Vlasic",
    CardDescription = "Lorem ipsum dolor sit...",
    IconBackgroundColor = Color.SlateGray,
    IconImageSource = ImageSource.FromFile("user.png")
};

Настройка внешнего вида с помощью 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 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>

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

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

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

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

Дополнительные ссылки

• Привязка данных Xamarin.Forms
• Привязываемые свойства.
• Шаблоны элементов управления Xamarin.Forms