ContentView

UI Aplikasi Multi-platform .NET (.NET MAUI) ContentView adalah kontrol yang memungkinkan pembuatan kontrol kustom yang dapat digunakan kembali.

Kelas ContentView mendefinisikan Content properti, jenis View, yang mewakili konten ContentView. Properti ini didukung oleh BindableProperty objek, yang berarti dapat menjadi target pengikatan data, dan ditata.

Kelas ContentView berasal dari TemplatedView kelas , yang mendefinisikan ControlTemplate properti yang dapat diikat, dari jenis ControlTemplate, yang menentukan tampilan kontrol. Untuk informasi selengkapnya tentang properti, ControlTemplate lihat Menyesuaikan tampilan dengan ControlTemplate.

Catatan

Hanya ContentView dapat berisi satu anak.

Membuat kontrol kustom

Kelas ini ContentView menawarkan sedikit fungsionalitas dengan sendirinya tetapi dapat digunakan untuk membuat kontrol kustom. Proses untuk membuat kontrol kustom adalah dengan:

1. Buat kelas yang berasal dari kelas ContentView.
2. Tentukan properti kontrol atau peristiwa apa pun dalam file code-behind untuk kontrol kustom.
3. Tentukan UI untuk kontrol kustom.

Artikel ini menunjukkan cara membuat CardView kontrol, yang merupakan elemen UI yang menampilkan gambar, judul, dan deskripsi dalam tata letak seperti kartu.

Membuat kelas turunan ContentView

Kelas ContentViewturunan dapat dibuat menggunakan templat item ContentView di Visual Studio. Templat ini membuat file XAML di mana UI untuk kontrol kustom dapat ditentukan, dan file code-behind di mana properti kontrol, peristiwa, dan logika lainnya dapat ditentukan.

Menentukan properti kontrol

Setiap properti kontrol, peristiwa, dan logika lainnya harus didefinisikan dalam file code-behind untuk ContentViewkelas -turunan.

CardView Kontrol kustom menentukan properti berikut:

• CardTitle, dari jenis string, yang mewakili judul yang ditunjukkan pada kartu.
• CardDescription, dari jenis string, yang mewakili deskripsi yang ditunjukkan pada kartu.
• IconImageSource, dari jenis ImageSource, yang mewakili gambar yang ditunjukkan pada kartu.
• IconBackgroundColor, dari jenis Color, yang mewakili warna latar belakang untuk gambar yang ditunjukkan pada kartu.
• BorderColor, dari jenis Color, yang mewakili warna batas kartu, batas gambar, dan garis pembagi.
• CardColor, dari jenis Color, yang mewakili warna latar belakang kartu.

Setiap properti didukung oleh BindableProperty instans.

Contoh berikut menunjukkan properti yang CardTitle dapat diikat dalam file code-behind untuk CardView kelas :

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();
    }
}

Untuk informasi selengkapnya tentang BindableProperty objek, lihat Properti yang dapat diikat.

Tentukan UI

UI kontrol kustom dapat didefinisikan dalam file XAML untuk ContentViewkelas -turunan, yang menggunakan ContentView sebagai elemen akar kontrol:

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

Elemen ContentView mengatur x:Name properti ke this, yang dapat digunakan untuk mengakses objek yang terikat ke CardView instans. Elemen dalam tata letak mengatur pengikatan pada propertinya ke nilai yang ditentukan pada objek terikat. Untuk informasi selengkapnya tentang pengikatan data, lihat Pengikatan data.

Catatan

Properti FallbackValue dalam Binding ekspresi memberikan nilai default jika pengikatannya adalah null.

Membuat instans kontrol kustom

Referensi ke namespace kontrol kustom harus ditambahkan ke halaman yang membuat instans kontrol kustom. Setelah referensi ditambahkan CardView , dapat diinstansiasi, dan propertinya ditentukan:

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

Cuplikan layar berikut menunjukkan beberapa CardView objek:

Menyesuaikan tampilan dengan ControlTemplate

Kontrol kustom yang berasal dari ContentView kelas dapat menentukan UI-nya menggunakan XAML atau kode, atau mungkin tidak menentukan UI-nya sama sekali. Dapat ControlTemplate digunakan untuk mengambil alih tampilan kontrol, terlepas dari bagaimana penampilan tersebut ditentukan.

Misalnya, CardView tata letak mungkin menempati terlalu banyak ruang untuk beberapa kasus penggunaan. ControlTemplate Dapat digunakan untuk mengambil CardView alih tata letak untuk memberikan tampilan yang lebih ringkas, cocok untuk daftar ringkas:

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

Pengikatan data dalam ControlTemplate menggunakan TemplateBinding ekstensi markup untuk menentukan pengikatan. Properti ControlTemplate kemudian dapat diatur ke objek yang ditentukan ControlTemplate , dengan menggunakan nilainya x:Key . Contoh berikut menunjukkan properti yang ControlTemplateCardView ditetapkan pada instans:

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

Cuplikan layar berikut menunjukkan instans standar CardView , dan beberapa CardView instans yang templat kontrolnya telah ditimpa:

Untuk informasi selengkapnya tentang templat kontrol, lihat Templat kontrol.