Apa itu gaya dan templat?

Gaya dan templat Windows Presentation Foundation (WPF) mengacu pada serangkaian fitur yang Anda gunakan untuk membuat efek yang menarik secara visual dan penampilan yang konsisten untuk produk Anda. Saat menyesuaikan tampilan aplikasi, Anda menginginkan model gaya dan templat yang kuat yang memungkinkan Anda mempertahankan dan berbagi tampilan di dalam dan di antara aplikasi. WPF menyediakan model tersebut.

Fitur lain dari model gaya WPF adalah pemisahan presentasi dan logika. Desainer dapat mengerjakan tampilan aplikasi hanya dengan menggunakan XAML pada saat yang sama ketika pengembang mengerjakan logika pemrograman dengan menggunakan C# atau Visual Basic.

Gambaran umum ini berfokus pada aspek gaya dan templat aplikasi dan tidak membahas konsep pengikatan data apa pun. Untuk informasi tentang pengikatan data, lihat Gambaran Umum Pengikatan Data .

Penting untuk memahami sumber daya, yang memungkinkan gaya dan templat digunakan kembali. Untuk informasi selengkapnya tentang sumber daya, lihat Gambaran Umum sumber daya XAML.

Contoh

Kode sampel yang disediakan dalam gambaran umum ini didasarkan pada aplikasi penjelajahan foto sederhana ditampilkan dalam ilustrasi berikut.

Sampel foto sederhana ini menggunakan gaya dan templat untuk menciptakan pengalaman pengguna yang menarik secara visual. Sampel memiliki dua elemen TextBlock dan kontrol ListBox yang terikat ke daftar gambar.

Untuk sampel lengkapnya, lihat Pengenalan Contoh Styling dan Templating.

Gaya

Anda dapat menganggap Style sebagai cara mudah untuk menerapkan sekumpulan nilai properti ke beberapa elemen. Anda dapat menggunakan gaya pada elemen apa pun yang berasal dari FrameworkElement atau FrameworkContentElement seperti Window atau Button.

Cara paling umum untuk mendeklarasikan gaya adalah sebagai sumber daya di bagian Resources dalam file XAML. Karena gaya adalah sumber daya, mereka mengikuti ketentuan cakupan yang sama dengan semua sumber daya. Di mana Anda mendeklarasikan gaya memengaruhi tempat Anda dapat menerapkannya. Misalnya, jika Anda mendeklarasikan gaya dalam elemen akar file XAML definisi aplikasi, Anda dapat menggunakan gaya di mana saja di aplikasi Anda.

Kode XAML berikut mendeklarasikan dua gaya untuk TextBlock: satu secara otomatis diterapkan ke semua TextBlock elemen, dan satu lagi yang harus direferensikan secara eksplisit.

<Window.Resources>
    <!-- .... other resources .... -->

    <!--A Style that affects all TextBlocks-->
    <Style TargetType="TextBlock">
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="FontFamily" Value="Comic Sans MS"/>
        <Setter Property="FontSize" Value="14"/>
    </Style>
    
    <!--A Style that extends the previous TextBlock Style with an x:Key of TitleText-->
    <Style BasedOn="{StaticResource {x:Type TextBlock}}"
           TargetType="TextBlock"
           x:Key="TitleText">
        <Setter Property="FontSize" Value="26"/>
        <Setter Property="Foreground">
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Offset="0.0" Color="#90DDDD" />
                        <GradientStop Offset="1.0" Color="#5BFFFF" />
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

Contoh berikut menunjukkan cara menggunakan gaya sebelumnya.

<StackPanel>
    <TextBlock Style="{StaticResource TitleText}" Name="textblock1">My Pictures</TextBlock>
    <TextBlock>Check out my new pictures!</TextBlock>
</StackPanel>

Untuk informasi selengkapnya, lihat Membuat gaya untuk kontrol.

ControlTemplates

