ContentView
Пользовательский интерфейс многоплатформенного приложения .NET (.NET MAUI) ContentView — это элемент управления, который позволяет создавать пользовательские, многократно используемые элементы управления.
Класс ContentView определяет свойство типаView, представляющее содержимое объектаContentViewContent
. Это свойство поддерживается BindableProperty объектом, что означает, что он может быть целевым объектом привязок данных и стилем.
Класс ContentView является производным от TemplatedView
класса, который определяет ControlTemplate привязываемое свойство типа ControlTemplate, которое определяет внешний вид элемента управления. Дополнительные сведения о свойстве ControlTemplate см. в разделе "Настройка внешнего вида с помощью ControlTemplate".
Примечание
Может ContentView содержать только один дочерний элемент.
Класс ContentView предлагает небольшие функциональные возможности, но может использоваться для создания пользовательского элемента управления. Процесс создания пользовательского элемента управления состоит в том, чтобы:
- Создайте класс, производный от класса ContentView.
- Определите все свойства или события элемента управления в файле программной части для пользовательского элемента управления.
- Определите пользовательский интерфейс для пользовательского элемента управления.
В этой статье показано, как создать CardView
элемент управления, который является элементом пользовательского интерфейса, отображающим изображение, название и описание в макете карта.
Производный ContentViewкласс можно создать с помощью шаблона элемента ContentView в Visual Studio. Этот шаблон создает XAML-файл, в котором можно определить пользовательский интерфейс для пользовательского элемента управления, а также файл программной части, в котором можно определить любые свойства, события и другую логику.
Все свойства элемента управления, события и другая логика должны быть определены в файле программной части для производного ContentViewкласса.
CardView
Пользовательский элемент управления определяет следующие свойства:
CardTitle
типstring
, представляющий заголовок, отображаемый на карта.CardDescription
типstring
, представляющий описание, показанное на карта.IconImageSource
типImageSource, представляющий изображение, показанное на карта.IconBackgroundColor
Colorтип , представляющий цвет фона для изображения, показанного на карта.BorderColor
Colorтип, представляющий цвет границы карта, границы изображения и линии разделителя.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">
<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 задает для свойства this
значение , которое можно использовать для доступа к объекту, привязанного к экземпляру CardView
x: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
объектов:
Пользовательский элемент управления, производный от 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>
Привязка данных в модуле ControlTemplate TemplateBinding
разметки используется для указания привязок. Затем ControlTemplate свойство можно задать для определенного ControlTemplate объекта, используя его x:Key
значение. В следующем примере показан ControlTemplate набор свойств для экземпляра CardView
:
<controls:CardView ControlTemplate="{StaticResource CardViewCompressed}" />
На следующем снимках экрана показан стандартный CardView
экземпляр и несколько CardView
экземпляров, шаблоны элементов управления которых переопределены:
Дополнительные сведения о шаблонах элементов управления см. в разделе "Шаблоны элементов управления".
Отзыв о .NET MAUI
.NET MAUI — это проект с открытым исходным кодом. Выберите ссылку, чтобы оставить отзыв: