Xamarin.Forms ContentView
Класс Xamarin.FormsContentView является типом Layout , который содержит один дочерний элемент и обычно используется для создания пользовательских, многократно используемых элементов управления. Класс ContentView наследует от TemplatedView. В этой статье и связанном примере объясняется, как создать пользовательский CardView элемент управления на ContentView основе класса.
На следующем снимках экрана показан элемент управления, производный CardView от ContentView класса:
Класс ContentView определяет одно свойство:
Contentявляется объектомView. Это свойство поддерживаетсяBindablePropertyобъектом, поэтому оно может быть целевым объектом привязок данных.
Свойство ContentView также наследует от TemplatedView класса:
ControlTemplate— это средствоControlTemplate, которое может определять или переопределять внешний вид элемента управления.
Дополнительные сведения о свойстве ControlTemplate см. в разделе "Настройка внешнего вида с помощью ControlTemplate".
Создание пользовательского элемента управления
Класс ContentView предлагает небольшие функциональные возможности, но может использоваться для создания пользовательского элемента управления. Пример проекта определяет CardView элемент управления — элемент пользовательского интерфейса, отображающий изображение, название и описание в макете карта.
Процесс создания пользовательского элемента управления состоит в том, чтобы:
- Создайте класс с помощью
ContentViewшаблона в Visual Studio 2019. - Определите любые уникальные свойства или события в файле кода программной части для нового пользовательского элемента управления.
- Создайте пользовательский интерфейс для пользовательского элемента управления.
Примечание.
Можно создать пользовательский элемент управления, макет которого определен в коде вместо XAML. Для простоты пример приложения определяет только один CardView класс с макетом XAML. Однако пример приложения содержит класс CardViewCodePage , показывающий процесс использования пользовательского элемента управления в коде.
Создание свойств программной части
CardView Пользовательский элемент управления определяет следующие свойства:
CardTitlestring: объект, представляющий заголовок, отображаемый на карта.CardDescriptionstring: объект, представляющий описание, показанное на карта.IconImageSourceImageSource: объект, представляющий изображение, показанное на карта.IconBackgroundColorColor: объект, представляющий цвет фона для изображения, показанного на карта.BorderColorColor: объект, представляющий цвет границы карта, границы изображения и линии разделителя.CardColorColor: объект, представляющий цвет фона карта.
Примечание.
Свойство BorderColor влияет на несколько элементов в целях демонстрации. Это свойство может быть разбито на три свойства при необходимости.
Каждое свойство поддерживается экземпляром 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.
Примечание.
Свойство FallbackValue предоставляет значение по умолчанию в случае привязки null. Это также позволяет средству предварительного просмотра XAML в Visual Studio отображать элемент CardView управления.
Создание экземпляра пользовательского элемента управления
Ссылка на пользовательское пространство имен элемента управления должна быть добавлена на страницу, которая создает экземпляр пользовательского элемента управления. В следующем примере показана ссылка на пространство имен, которая называется элементами управления , добавленными в 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>
Привязка данных в модуле ControlTemplateTemplateBinding разметки используется для указания привязок. Затем ControlTemplate свойство можно задать для определенного объекта ControlTemplate, используя его x:Key значение. В следующем примере показан ControlTemplate набор свойств для экземпляра CardView :
<controls:CardView ControlTemplate="{StaticResource CardViewCompressed}"/>
На следующих снимках экрана показан стандартный CardView экземпляр и CardViewControlTemplate переопределен:
Дополнительные сведения о шаблонах элементов управления см. в разделе Шаблоны элементов управления Xamarin.Forms.