Templat kontrol

Anda dapat menyesuaikan struktur visual kontrol dan perilaku visual dengan membuat templat kontrol dalam kerangka kerja XAML. Kontrol memiliki banyak properti, seperti Latar Belakang, Latar Depan, dan FontFamily, yang dapat Anda atur untuk menentukan berbagai aspek tampilan kontrol. Tetapi perubahan yang dapat Anda buat dengan mengatur properti ini terbatas. Anda dapat menentukan kustomisasi tambahan dengan membuat templat menggunakan kelas ControlTemplate . Di sini, kami menunjukkan kepada Anda cara membuat ControlTemplate untuk menyesuaikan tampilan kontrol Kotak Centang .

API Penting: Kelas ControlTemplate, properti Control.Template

Contoh templat kontrol khusus

Secara default, kontrol Kotak Centang menempatkan kontennya (string atau objek di samping Kotak Centang) di sebelah kanan kotak pilihan, dan tanda centang menunjukkan bahwa pengguna memilih Kotak Centang. Karakteristik ini mewakili struktur visual dan perilaku visual Kotak Centang.

Berikut adalah CheckBox yang menggunakan ControlTemplate default yang diperlihatkan dalam keadaan Unchecked, Checked, dan Indeterminate.

templat kotak centang default

Anda dapat mengubah karakteristik ini dengan membuat ControlTemplate untuk CheckBox. Misalnya, jika Anda ingin konten kotak centang berada di bawah kotak pilihan, dan Anda ingin menggunakan X untuk menunjukkan bahwa pengguna memilih kotak centang. Anda menentukan karakteristik ini dalam ControlTemplate dari CheckBox.

Untuk menggunakan templat kustom dengan kontrol, tetapkan ControlTemplate ke properti Template kontrol. Berikut adalah Kotak Centang menggunakan ControlTemplate yang disebut CheckBoxTemplate1. Kami menunjukkan Extensible Application Markup Language (XAML) untuk ControlTemplate di bagian berikutnya.

<CheckBox Content="CheckBox" Template="{StaticResource CheckBoxTemplate1}" IsThreeState="True" Margin="20"/>

Berikut tampilan kotak centang ini di status-status Unchecked, Checked, dan Indeterminate setelah kami menerapkan template kami.

templat kotak centang kustom

Spesifikasikan struktur visual dari sebuah kontrol

Saat membuat ControlTemplate, Anda menggabungkan objek FrameworkElement untuk membangun satu kontrol. ControlTemplate harus memiliki hanya satu FrameworkElement sebagai elemen akarnya. Elemen root biasanya berisi objek FrameworkElement lainnya. Kombinasi objek membentuk struktur visual kontrol.

XAML ini membuat ControlTemplate untuk CheckBox yang menentukan bahwa konten kontrol berada di bawah kotak pilihan. Elemen akar adalah Batas. Contoh menentukan Path untuk membuat X yang menunjukkan bahwa pengguna telah memilih CheckBox, dan Ellipse yang menunjukkan status yang tidak ditentukan. Perhatikan bahwa Opasitas diatur ke 0 pada Jalur dan Elips sehingga secara default, keduanya tidak muncul.

TemplateBinding adalah pengikatan khusus yang menautkan nilai properti dalam templat kontrol ke nilai properti lain yang diekspos oleh kontrol yang diberi templat. TemplateBinding hanya dapat digunakan dalam definisi ControlTemplate di XAML. Lihat ekstensi markup TemplateBinding untuk informasi lebih lanjut.

Nota

Dimulai dengan Windows 10, versi 1809 (SDK 17763), Anda dapat menggunakan x:Bind markup extensions di tempat Anda menggunakan TemplateBinding. Lihat ekstensi markup TemplateBinding untuk informasi lebih lanjut.

<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">
    <Border BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20"
                       Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
                       UseLayoutRounding="False"/>
            <!-- Create an X to indicate that the CheckBox is selected. -->
            <Path x:Name="CheckGlyph"
                  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z"
                  Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                  FlowDirection="LeftToRight"
                  Height="14" Width="16" Opacity="0" Stretch="Fill"/>
            <Ellipse x:Name="IndeterminateGlyph"
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                     Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Content="{TemplateBinding Content}"
                              Margin="{TemplateBinding Padding}" Grid.Row="1"
                              HorizontalAlignment="Center"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>

Menentukan perilaku visual kontrol

Perilaku visual menentukan tampilan kontrol saat berada dalam keadaan tertentu. Kontrol Kotak Centang memiliki 3 status pemeriksaan: Checked, Unchecked, dan Indeterminate. Nilai properti IsChecked menentukan status CheckBox, dan statusnya menentukan apa yang muncul dalam kotak.

Tabel ini mencantumkan kemungkinan nilai IsChecked, status Kotak Centang terkait, dan tampilan Kotak Centang.

Dicentang nilai Kotak Centang status tampilan CheckBox
benar Checked Berisi "X".
salah Unchecked Kosong.
nihil Indeterminate Berisi lingkaran.

Anda menentukan tampilan kontrol saat berada dalam status tertentu dengan menggunakan objek VisualState . VisualState berisi Setter atau Storyboard yang mengubah tampilan elemen dalam ControlTemplate. Saat kontrol memasuki keadaan yang ditentukan oleh properti VisualState.Name, perubahan pada properti diterapkan dalam Setter atau Storyboard. Saat kontrol keluar dari status, perubahan akan dihapus. Anda menambahkan objek VisualState ke objek VisualStateGroup. Anda menambahkan objek VisualStateGroup ke properti terlampir VisualStateManager.VisualStateGroups, yang Anda tetapkan pada root FrameworkElement dari ControlTemplate.

XAML ini menunjukkan objek VisualState untuk status Checked, Unchecked, dan Indeterminate. Contoh mengatur properti terlampir VisualStateManager.VisualStateGroups pada Border, yang merupakan elemen akar dari ControlTemplate. VisualState menentukan bahwa Opacity dari Jalur bernama (yang kami perlihatkan dalam contoh sebelumnya) adalah 1. VisualState menentukan bahwa Opacity dari Elips bernama adalah 1. VisualState tidak memiliki Setter atau Storyboard, sehingga CheckBox kembali ke tampilan defaultnya.

<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">
    <Border BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}">

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CheckStates">
                <VisualState x:Name="Checked">
                    <VisualState.Setters>
                        <Setter Target="CheckGlyph.Opacity" Value="1"/>
                    </VisualState.Setters>
                    <!-- This Storyboard is equivalent to the Setter. -->
                    <!--<Storyboard>
                        <DoubleAnimation Duration="0" To="1"
                         Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>-->
                </VisualState>
                <VisualState x:Name="Unchecked"/>
                <VisualState x:Name="Indeterminate">
                    <VisualState.Setters>
                        <Setter Target="IndeterminateGlyph.Opacity" Value="1"/>
                    </VisualState.Setters>
                    <!-- This Storyboard is equivalent to the Setter. -->
                    <!--<Storyboard>
                        <DoubleAnimation Duration="0" To="1"
                         Storyboard.TargetName="IndeterminateGlyph" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>-->
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20"
                       Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
                       UseLayoutRounding="False"/>
            <!-- Create an X to indicate that the CheckBox is selected. -->
            <Path x:Name="CheckGlyph"
                  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z"
                  Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                  FlowDirection="LeftToRight"
                  Height="14" Width="16" Opacity="0" Stretch="Fill"/>
            <Ellipse x:Name="IndeterminateGlyph"
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                     Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Content="{TemplateBinding Content}"
                              Margin="{TemplateBinding Padding}" Grid.Row="1"
                              HorizontalAlignment="Center"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>

Untuk lebih memahami cara kerja objek VisualState , pertimbangkan apa yang terjadi ketika Kotak Centang beralih dari Unchecked status ke Checked status, lalu ke Indeterminate status, lalu kembali ke status Unchecked . Berikut adalah transisi.