Di WPF, parameter ControlTemplate dari sebuah kontrol menentukan tampilan kontrol tersebut. Anda dapat mengubah struktur dan tampilan kontrol dengan menentukan ControlTemplate baru dan menetapkannya ke kontrol. Dalam banyak kasus, templat memberi Anda cukup fleksibilitas sehingga Anda tidak perlu menulis kontrol kustom Anda sendiri.

Setiap kontrol memiliki templat default yang ditetapkan ke properti Control.Template. Templat menyambungkan presentasi visual kontrol dengan kemampuan kontrol. Karena Anda menentukan templat di XAML, Anda dapat mengubah tampilan kontrol tanpa menulis kode apa pun. Setiap templat dirancang untuk kontrol tertentu, seperti Button.

Penting

Saat Anda mengubah pohon visual kontrol, Anda harus mengganti seluruh ControlTemplate. Tidak ada cara untuk mengganti hanya sebagian dari struktur visual kontrol. Untuk mengubah pohon visual dari suatu kontrol, Anda harus mengatur properti Template kontrol tersebut ke ControlTemplate yang baru dan lengkap.

Biasanya Anda mendeklarasikan templat sebagai sumber daya di bagian Resources file XAML. Seperti semua sumber daya, aturan cakupan berlaku.

Templat kontrol jauh lebih terlibat daripada gaya. Kompleksitas ini ada karena templat kontrol menulis ulang tampilan visual seluruh kontrol, sementara gaya hanya menerapkan perubahan properti ke kontrol yang ada. Namun, karena templat kontrol diterapkan dengan mengatur properti Control.Template, Anda dapat menggunakan gaya untuk menentukan atau mengatur templat.

Desainer umumnya memungkinkan Anda membuat salinan templat yang sudah ada dan memodifikasinya. Misalnya, di perancang Visual Studio WPF, pilih kontrol CheckBox, lalu klik kanan dan pilih Edit templat>Buat salinan. Perintah ini menghasilkan gaya yang menentukan templat.

<Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual1}"/>
    <Setter Property="Background" Value="{StaticResource OptionMark.Static.Background1}"/>
    <Setter Property="BorderBrush" Value="{StaticResource OptionMark.Static.Border1}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Border x:Name="checkBoxBorder" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <Grid x:Name="markGrid">
                            <Path x:Name="optionMark" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Fill="{StaticResource OptionMark.Static.Glyph1}" Margin="1" Opacity="0" Stretch="None"/>
                            <Rectangle x:Name="indeterminateMark" Fill="{StaticResource OptionMark.Static.Glyph1}" Margin="2" Opacity="0"/>
                        </Grid>
                    </Border>
                    <ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasContent" Value="true">
                        <Setter Property="FocusVisualStyle" Value="{StaticResource OptionMarkFocusVisual1}"/>
                        <Setter Property="Padding" Value="4,-1,0,0"/>

... content removed to save space ...

Mengedit salinan templat adalah cara yang bagus untuk mempelajari cara kerja templat. Alih-alih membuat templat kosong baru, lebih mudah untuk mengedit salinan dan mengubah beberapa aspek presentasi visual.

Misalnya, lihat Membuat templat untuk kontrol.

Pengikatan Templat

Anda mungkin melihat bahwa sumber daya templat yang ditentukan di bagian sebelumnya menggunakan TemplateBinding Markup Extension. TemplateBinding adalah bentuk pengikatan yang dioptimalkan untuk skenario templat, dianalogikan dengan pengikatan yang dibangun dengan {Binding RelativeSource={RelativeSource TemplatedParent}}. TemplateBinding berguna untuk mengikat bagian templat ke properti kontrol. Misalnya, setiap kontrol memiliki properti BorderThickness. Gunakan TemplateBinding untuk mengelola elemen mana dalam templat yang dipengaruhi oleh pengaturan kontrol ini.

ContentControl dan ItemsControl

