Bagikan melalui

Tutorial: Membuat aplikasi WPF pertama Anda di Visual Studio 2019

  • Artikel

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

Membuat proyek aplikasi

Langkah pertama adalah membuat infrastruktur aplikasi, yang mencakup definisi aplikasi, dua halaman, dan gambar.

  1. Buat proyek Aplikasi WPF baru di Visual Basic atau Visual C# bernama ExpenseIt:

    1. Buka Visual Studio dan pilih Buat proyek baru di bawah menu Mulai .

      Dialog Buat proyek baru terbuka.

    2. Di menu dropdown Bahasa, pilih C# atau Visual Basic.

    3. Pilih templat WPF App (.NET Framework) lalu pilih Berikutnya.

      Create a new project dialog

      Dialog Konfigurasikan proyek baru Anda terbuka.

    4. Masukkan nama ExpenseIt proyek lalu pilih Buat.

      Configure a new project dialog

      Visual Studio membuat proyek dan membuka perancang untuk jendela aplikasi default bernama MainWindow.xaml.

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

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

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

  5. Grid Hapus elemen dari antara NavigationWindow tag.

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

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

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

  1. Tambahkan halaman baru ke proyek, dan beri nama ExpenseItHome.xaml:

    1. Di Penjelajah Solusi, klik kanan pada simpul ExpenseIt proyek dan pilih Tambahkan>Halaman.

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

  2. Buka ExpenseItHome.xaml.

  3. Atur ke Title "ExpenseIt - Home".

  4. Atur DesignHeight ke 350 piksel dan DesignWidth 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>

  5. Buka MainWindow.xaml.

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

    Source property in Properties window

  7. Tambahkan halaman WPF baru lainnya ke proyek, dan beri nama ExpenseReportPage.xaml::

    1. Di Penjelajah Solusi, klik kanan pada simpul ExpenseIt proyek dan pilih Tambahkan>Halaman.

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

  8. Buka ExpenseReportPage.xaml.

  9. Atur ke Title "ExpenseIt - View Expense".

  10. Atur DesignHeight ke 350 piksel dan DesignWidth 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>

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

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

    1. Klik kanan pada simpul proyek dan pilih Tambahkan>Item yang Ada, atau tekan Shift+Alt+A.

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

    3. Pilih file gambar di Penjelajah Solusi, lalu di jendela Properti, atur Tindakan Build ke Sumber Daya.

Membangun dan menjalankan aplikasi

  1. Untuk membuat dan menjalankan aplikasi, tekan F5 atau pilih Mulai Debugging dari menu Debug .

    Ilustrasi berikut menunjukkan aplikasi dengan tombol NavigationWindow :

    Application after you build and run it.

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

  1. 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 :

    Margin values in Properties window

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

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

  2. Membuat dan menjalankan aplikasi.

    Ilustrasi berikut ini memperlihatkan kontrol yang Anda buat:

ExpenseIt sample screenshot displaying a list of names

Menambahkan gambar dan judul

Di bagian ini, Anda akan memperbarui UI halaman beranda dengan gambar dan judul halaman.

  1. Di ExpenseItHome.xaml, tambahkan kolom lain ke ColumnDefinitions dengan tetap Width 230 piksel:

    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="230" />
    <ColumnDefinition />
</Grid.ColumnDefinitions>

  2. Tambahkan baris lain ke RowDefinitions, untuk total empat baris:

    <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition Height="Auto"/>
    <RowDefinition />
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

  3. Pindahkan kontrol ke kolom kedua dengan mengatur Grid.Column properti ke 1 di masing-masing dari tiga kontrol (Batas, Kotak Daftar, dan Tombol).

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

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

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

  7. Membuat dan menjalankan aplikasi.

Ilustrasi berikut menunjukkan hasil apa yang baru saja Anda tambahkan:

ExpenseIt sample screenshot showing the new image background and page title

Menambahkan kode untuk menangani peristiwa

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

  2. Buka ExpenseItHome.xaml.vb atau ExpenseItHome.xaml.cs.

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

  1. Buka ExpenseReportPage.xaml.

  2. 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.xamldengan , kecuali data laporan ditampilkan dalam DataGrid.

  3. Membuat dan menjalankan aplikasi.

  4. Pilih tombol Tampilkan .

    Halaman laporan pengeluaran muncul. Perhatikan juga bahwa tombol navigasi belakang diaktifkan.

Ilustrasi berikut menunjukkan elemen UI yang ditambahkan ke ExpenseReportPage.xaml.

ExpenseIt sample screenshot showing the UI just created for the ExpenseReportPage.

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.

  1. Buka Application.xaml atau App.xaml.

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

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

  4. Buka ExpenseReportPage.xaml.

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

    XAML ini menambahkan gaya ke Label elemen dan Border .

  6. Membuat dan menjalankan aplikasi. Tampilan jendela sama seperti sebelumnya.

    ExpenseIt sample screenshot with the same appearance as in the last section.

  7. Tutup aplikasi untuk kembali ke Visual Studio.

Mengikat data ke kontrol

Di bagian ini, Anda akan membuat data XML yang terikat ke berbagai kontrol.

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

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

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

  1. Buka ExpenseReportPage.xaml.vb atau ExpenseReportPage.xaml.cs.

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

  3. Buka ExpenseItHome.xaml.vb atau ExpenseItHome.xaml.cs.

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

  1. Buka ExpenseReportPage.xaml.

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

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

  4. DataGridTextColumn Ganti elemen dengan DataGridTemplateColumn di DataGrid bawah elemen dan terapkan templat ke elemen tersebut. Selain itu, tentukan ItemsSource atribut dengan nilainya di DataGrid 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>

  5. Membuat dan menjalankan aplikasi.

  6. 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:

Both pages of the app showing the names list and an expense report.

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