Transisi status Apa yang terjadi Tampilan Kotak Centang saat transisi selesai
Dari Unchecked ke Checked. Nilai Setter dari CheckedVisualState diterapkan, sehingga Opacity dari CheckGlyph adalah 1. Sebuah X ditampilkan.
Dari Checked ke Indeterminate. Nilai Setter dari IndeterminateVisualState diterapkan, sehingga Opacity dari IndeterminateGlyph adalah 1. Nilai Setter dari VisualState dihapus, sehingga Opacity adalah 0. Sebuah lingkaran ditampilkan.
Dari Indeterminate ke Unchecked. Nilai Setter dari IndeterminateVisualState dihapus, sehingga Opacity dari IndeterminateGlyph adalah 0. Tidak ada yang ditampilkan.

 Untuk informasi selengkapnya tentang cara membuat status visual untuk kontrol, dan khususnya cara menggunakan kelas Storyboard dan jenis animasinya, lihat animasi Storyboard untuk status visual.

Gunakan alat untuk bekerja dengan tema dengan mudah

Cara cepat untuk menerapkan tema ke kontrol Anda adalah dengan mengklik kanan kontrol pada Kerangka Microsoft Visual Studio Document dan pilih Edit Theme atau Edit Style (tergantung pada kontrol yang Anda klik kanan). Anda kemudian dapat menerapkan tema yang sudah ada dengan memilih Terapkan Tema atau mendefinisikan yang baru dengan memilih Buat Tema Kosong.

Kontrol dan aksesibilitas

Saat Anda membuat templat baru untuk kontrol, selain mungkin mengubah perilaku kontrol dan tampilan visual, Anda mungkin juga mengubah bagaimana kontrol mewakili dirinya sendiri ke kerangka kerja aksesibilitas. Windows app mendukung kerangka kerja Microsoft UI Automation untuk aksesibilitas. Semua kontrol default dan templatnya memiliki dukungan untuk jenis dan pola kontrol UI Automation umum yang sesuai untuk tujuan dan fungsi kontrol. Jenis dan pola kontrol ini ditafsirkan oleh klien UI Automation seperti teknologi bantuan, dan ini memungkinkan kontrol untuk dapat diakses sebagai bagian dari UI aplikasi yang lebih besar yang dapat diakses.

Untuk memisahkan logika kontrol dasar dan memenuhi beberapa persyaratan arsitektur UI Automation, kelas kontrol menyertakan dukungan aksesibilitas mereka dalam kelas terpisah, yaitu rekan otomatisasi. Rekan otomatisasi terkadang memiliki interaksi dengan templat kontrol karena rekan-rekan mengharapkan bagian bernama tertentu untuk ada dalam templat, sehingga fungsionalitas seperti memungkinkan teknologi bantuan untuk memanggil tindakan tombol dimungkinkan.

Ketika Anda membuat kontrol kustom yang benar-benar baru, Anda terkadang juga ingin membuat rekan otomatisasi baru untuk mengikutinya. Untuk informasi selengkapnya, lihat Rekan otomatisasi kustom.

Pelajari selengkapnya tentang templat default kontrol

Topik yang mendokumentasikan gaya dan templat untuk kontrol XAML menunjukkan kutipan XAML awal yang sama yang akan Anda lihat jika Anda menggunakan teknik Edit Tema atau Edit Gaya yang dijelaskan sebelumnya. Setiap topik mencantumkan nama status visual, sumber daya tema yang digunakan, dan XAML lengkap untuk gaya yang berisi templat. Topik dapat menjadi panduan yang berguna jika Anda sudah mulai memodifikasi templat dan ingin melihat seperti apa templat aslinya, atau untuk memverifikasi bahwa templat baru Anda memiliki semua status visual bernama yang diperlukan.

Sumber daya tema dalam templat kontrol

Untuk beberapa atribut dalam contoh XAML, Anda mungkin telah melihat referensi sumber daya yang menggunakan ekstensi markup {ThemeResource}. Ini adalah teknik yang memungkinkan templat kontrol tunggal untuk menggunakan sumber daya yang dapat menjadi nilai yang berbeda tergantung pada tema mana yang saat ini aktif. Ini sangat penting untuk kuas dan warna, karena tujuan utama tema adalah untuk memungkinkan pengguna memilih apakah mereka menginginkan tema kontras gelap, terang, atau tinggi yang diterapkan pada sistem secara keseluruhan. Aplikasi yang menggunakan sistem sumber daya XAML dapat menggunakan set sumber daya yang sesuai untuk tema tersebut, sehingga pilihan tema di UI aplikasi mencerminkan pilihan tema di seluruh sistem pengguna.

Dapatkan kode contoh

  • Last updated on