Jika sebuah ContentPresenter dideklarasikan dalam ControlTemplate dari ContentControl, maka ContentPresenter secara otomatis mengikat ke properti ContentTemplate dan Content. Demikian juga, ItemsPresenter yang ada di ControlTemplate dari ItemsControl secara otomatis mengikat pada properti ItemTemplate dan Items.

DataTemplates

Dalam aplikasi sampel ini, ListBox mengaitkan kontrol dengan daftar foto.

<ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}"
         Background="Silver" Width="600" Margin="10" SelectedIndex="0"/>

Saat ini ListBox terlihat seperti gambar berikut.

Sebagian besar kontrol memiliki beberapa jenis konten, dan konten tersebut sering berasal dari data yang Anda ikat. Dalam sampel ini, data adalah daftar foto. Di WPF, Anda menggunakan DataTemplate untuk menentukan representasi visual data. Pada dasarnya, apa yang Anda masukkan ke dalam DataTemplate menentukan seperti apa data di aplikasi yang dirender.

Dalam aplikasi sampel ini, setiap objek kustom Photo memiliki Source properti string jenis yang menentukan jalur file gambar. Saat ini, objek foto muncul sebagai jalur file.

public class Photo
{
    public Photo(string path)
    {
        Source = path;
    }

    public string Source { get; }

    public override string ToString() => Source;
}

Public Class Photo
    Sub New(ByVal path As String)
        Source = path
    End Sub

    Public ReadOnly Property Source As String

    Public Overrides Function ToString() As String
        Return Source
    End Function
End Class

Agar foto muncul sebagai gambar, Anda membuat DataTemplate sebagai sumber daya.

<Window.Resources>
    <!-- .... other resources .... -->

    <!--DataTemplate to display Photos as images
    instead of text strings of Paths-->
    <DataTemplate DataType="{x:Type local:Photo}">
        <Border Margin="3">
            <Image Source="{Binding Source}"/>
        </Border>
    </DataTemplate>
</Window.Resources>

Perhatikan bahwa properti DataType mirip dengan properti TargetType dari Style. Jika Anda menambahkan DataTemplate ke bagian sumber daya dan menetapkan properti DataType ke jenis tertentu serta menghilangkan x:Key, DataTemplate akan diterapkan setiap kali jenis tersebut muncul. Anda juga dapat menetapkan DataTemplate ke x:Key dan kemudian mengaturnya sebagai StaticResource untuk properti yang memerlukan jenis DataTemplate, seperti properti ItemTemplate atau ContentTemplate.

Pada dasarnya, DataTemplate dalam contoh sebelumnya mendefinisikan bahwa setiap kali ada Photo objek, itu akan muncul sebagai Image dalam Border. Dengan menggunakan ini DataTemplate, aplikasi sekarang terlihat seperti gambar ini.

Foto

Model templat data menyediakan fitur lain. Misalnya, jika Anda menampilkan data pengumpulan yang berisi koleksi lain dengan menggunakan HeaderedItemsControl jenis seperti Menu atau TreeView, gunakan HierarchicalDataTemplate. Fitur templat data lain adalah DataTemplateSelector, yang dapat Anda gunakan untuk memilih DataTemplate berdasarkan logika kustom. Untuk informasi selengkapnya, lihat Gambaran Umum Templat Data, yang menyediakan diskusi yang lebih mendalam tentang berbagai fitur templat data.

Pemicu

Pemicu mengatur properti atau memulai tindakan, seperti animasi, saat nilai properti berubah atau saat peristiwa dinaikkan. Style, ControlTemplate, dan DataTemplate semuanya memiliki properti Triggers yang dapat berisi serangkaian pemicu. Ada beberapa jenis pemicu.

Pemicu properti

Trigger yang menetapkan nilai properti atau memulai tindakan berdasarkan nilai properti disebut pemicu properti.

