Tutorial: Membuat aplikasi WPF pertama Anda di Visual Studio 2019
Artikel ini menunjukkan kepada Anda cara mengembangkan aplikasi desktop Windows Presentation Foundation (WPF) yang mencakup elemen yang umum untuk sebagian besar aplikasi WPF: Markup Extensible Application Markup Language (XAML), kode-balik, definisi aplikasi, kontrol, tata letak, pengikatan data, dan gaya. Untuk mengembangkan aplikasi, Anda akan menggunakan Visual Studio.
Penting
Artikel ini ditulis untuk .NET Framework. Untuk mulai menggunakan .NET 7, lihat Tutorial: Membuat aplikasi WPF baru (WPF .NET).
Dalam tutorial ini, Anda akan mempelajari cara:
- Buat proyek WPF.
- Gunakan XAML untuk merancang tampilan antarmuka pengguna (UI) aplikasi.
- Tulis kode untuk membangun perilaku aplikasi.
- Buat definisi aplikasi untuk mengelola aplikasi.
- Tambahkan kontrol dan buat tata letak untuk menyusun UI aplikasi.
- Buat gaya untuk tampilan yang konsisten di seluruh UI aplikasi.
- Ikat UI ke data, baik untuk mengisi UI dari data maupun untuk menjaga data dan UI tetap sinkron.
Pada akhir tutorial, Anda akan membuat aplikasi Windows mandiri yang memungkinkan pengguna untuk melihat laporan pengeluaran untuk orang yang dipilih. Aplikasi ini terdiri dari beberapa halaman WPF yang dihosting di jendela gaya browser.
Tip
Kode sampel yang digunakan dalam tutorial ini tersedia untuk Visual Basic dan C# di Tutorial WPF App Sample Code.
Anda dapat mengalihkan bahasa kode dari kode sampel antara C# dan Visual Basic dengan menggunakan pemilih bahasa di atas halaman ini.
Prasyarat
Visual Studio 2019 dengan beban kerja pengembangan desktop .NET terinstal.
Untuk informasi selengkapnya tentang menginstal Visual Studio versi terbaru, lihat Menginstal Visual Studio.
Membuat proyek aplikasi
Langkah pertama adalah membuat infrastruktur aplikasi, yang mencakup definisi aplikasi, dua halaman, dan gambar.
Buat proyek Aplikasi WPF baru di Visual Basic atau Visual C# bernama
ExpenseIt
:Buka Visual Studio dan pilih Buat proyek baru di bawah menu Mulai .
Dialog Buat proyek baru terbuka.
Di menu dropdown Bahasa, pilih C# atau Visual Basic.
Pilih templat WPF App (.NET Framework) lalu pilih Berikutnya.
Dialog Konfigurasikan proyek baru Anda terbuka.
Masukkan nama
ExpenseIt
proyek lalu pilih Buat.Visual Studio membuat proyek dan membuka perancang untuk jendela aplikasi default bernama MainWindow.xaml.
Buka Application.xaml (Visual Basic) atau App.xaml (C#).
File XAML ini mendefinisikan aplikasi WPF dan sumber daya aplikasi apa pun. Anda juga menggunakan file ini untuk menentukan UI, dalam hal ini MainWindow.xaml, yang secara otomatis menunjukkan kapan aplikasi dimulai.
XAML Anda akan terlihat seperti berikut ini di Visual Basic:
<Application x:Class="Application" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml"> <Application.Resources> </Application.Resources> </Application>
Dan seperti berikut ini di C#:
<Application x:Class="ExpenseIt.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml"> <Application.Resources> </Application.Resources> </Application>
Buka MainWindow.xaml.
File XAML ini adalah jendela utama aplikasi Anda dan menampilkan konten yang dibuat di halaman. Kelas Window menentukan properti jendela, seperti judul, ukuran, atau ikonnya, dan menangani peristiwa, seperti menutup atau menyembunyikan.
Window Ubah elemen menjadi , seperti yang NavigationWindowditunjukkan dalam XAML berikut:
<NavigationWindow x:Class="ExpenseIt.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ... </NavigationWindow>
Aplikasi ini menavigasi ke konten yang berbeda tergantung pada input pengguna. Inilah sebabnya mengapa yang utama Window perlu diubah menjadi NavigationWindow. NavigationWindowmewarisi semua properti .Window Elemen NavigationWindow dalam file XAML membuat instans NavigationWindow kelas. Untuk informasi selengkapnya, lihat Gambaran umum navigasi.
Grid Hapus elemen dari antara NavigationWindow tag.
Ubah properti berikut dalam kode XAML untuk NavigationWindow elemen :
Atur properti ke Title "
ExpenseIt
".Atur Height properti ke 350 piksel.
Atur Width properti ke 500 piksel.
XAML Anda akan terlihat seperti berikut ini untuk Visual Basic:
<NavigationWindow x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ExpenseIt" Height="350" Width="500"> </NavigationWindow>
Dan seperti berikut ini untuk C#:
<NavigationWindow x:Class="ExpenseIt.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ExpenseIt" Height="350" Width="500"> </NavigationWindow>
Buka MainWindow.xaml.vb atau MainWindow.xaml.cs.
File ini adalah file code-behind yang berisi kode untuk menangani peristiwa yang dideklarasikan dalam MainWindow.xaml. File ini berisi kelas parsial untuk jendela yang ditentukan dalam XAML.
Jika Anda menggunakan C#, ubah
MainWindow
kelas menjadi berasal dari NavigationWindow. (Di Visual Basic, ini terjadi secara otomatis saat Anda mengubah jendela di XAML.) Kode C# Anda sekarang akan terlihat seperti ini:using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace ExpenseIt { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : NavigationWindow { public MainWindow() { InitializeComponent(); } } }
Menambahkan file ke aplikasi
Di bagian ini, Anda akan menambahkan dua halaman dan gambar ke aplikasi.
Tambahkan halaman baru ke proyek, dan beri nama
ExpenseItHome.xaml
:Di Penjelajah Solusi, klik kanan pada simpul
ExpenseIt
proyek dan pilih Tambahkan>Halaman.Dalam dialog Tambahkan Item Baru, templat Halaman (WPF) sudah dipilih. Masukkan nama
ExpenseItHome
, lalu pilih Tambahkan.
Halaman ini adalah halaman pertama yang ditampilkan saat aplikasi diluncurkan. Ini akan menampilkan daftar orang untuk dipilih, untuk menampilkan laporan pengeluaran.
Buka
ExpenseItHome.xaml
.Atur ke Title "
ExpenseIt - Home
".Atur
DesignHeight
ke 350 piksel danDesignWidth
ke 500 piksel.XAML sekarang muncul sebagai berikut untuk Visual Basic:
<Page x:Class="ExpenseItHome" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="350" d:DesignWidth="500" Title="ExpenseIt - Home"> <Grid> </Grid> </Page>
Dan seperti berikut ini untuk C#:
<Page x:Class="ExpenseIt.ExpenseItHome" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="350" d:DesignWidth="500" Title="ExpenseIt - Home"> <Grid> </Grid> </Page>
Buka MainWindow.xaml.
Source Tambahkan properti ke NavigationWindow elemen dan atur ke "
ExpenseItHome.xaml
".Set
ExpenseItHome.xaml
ini menjadi halaman pertama yang dibuka ketika aplikasi dimulai.Contoh XAML di Visual Basic:
<NavigationWindow x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml"> </NavigationWindow>
Dan di C#:
<NavigationWindow x:Class="ExpenseIt.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml"> </NavigationWindow>
Tip
Anda juga dapat mengatur properti Sumber dalam kategori Lain-lain dari jendela Properti .
Tambahkan halaman WPF baru lainnya ke proyek, dan beri nama ExpenseReportPage.xaml::
Di Penjelajah Solusi, klik kanan pada simpul
ExpenseIt
proyek dan pilih Tambahkan>Halaman.Dalam dialog Tambahkan Item Baru, pilih templat Halaman (WPF). Masukkan nama ExpenseReportPage, lalu pilih Tambahkan.
Halaman ini akan menampilkan laporan pengeluaran untuk orang yang dipilih di halaman.
ExpenseItHome
Buka ExpenseReportPage.xaml.
Atur ke Title "
ExpenseIt - View Expense
".Atur
DesignHeight
ke 350 piksel danDesignWidth
ke 500 piksel.ExpenseReportPage.xaml sekarang terlihat seperti berikut ini di Visual Basic:
<Page x:Class="ExpenseReportPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="350" d:DesignWidth="500" Title="ExpenseIt - View Expense"> <Grid> </Grid> </Page>
Dan seperti berikut ini di C#:
<Page x:Class="ExpenseIt.ExpenseReportPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="350" d:DesignWidth="500" Title="ExpenseIt - View Expense"> <Grid> </Grid> </Page>
Open ExpenseItHome.xaml.vb dan ExpenseReportPage.xaml.vb, atau ExpenseItHome.xaml.cs dan ExpenseReportPage.xaml.cs.
Saat Anda membuat file Halaman baru, Visual Studio secara otomatis membuat file code-behind-nya . File code-behind ini menangani logika untuk merespons input pengguna.
Kode Anda akan terlihat seperti berikut untuk
ExpenseItHome
:using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace ExpenseIt { /// <summary> /// Interaction logic for ExpenseItHome.xaml /// </summary> public partial class ExpenseItHome : Page { public ExpenseItHome() { InitializeComponent(); } } }
Class ExpenseItHome End Class
Dan seperti berikut ini untuk ExpenseReportPage:
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace ExpenseIt { /// <summary> /// Interaction logic for ExpenseReportPage.xaml /// </summary> public partial class ExpenseReportPage : Page { public ExpenseReportPage() { InitializeComponent(); } } }
Class ExpenseReportPage End Class
Tambahkan gambar bernama watermark.png ke proyek. Anda dapat membuat gambar Anda sendiri, menyalin file dari kode sampel, atau mendapatkannya dari repositori GitHub microsoft/WPF-Samples .
Klik kanan pada simpul proyek dan pilih Tambahkan>Item yang Ada, atau tekan Shift+Alt+A.
Dalam dialog Tambahkan Item yang Ada, atur filter file ke Semua File atau File Gambar, telusuri ke file gambar yang ingin Anda gunakan, lalu pilih Tambahkan.
Pilih file gambar di Penjelajah Solusi, lalu di jendela Properti, atur Tindakan Build ke Sumber Daya.
Membangun dan menjalankan aplikasi
Untuk membuat dan menjalankan aplikasi, tekan F5 atau pilih Mulai Debugging dari menu Debug .
Ilustrasi berikut menunjukkan aplikasi dengan tombol NavigationWindow :
Tutup aplikasi untuk kembali ke Visual Studio.
Membuat tata letak
Tata letak menyediakan cara yang diurutkan untuk menempatkan elemen UI, dan juga mengelola ukuran dan posisi elemen tersebut saat UI diubah ukurannya. Anda biasanya membuat tata letak dengan salah satu kontrol tata letak berikut:
- Canvas - Mendefinisikan area di mana Anda dapat secara eksplisit memposisikan elemen anak dengan menggunakan koordinat yang relatif terhadap area Kanvas.
- DockPanel - Mendefinisikan area tempat Anda dapat mengatur elemen anak baik secara horizontal atau vertikal, relatif satu sama lain.
- Grid - Menentukan area kisi fleksibel yang terdiri dari kolom dan baris.
- StackPanel - Mengatur elemen anak ke dalam satu baris yang dapat berorientasi secara horizontal atau vertikal.
- VirtualizingStackPanel - Mengatur dan memvirtualisasi konten pada satu baris yang berorientasi secara horizontal atau vertikal.
- WrapPanel - Memposisikan elemen turunan dalam posisi berurutan dari kiri ke kanan, memecah konten ke baris berikutnya di tepi kotak yang berisi. Pengurutan berikutnya terjadi secara berurutan dari atas ke bawah atau dari kanan ke kiri, tergantung pada nilai properti Orientasi.
Masing-masing kontrol tata letak ini mendukung jenis tata letak tertentu untuk elemen anaknya. ExpenseIt
halaman dapat diubah ukurannya, dan setiap halaman memiliki elemen yang disusun secara horizontal dan vertikal bersama elemen lainnya. Dalam contoh ini, Grid digunakan sebagai elemen tata letak untuk aplikasi.
Tip
Untuk informasi selengkapnya tentang Panel elemen, lihat Gambaran umum panel. Untuk informasi selengkapnya tentang tata letak, lihat Tata Letak.
Di bagian ini, Anda membuat tabel kolom tunggal dengan tiga baris dan margin 10 piksel dengan menambahkan definisi kolom dan baris ke Grid dalam ExpenseItHome.xaml
.
Dalam
ExpenseItHome.xaml
, atur Margin properti pada Grid elemen ke "10,0,10,10", yang sesuai dengan margin kiri, atas, kanan, dan bawah:<Grid Margin="10,0,10,10">
Tip
Anda juga bisa mengatur nilai Margin di jendela Properti , di bawah kategori Tata Letak :
Tambahkan XAML berikut di antara Grid tag untuk membuat definisi baris dan kolom:
<Grid.ColumnDefinitions> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>
Height Dari dua baris diatur ke Auto, yang berarti bahwa baris berukuran berdasarkan konten dalam baris. Defaultnya Height adalah Star ukuran, yang berarti bahwa tinggi baris adalah proporsi tertimbang dari ruang yang tersedia. Misalnya jika dua baris masing-masing memiliki Height "*", masing-masing memiliki tinggi yang setengah dari ruang yang tersedia.
Anda Grid sekarang harus berisi XAML berikut:
<Grid Margin="10,0,10,10"> <Grid.ColumnDefinitions> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> </Grid>
Menambahkan kontrol
Di bagian ini, Anda akan memperbarui UI halaman beranda untuk menampilkan daftar orang, tempat Anda memilih satu orang untuk menampilkan laporan pengeluaran mereka. Kontrol adalah objek UI yang memungkinkan pengguna berinteraksi dengan aplikasi Anda. Untuk informasi lebih lanjut, lihat Kontrol.
Untuk membuat UI ini, Anda akan menambahkan elemen berikut ke ExpenseItHome.xaml
:
- A ListBox (untuk daftar orang).
- A Label (untuk header daftar).
- A Button (untuk mengklik untuk melihat laporan pengeluaran untuk orang yang dipilih dalam daftar).
Setiap kontrol ditempatkan dalam baris Grid dengan mengatur Grid.Row properti terlampir. Untuk informasi selengkapnya tentang properti terlampir, lihat Gambaran Umum Properti Terlampir.
Di
ExpenseItHome.xaml
, tambahkan XAML berikut di suatu tempat di Grid antara tag:<!-- People list --> <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4"> <Label VerticalAlignment="Center" Foreground="White">Names</Label> </Border> <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1"> <ListBoxItem>Mike</ListBoxItem> <ListBoxItem>Lisa</ListBoxItem> <ListBoxItem>John</ListBoxItem> <ListBoxItem>Mary</ListBoxItem> </ListBox> <!-- View report button --> <Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,10" Width="125" Height="25" HorizontalAlignment="Right">View</Button>
Tip
Anda juga dapat membuat kontrol dengan menyeretnya dari jendela Kotak Alat ke jendela desain, lalu mengatur propertinya di jendela Properti .
Membuat dan menjalankan aplikasi.
Ilustrasi berikut ini memperlihatkan kontrol yang Anda buat:
Menambahkan gambar dan judul
Di bagian ini, Anda akan memperbarui UI halaman beranda dengan gambar dan judul halaman.
Di
ExpenseItHome.xaml
, tambahkan kolom lain ke ColumnDefinitions dengan tetap Width 230 piksel:<Grid.ColumnDefinitions> <ColumnDefinition Width="230" /> <ColumnDefinition /> </Grid.ColumnDefinitions>
Tambahkan baris lain ke RowDefinitions, untuk total empat baris:
<Grid.RowDefinitions> <RowDefinition/> <RowDefinition Height="Auto"/> <RowDefinition /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>
Pindahkan kontrol ke kolom kedua dengan mengatur Grid.Column properti ke 1 di masing-masing dari tiga kontrol (Batas, Kotak Daftar, dan Tombol).
Pindahkan setiap kontrol ke bawah baris dengan menambahkan nilainya Grid.Row sebesar 1 untuk masing-masing dari tiga kontrol (Batas, Kotak Daftar, dan Tombol) dan untuk elemen Batas.
XAML untuk tiga kontrol sekarang terlihat seperti berikut ini:
<Border Grid.Column="1" Grid.Row="1" Height="35" Padding="5" Background="#4E87D4"> <Label VerticalAlignment="Center" Foreground="White">Names</Label> </Border> <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2"> <ListBoxItem>Mike</ListBoxItem> <ListBoxItem>Lisa</ListBoxItem> <ListBoxItem>John</ListBoxItem> <ListBoxItem>Mary</ListBoxItem> </ListBox> <!-- View report button --> <Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125" Height="25" HorizontalAlignment="Right">View</Button>
Atur properti Latar Belakang ke file gambar watermark.png, dengan menambahkan XAML berikut di mana saja antara
<Grid>
tag dan</Grid>
:<Grid.Background> <ImageBrush ImageSource="watermark.png"/> </Grid.Background>
Border Sebelum elemen, tambahkan Label dengan konten "Lihat Laporan Pengeluaran". Label ini adalah judul halaman.
<Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" FontWeight="Bold" FontSize="18" Foreground="#0066cc"> View Expense Report </Label>
Membuat dan menjalankan aplikasi.
Ilustrasi berikut menunjukkan hasil apa yang baru saja Anda tambahkan:
Menambahkan kode untuk menangani peristiwa
Di
ExpenseItHome.xaml
, tambahkan Click penanganan aktivitas ke Button elemen . Untuk informasi selengkapnya, lihat Cara: Membuat penanganan aktivitas sederhana.<!-- View report button --> <Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125" Height="25" HorizontalAlignment="Right" Click="Button_Click">View</Button>
Buka
ExpenseItHome.xaml.vb
atauExpenseItHome.xaml.cs
.Tambahkan kode berikut ke
ExpenseItHome
kelas untuk menambahkan tombol klik penanganan aktivitas. Penanganan aktivitas membuka halaman ExpenseReportPage .private void Button_Click(object sender, RoutedEventArgs e) { // View Expense Report ExpenseReportPage expenseReportPage = new ExpenseReportPage(); this.NavigationService.Navigate(expenseReportPage); }
Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) ' View Expense Report Dim expenseReportPage As New ExpenseReportPage() Me.NavigationService.Navigate(expenseReportPage) End Sub
Membuat UI untuk ExpenseReportPage
ExpenseReportPage.xaml menampilkan laporan pengeluaran untuk orang yang dipilih di ExpenseItHome
halaman. Di bagian ini, Anda akan membuat UI untuk ExpenseReportPage. Anda juga akan menambahkan warna latar belakang dan isi ke berbagai elemen UI.
Buka ExpenseReportPage.xaml.
Tambahkan XAML berikut di Grid antara tag:
<Grid.Background> <ImageBrush ImageSource="watermark.png" /> </Grid.Background> <Grid.ColumnDefinitions> <ColumnDefinition Width="230" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions> <Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" FontWeight="Bold" FontSize="18" Foreground="#0066cc"> Expense Report For: </Label> <Grid Margin="10" Grid.Column="1" Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions> <!-- Name --> <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal"> <Label Margin="0,0,0,5" FontWeight="Bold">Name:</Label> <Label Margin="0,0,0,5" FontWeight="Bold"></Label> </StackPanel> <!-- Department --> <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal"> <Label Margin="0,0,0,5" FontWeight="Bold">Department:</Label> <Label Margin="0,0,0,5" FontWeight="Bold"></Label> </StackPanel> <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Left"> <!-- Expense type and Amount table --> <DataGrid AutoGenerateColumns="False" RowHeaderWidth="0" > <DataGrid.ColumnHeaderStyle> <Style TargetType="{x:Type DataGridColumnHeader}"> <Setter Property="Height" Value="35" /> <Setter Property="Padding" Value="5" /> <Setter Property="Background" Value="#4E87D4" /> <Setter Property="Foreground" Value="White" /> </Style> </DataGrid.ColumnHeaderStyle> <DataGrid.Columns> <DataGridTextColumn Header="ExpenseType" /> <DataGridTextColumn Header="Amount" /> </DataGrid.Columns> </DataGrid> </Grid> </Grid>
UI ini mirip
ExpenseItHome.xaml
dengan , kecuali data laporan ditampilkan dalam DataGrid.Membuat dan menjalankan aplikasi.
Pilih tombol Tampilkan .
Halaman laporan pengeluaran muncul. Perhatikan juga bahwa tombol navigasi belakang diaktifkan.
Ilustrasi berikut menunjukkan elemen UI yang ditambahkan ke ExpenseReportPage.xaml.
Kontrol gaya
Penampilan berbagai elemen sering sama untuk semua elemen dengan jenis yang sama dalam UI. UI menggunakan gaya untuk membuat tampilan dapat digunakan kembali di beberapa elemen. Penggunaan kembali gaya membantu menyederhanakan pembuatan dan manajemen XAML. Bagian ini menggantikan atribut per elemen yang ditentukan dalam langkah sebelumnya dengan gaya.
Buka Application.xaml atau App.xaml.
Tambahkan XAML berikut di Application.Resources antara tag:
<!-- Header text style --> <Style x:Key="headerTextStyle"> <Setter Property="Label.VerticalAlignment" Value="Center"></Setter> <Setter Property="Label.FontFamily" Value="Trebuchet MS"></Setter> <Setter Property="Label.FontWeight" Value="Bold"></Setter> <Setter Property="Label.FontSize" Value="18"></Setter> <Setter Property="Label.Foreground" Value="#0066cc"></Setter> </Style> <!-- Label style --> <Style x:Key="labelStyle" TargetType="{x:Type Label}"> <Setter Property="VerticalAlignment" Value="Top" /> <Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="FontWeight" Value="Bold" /> <Setter Property="Margin" Value="0,0,0,5" /> </Style> <!-- DataGrid header style --> <Style x:Key="columnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}"> <Setter Property="Height" Value="35" /> <Setter Property="Padding" Value="5" /> <Setter Property="Background" Value="#4E87D4" /> <Setter Property="Foreground" Value="White" /> </Style> <!-- List header style --> <Style x:Key="listHeaderStyle" TargetType="{x:Type Border}"> <Setter Property="Height" Value="35" /> <Setter Property="Padding" Value="5" /> <Setter Property="Background" Value="#4E87D4" /> </Style> <!-- List header text style --> <Style x:Key="listHeaderTextStyle" TargetType="{x:Type Label}"> <Setter Property="Foreground" Value="White" /> <Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="HorizontalAlignment" Value="Left" /> </Style> <!-- Button style --> <Style x:Key="buttonStyle" TargetType="{x:Type Button}"> <Setter Property="Width" Value="125" /> <Setter Property="Height" Value="25" /> <Setter Property="Margin" Value="0,10,0,0" /> <Setter Property="HorizontalAlignment" Value="Right" /> </Style>
XAML ini menambahkan gaya berikut:
headerTextStyle
: Untuk memformat judul Labelhalaman .labelStyle
: Untuk memformat Label kontrol.columnHeaderStyle
: Untuk memformat DataGridColumnHeader.listHeaderStyle
: Untuk memformat kontrol header Border daftar.listHeaderTextStyle
: Untuk memformat header Labeldaftar .buttonStyle
: Untuk memformat pada ButtonExpenseItHome.xaml
.
Perhatikan bahwa gaya adalah sumber daya dan turunan Application.Resources dari elemen properti. Di lokasi ini, gaya diterapkan ke semua elemen dalam aplikasi. Untuk contoh penggunaan sumber daya di aplikasi .NET, lihat Menggunakan Sumber Daya Aplikasi.
Dalam
ExpenseItHome.xaml
, ganti semuanya di antara Grid elemen dengan XAML berikut:<Grid.Background> <ImageBrush ImageSource="watermark.png" /> </Grid.Background> <Grid.ColumnDefinitions> <ColumnDefinition Width="230" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition Height="Auto"/> <RowDefinition /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <!-- People list --> <Label Grid.Column="1" Style="{StaticResource headerTextStyle}" > View Expense Report </Label> <Border Grid.Column="1" Grid.Row="1" Style="{StaticResource listHeaderStyle}"> <Label Style="{StaticResource listHeaderTextStyle}">Names</Label> </Border> <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2"> <ListBoxItem>Mike</ListBoxItem> <ListBoxItem>Lisa</ListBoxItem> <ListBoxItem>John</ListBoxItem> <ListBoxItem>Mary</ListBoxItem> </ListBox> <!-- View report button --> <Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>
Properti seperti VerticalAlignment dan FontFamily yang menentukan tampilan setiap kontrol dihapus dan diganti dengan menerapkan gaya. Misalnya,
headerTextStyle
diterapkan ke "Lihat Laporan Pengeluaran" Label.Buka ExpenseReportPage.xaml.
Ganti semuanya di Grid antara elemen dengan XAML berikut:
<Grid.Background> <ImageBrush ImageSource="watermark.png" /> </Grid.Background> <Grid.ColumnDefinitions> <ColumnDefinition Width="230" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions> <Label Grid.Column="1" Style="{StaticResource headerTextStyle}"> Expense Report For: </Label> <Grid Margin="10" Grid.Column="1" Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions> <!-- Name --> <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal"> <Label Style="{StaticResource labelStyle}">Name:</Label> <Label Style="{StaticResource labelStyle}"></Label> </StackPanel> <!-- Department --> <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal"> <Label Style="{StaticResource labelStyle}">Department:</Label> <Label Style="{StaticResource labelStyle}"></Label> </StackPanel> <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Left"> <!-- Expense type and Amount table --> <DataGrid ColumnHeaderStyle="{StaticResource columnHeaderStyle}" AutoGenerateColumns="False" RowHeaderWidth="0" > <DataGrid.Columns> <DataGridTextColumn Header="ExpenseType" /> <DataGridTextColumn Header="Amount" /> </DataGrid.Columns> </DataGrid> </Grid> </Grid>
Membuat dan menjalankan aplikasi. Tampilan jendela sama seperti sebelumnya.
Tutup aplikasi untuk kembali ke Visual Studio.
Mengikat data ke kontrol
Di bagian ini, Anda akan membuat data XML yang terikat ke berbagai kontrol.
Di
ExpenseItHome.xaml
, setelah elemen pembuka Grid , tambahkan XAML berikut untuk membuat yang XmlDataProvider berisi data untuk setiap orang:<Grid.Resources> <!-- Expense Report Data --> <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses"> <x:XData> <Expenses xmlns=""> <Person Name="Mike" Department="Legal"> <Expense ExpenseType="Lunch" ExpenseAmount="50" /> <Expense ExpenseType="Transportation" ExpenseAmount="50" /> </Person> <Person Name="Lisa" Department="Marketing"> <Expense ExpenseType="Document printing" ExpenseAmount="50"/> <Expense ExpenseType="Gift" ExpenseAmount="125" /> </Person> <Person Name="John" Department="Engineering"> <Expense ExpenseType="Magazine subscription" ExpenseAmount="50"/> <Expense ExpenseType="New machine" ExpenseAmount="600" /> <Expense ExpenseType="Software" ExpenseAmount="500" /> </Person> <Person Name="Mary" Department="Finance"> <Expense ExpenseType="Dinner" ExpenseAmount="100" /> </Person> </Expenses> </x:XData> </XmlDataProvider> </Grid.Resources>
Data dibuat sebagai Grid sumber daya. Biasanya data ini akan dimuat sebagai file, tetapi untuk kesederhanaan, data ditambahkan sebaris.
<Grid.Resources>
Dalam elemen , tambahkan elemen berikut<xref:System.Windows.DataTemplate>
, yang menentukan cara menampilkan data di ListBox, setelah<XmlDataProvider>
elemen:<Grid.Resources> <!-- Name item template --> <DataTemplate x:Key="nameItemTemplate"> <Label Content="{Binding XPath=@Name}"/> </DataTemplate> </Grid.Resources>
Untuk informasi selengkapnya tentang templat data, lihat Gambaran umum templat data.
Ganti yang ada ListBox dengan XAML berikut:
<ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2" ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}" ItemTemplate="{StaticResource nameItemTemplate}"> </ListBox>
XAML ini mengikat ItemsSource properti ke ListBox sumber data dan menerapkan templat data sebagai ItemTemplate.
Koneksi data ke kontrol
Selanjutnya, Anda akan menambahkan kode untuk mengambil nama yang dipilih di ExpenseItHome
halaman dan meneruskannya ke konstruktor ExpenseReportPage. ExpenseReportPage mengatur konteks datanya dengan item yang diteruskan, yang merupakan apa yang didefinisikan oleh kontrol dalam ExpenseReportPage.xaml yang diikat.
Buka ExpenseReportPage.xaml.vb atau ExpenseReportPage.xaml.cs.
Tambahkan konstruktor yang mengambil objek sehingga Anda dapat meneruskan data laporan pengeluaran orang yang dipilih.
public partial class ExpenseReportPage : Page { public ExpenseReportPage() { InitializeComponent(); } // Custom constructor to pass expense report data public ExpenseReportPage(object data):this() { // Bind to expense report data. this.DataContext = data; } }
Partial Public Class ExpenseReportPage Inherits Page Public Sub New() InitializeComponent() End Sub ' Custom constructor to pass expense report data Public Sub New(ByVal data As Object) Me.New() ' Bind to expense report data. Me.DataContext = data End Sub End Class
Buka
ExpenseItHome.xaml.vb
atauExpenseItHome.xaml.cs
.Ubah penanganan Click aktivitas untuk memanggil konstruktor baru yang meneruskan data laporan pengeluaran orang yang dipilih.
private void Button_Click(object sender, RoutedEventArgs e) { // View Expense Report ExpenseReportPage expenseReportPage = new ExpenseReportPage(this.peopleListBox.SelectedItem); this.NavigationService.Navigate(expenseReportPage); }
Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) ' View Expense Report Dim expenseReportPage As New ExpenseReportPage(Me.peopleListBox.SelectedItem) Me.NavigationService.Navigate(expenseReportPage) End Sub
Data gaya dengan templat data
Di bagian ini, Anda akan memperbarui UI untuk setiap item dalam daftar terikat data dengan menggunakan templat data.
Buka ExpenseReportPage.xaml.
Ikat konten elemen "Nama" dan "Departemen" Label ke properti sumber data yang sesuai. Untuk informasi selengkapnya tentang pengikatan data, lihat Gambaran umum pengikatan data.
<!-- Name --> <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal"> <Label Style="{StaticResource labelStyle}">Name:</Label> <Label Style="{StaticResource labelStyle}" Content="{Binding XPath=@Name}"></Label> </StackPanel> <!-- Department --> <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal"> <Label Style="{StaticResource labelStyle}">Department:</Label> <Label Style="{StaticResource labelStyle}" Content="{Binding XPath=@Department}"></Label> </StackPanel>
Setelah elemen pembuka Grid , tambahkan templat data berikut, yang menentukan cara menampilkan data laporan pengeluaran:
<!--Templates to display expense report data--> <Grid.Resources> <!-- Reason item template --> <DataTemplate x:Key="typeItemTemplate"> <Label Content="{Binding XPath=@ExpenseType}"/> </DataTemplate> <!-- Amount item template --> <DataTemplate x:Key="amountItemTemplate"> <Label Content="{Binding XPath=@ExpenseAmount}"/> </DataTemplate> </Grid.Resources>
DataGridTextColumn Ganti elemen dengan DataGridTemplateColumn di DataGrid bawah elemen dan terapkan templat ke elemen tersebut. Selain itu, tentukan
ItemsSource
atribut dengan nilainya diDataGrid
Element.<!-- Expense type and Amount table --> <DataGrid ItemsSource="{Binding XPath=Expense}" ColumnHeaderStyle="{StaticResource columnHeaderStyle}" AutoGenerateColumns="False" RowHeaderWidth="0" > <DataGrid.Columns> <DataGridTemplateColumn Header="ExpenseType" CellTemplate="{StaticResource typeItemTemplate}" /> <DataGridTemplateColumn Header="Amount" CellTemplate="{StaticResource amountItemTemplate}" /> </DataGrid.Columns> </DataGrid>
Membuat dan menjalankan aplikasi.
Pilih seseorang lalu pilih tombol Tampilkan .
Ilustrasi berikut menunjukkan kedua halaman ExpenseIt
aplikasi dengan kontrol, tata letak, gaya, pengikatan data, dan templat data yang diterapkan:
Catatan
Sampel ini menunjukkan fitur tertentu dari WPF dan tidak mengikuti semua praktik terbaik untuk hal-hal seperti keamanan, pelokalan, dan aksesibilitas. Untuk cakupan komprehensif WPF dan praktik terbaik pengembangan aplikasi .NET, lihat topik berikut:
Langkah berikutnya
Dalam panduan ini Anda mempelajari sejumlah teknik untuk membuat UI menggunakan Windows Presentation Foundation (WPF). Anda sekarang harus memiliki pemahaman dasar tentang blok penyusun aplikasi .NET yang terikat data. Untuk informasi selengkapnya tentang arsitektur WPF dan model pemrograman, lihat topik berikut:
Untuk informasi selengkapnya tentang membuat aplikasi, lihat topik berikut:
Baca juga
.NET Desktop feedback
Saran dan Komentar
https://aka.ms/ContentUserFeedback.
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat:Kirim dan lihat umpan balik untuk