ContentView
샘플을 찾아보기.NET 다중 플랫폼 앱 UI(.NET MAUI) ContentView 다시 사용할 수 있는 사용자 지정 컨트롤을 만들 수 있는 컨트롤입니다.
ContentView 클래스는 ContentView내용을 나타내는 View형식의 Content 속성을 정의합니다. 이 속성은 BindableProperty 개체에 의해 지원됩니다. 즉, 데이터 바인딩의 대상이 될 수 있으며 스타일이 지정됩니다.
ContentView 클래스는 컨트롤의 모양을 정의하는 ControlTemplate형식의 ControlTemplate 바인딩 가능한 속성을 정의하는 TemplatedView 클래스에서 파생됩니다.
ControlTemplate 속성에 대한 자세한 내용은 ControlTemplate사용하여 모양 사용자 지정을 참조하세요.
메모
ContentView는 하나의 자식만 포함할 수 있습니다.
사용자 지정 컨트롤 만들기
ContentView 클래스는 그 자체로 기능이 거의 없지만 사용자 지정 컨트롤을 만드는 데 사용할 수 있습니다. 사용자 지정 컨트롤을 만드는 프로세스는 다음과 같습니다.
- ContentView 클래스에서 파생되는 클래스를 만듭니다.
- 사용자 지정 컨트롤에 대한 코드 숨김 파일의 컨트롤 속성 또는 이벤트를 정의합니다.
- 사용자 지정 컨트롤의 UI를 정의합니다.
이 문서에서는 카드와 유사한 레이아웃에서 이미지, 제목 및 설명을 표시하는 UI 요소인 CardView 컨트롤을 만드는 방법을 보여 줍니다.
ContentView 파생 클래스 만들기
visual Studio의 ContentView 항목 템플릿을 사용하여 ContentView파생 클래스를 만들 수 있습니다. 이 템플릿은 사용자 지정 컨트롤의 UI를 정의할 수 있는 XAML 파일과 컨트롤 속성, 이벤트 및 기타 논리를 정의할 수 있는 코드 숨김 파일을 만듭니다.
컨트롤 속성 정의
모든 컨트롤 속성, 이벤트 및 기타 논리는 ContentView파생 클래스에 대한 코드 숨김 파일에 정의되어야 합니다.
CardView 사용자 지정 컨트롤은 다음 속성을 정의합니다.
-
CardTitle은 카드에 표시된 제목을 나타내는string형식입니다. -
CardDescription카드에 표시된 설명을 나타내는string형식의 입니다. -
IconImageSource, ImageSource형식으로, 카드에 표시된 이미지를 나타냅니다. -
IconBackgroundColor은(는) 카드에 표시된 이미지의 배경색을 나타내는 Color유형입니다. -
BorderColor- 카드 테두리, 이미지 테두리 및 구분선의 색을 나타내는 Color형식입니다. -
CardColor은 카드의 배경색을 나타내는 Color유형입니다.
각 속성은 BindableProperty 인스턴스에서 지원됩니다.
다음 예제에서는 CardView 클래스에 대한 코드 숨김 파일의 CardTitle 바인딩 가능한 속성을 보여 냅니다.
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 개체에 대한 자세한 내용은 바인딩 가능한 속성참조하세요.
UI 정의
사용자 지정 컨트롤 UI는 ContentView에서 파생된 클래스의 XAML 파일에서 정의할 수 있으며, 이 파일에서는 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 요소는 x:Name 속성을 this로 설정하며, 이는 CardView 인스턴스에 바인딩된 개체에 액세스하는 데 사용할 수 있습니다. 레이아웃의 요소는 바인딩된 개체에 정의된 값에 대한 속성의 바인딩을 설정합니다. 데이터 바인딩에 대한 자세한 내용은 데이터 바인딩참조하세요.
메모
Binding 식의 FallbackValue 속성은 바인딩이 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 개체를 보여줍니다.
ControlTemplate을 사용하여 모양 사용자 지정
ContentView 클래스에서 파생되는 사용자 지정 컨트롤은 XAML 또는 코드를 사용하여 해당 UI를 정의하거나 UI를 전혀 정의하지 않을 수 있습니다. 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 마크업 확장을 사용하여 바인딩을 지정합니다. 그런 다음 x:Key 값을 사용하여 ControlTemplate 속성을 정의된 ControlTemplate 개체로 설정할 수 있습니다. 다음 예제에서는 CardView 인스턴스에 설정된 ControlTemplate 속성을 보여 줍니다.
<controls:CardView ControlTemplate="{StaticResource CardViewCompressed}" />
다음 스크린샷은 표준 CardView 인스턴스와 컨트롤 템플릿이 재정의된 여러 CardView 인스턴스를 보여 줍니다.
컨트롤 템플릿에 대한 자세한 내용은 컨트롤 템플릿참조하세요.
.NET MAUI