Untuk menunjukkan cara menggunakan pemicu properti, Anda dapat membuat setiap ListBoxItem transparan sebagian kecuali jika dipilih. Gaya yang berikut mengatur nilai Opacity dari ListBoxItem ke 0.5. Namun, ketika properti IsSelectedtrue, maka Opacity akan diatur ke 1.0.

<Window.Resources>
    <!-- .... other resources .... -->

    <Style TargetType="ListBoxItem">
        <Setter Property="Opacity" Value="0.5" />
        <Setter Property="MaxHeight" Value="75" />
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Trigger.Setters>
                    <Setter Property="Opacity" Value="1.0" />
                </Trigger.Setters>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

Contoh ini menggunakan Trigger untuk mengatur nilai properti, tetapi perhatikan bahwa kelas Trigger juga memiliki properti EnterActions dan ExitActions yang memungkinkan pemicu untuk melakukan tindakan.

Perhatikan bahwa properti MaxHeight dari ListBoxItem diatur ke 75. Dalam ilustrasi berikut, item ketiga adalah item yang dipilih.

Pemicu peristiwa dan papan cerita

Jenis pemicu lainnya adalah EventTrigger, yang memulai serangkaian tindakan berdasarkan terjadinya suatu peristiwa. Misalnya, objek EventTrigger berikut menentukan bahwa ketika penunjuk mouse memasuki ListBoxItem, properti MaxHeight bergerak ke nilai 90 selama periode 0.2 detik. Saat mouse menjauh dari item, properti akan kembali ke nilai asli selama periode 1 detik. Perhatikan bagaimana Anda tidak perlu menentukan To nilai untuk MouseLeave animasi. Perilaku ini terjadi karena animasi melacak nilai asli.

<Style.Triggers>
    <Trigger Property="IsSelected" Value="True">
        <Trigger.Setters>
            <Setter Property="Opacity" Value="1.0" />
        </Trigger.Setters>
    </Trigger>
    <EventTrigger RoutedEvent="Mouse.MouseEnter">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Duration="0:0:0.2"
                        Storyboard.TargetProperty="MaxHeight"
                        To="90"  />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="Mouse.MouseLeave">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Duration="0:0:1"
                        Storyboard.TargetProperty="MaxHeight"  />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Style.Triggers>

Untuk informasi selengkapnya, lihat gambaran umum Storyboards.

Dalam ilustrasi berikut, mouse menunjuk ke item ketiga.

MultiTriggers, DataTriggers, dan MultiDataTriggers

Selain Trigger dan EventTrigger, ada jenis pemicu lainnya. Dengan menggunakan MultiTrigger, Anda dapat mengatur nilai properti berdasarkan beberapa kondisi. Gunakan DataTrigger dan MultiDataTrigger saat properti kondisi Anda terikat pada data.

Status Visual

Kontrol selalu dalam status tertentu. Misalnya, ketika mouse bergerak di atas permukaan kontrol, kontrol berada dalam keadaan MouseOverumum . Kontrol tanpa status tertentu berada dalam status umum Normal . Status dipecah menjadi grup, dan status yang disebutkan sebelumnya adalah bagian dari grup status CommonStates. Sebagian besar kontrol memiliki dua grup status: CommonStates dan FocusStates. Dari setiap grup status yang diterapkan ke kontrol, kontrol selalu dalam satu status setiap grup, seperti CommonStates.MouseOver dan FocusStates.Unfocused. Namun, kontrol tidak dapat berada di dua status berbeda dalam grup yang sama, seperti CommonStates.Normal dan CommonStates.Disabled. Tabel berikut ini menunjukkan keadaan yang paling banyak dikenali dan digunakan oleh kontrol.

Nama dari VisualState	Nama dari VisualStateGroup	Deskripsi
Normal	CommonStates	Kondisi bawaan.
MouseOver	CommonStates	Penunjuk mouse diposisikan di atas kontrol.
Pressed	CommonStates	Tombol Control ditekan.
Disabled	CommonStates	Kontrol dinonaktifkan.
Focused	FocusStates	Pengendali sedang terfokus.
Unfocused	FocusStates	Kontrol tidak memiliki fokus.

Dengan menentukan System.Windows.VisualStateManager pada elemen akar templat kontrol, Anda dapat memicu animasi saat kontrol memasuki status tertentu. VisualStateManager mendeklarasikan kombinasi VisualStateGroup dan VisualState mana yang harus diperhatikan. Saat kontrol memasuki keadaan diawasi, animasi yang ditentukan oleh VisualStateManager dimulai.

Misalnya, kode XAML berikut mengawasi status CommonStates.MouseOver untuk menganimasikan warna isian elemen bernama backgroundElement. Saat kontrol kembali ke CommonStates.Normal status, animasi memulihkan warna isian elemen bernama backgroundElement.

<ControlTemplate x:Key="roundbutton" TargetType="Button">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal">
                    <ColorAnimation Storyboard.TargetName="backgroundElement"
                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                    To="{TemplateBinding Background}"
                                    Duration="0:0:0.3"/>
                </VisualState>
                <VisualState Name="MouseOver">
                    <ColorAnimation Storyboard.TargetName="backgroundElement"
                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                    To="Yellow"
                                    Duration="0:0:0.3"/>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        ...

Untuk informasi selengkapnya tentang papan cerita, lihat Gambaran Umum Storyboards.

Sumber daya dan tema bersama

Aplikasi WPF yang khas mungkin memiliki beberapa sumber daya UI yang Anda terapkan di seluruh aplikasi. Anda dapat mempertimbangkan sekumpulan sumber daya ini sebagai tema untuk aplikasi. WPF mendukung mengemas sumber daya UI sebagai tema dengan menggunakan kamus sumber daya yang dienkapsulasi oleh kelas ResourceDictionary.

Tentukan tema WPF dengan menggunakan mekanisme gaya dan templat yang diekspos WPF untuk menyesuaikan visual elemen apa pun.

Simpan sumber daya tema WPF dalam kamus sumber daya yang disematkan. Anda harus menyematkan kamus sumber daya ini dalam rakitan yang ditandatangani. Anda dapat menyematkannya dalam rakitan yang sama dengan kode itu sendiri atau di rakitan berdampingan. Untuk PresentationFramework.dll, rakitan yang berisi kontrol WPF, pengembang menanamkan sumber daya tema dalam serangkaian rakitan paralel. Sistem operasi menentukan kamus sumber daya tema mana yang akan digunakan saat runtime.

Tema adalah tempat terakhir untuk dilihat saat mencari gaya elemen. Biasanya, pencarian dimulai dengan berjalan di pohon elemen yang mencari sumber daya yang sesuai, lalu melihat dalam koleksi sumber daya aplikasi dan akhirnya mengkueri sistem. Pola pencarian ini memberi pengembang aplikasi kesempatan untuk menentukan ulang gaya untuk objek apa pun di tingkat pohon atau aplikasi sebelum mencapai tema.

Anda dapat menentukan kamus sumber daya sebagai file individual yang memungkinkan Anda menggunakan kembali tema di beberapa aplikasi. Anda juga dapat membuat tema yang dapat ditukar dengan menentukan beberapa kamus sumber daya yang menyediakan jenis sumber daya yang sama tetapi dengan nilai yang berbeda. Mendefinisikan ulang gaya-gaya ini atau sumber daya lain di tingkat aplikasi adalah pendekatan yang direkomendasikan untuk menyesuaikan tampilan aplikasi.

Untuk berbagi sekumpulan sumber daya, termasuk gaya dan templat, di seluruh aplikasi, buat file XAML dan tentukan ResourceDictionary yang menyertakan referensi ke shared.xaml file.

<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="Shared.xaml" />
</ResourceDictionary.MergedDictionaries>

Dengan berbagi shared.xaml, yang sendiri mendefinisikan ResourceDictionary yang berisi sekumpulan gaya dan sumber daya kuas, Anda mengaktifkan kontrol dalam aplikasi untuk memiliki tampilan yang konsisten.

Untuk informasi selengkapnya, lihat kamus sumber daya gabungan .

Untuk membuat tema untuk kontrol kustom Anda, lihat bagian Menentukan sumber daya di bagian tingkat temadari gambaran umum penulisan kontrol.

Menggunakan tema bawaan

WPF menyertakan beberapa tema bawaan yang dapat Anda terapkan secara eksplisit ke aplikasi Anda. Tema-tema ini disematkan dalam rakitan PresentationFramework dan Anda dapat mereferensikannya dengan menggunakan URI paket di kamus sumber daya aplikasi Anda.

Untuk menerapkan tema bawaan, gabungkan kamus sumber daya tema ke dalam sumber daya aplikasi Anda di App.xaml:

<Application x:Class="MyApp.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/PresentationFramework.Aero2;component/themes/Aero2.NormalColor.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Tema bawaan yang tersedia

Tabel berikut mencantumkan tema bawaan yang tersedia melalui URI paket:

Tema	Paket URI	Deskripsi
Aero2	/PresentationFramework.Aero2;component/themes/Aero2.NormalColor.xaml	Tema default untuk aplikasi Windows 8 dan yang lebih baru.
AeroLite	/PresentationFramework.AeroLite;component/themes/AeroLite.NormalColor.xaml	Versi Aero2 yang disederhanakan dengan efek visual yang dikurangi.
Aero	/PresentationFramework.Aero;component/themes/Aero.NormalColor.xaml	Tema Windows 7-era dengan efek kaca dan gradien.
Fasih	/PresentationFramework.Fluent;component/Themes/Fluent.xaml	Tema gaya Windows 11 dengan dukungan mode terang/gelap (.NET 9+).
Luna (Biru)	/PresentationFramework.Luna;component/themes/Luna.NormalColor.xaml	Skema warna biru default Windows XP.
Luna (Perak)	/PresentationFramework.Luna;component/themes/Luna.Metallic.xaml	Skema warna perak logam Windows XP.
Luna (Zaitun)	/PresentationFramework.Luna;component/themes/Luna.Homestead.xaml	Skema warna hijau zaitun Windows XP.
Royale	/PresentationFramework.Royale;component/themes/Royale.NormalColor.xaml	Tema Windows XP Media Center Edition.
Classic	/PresentationFramework.Classic;component/themes/Classic.xaml	Tampilan Windows tradisional 95/98/2000.

Nota

Untuk aplikasi .NET Framework, Anda mungkin perlu menambahkan referensi ke rakitan tema (seperti PresentationFramework.Aero2) dalam proyek Anda. Untuk aplikasi .NET, rakitan tema biasanya disertakan secara otomatis.

Petunjuk / Saran

Untuk referensi pengembang, Visual Studio menyertakan file XAML untuk tema-tema ini di direktori penginstalan Anda, biasanya terletak di C:\Program Files\Microsoft Visual Studio\2022\<edition>\DesignTools\SystemThemes\wpf. File-file ini berguna untuk memahami struktur tema tetapi tidak digunakan saat runtime.

Menggunakan tema Fluent modern (.NET 9+)

Untuk .NET 9 dan yang lebih baru, Anda dapat menggunakan tema Fluent baru yang mendukung mode terang dan gelap:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/PresentationFramework.Fluent;component/Themes/Fluent.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Atau, Anda dapat menggunakan ThemeMode properti untuk aplikasi tema yang lebih sederhana:

<Application x:Class="MyApp.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml"
             ThemeMode="System">
</Application>

Lihat juga

• Pack URI di WPF
• Cara Menemukan ControlTemplate-Generated Elemen
• Temukan DataTemplate-Generated Elemen