Bagikan melalui

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: Extensible Application Markup Language (XAML), kode-belakang, 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, lihat Tutorial: Membuat aplikasi WPF baru (WPF .NET).

Dalam tutorial ini, Anda akan belajar 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.

Petunjuk / Saran

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

      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.

      Membuat dialog proyek baru

      Dialog Konfigurasi proyek baru Anda terbuka.

    4. Masukkan nama proyek ExpenseIt lalu pilih Buat.

      Konfigurasi dialog proyek baru

      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. Ubah elemen Window menjadi NavigationWindow, seperti yang ditunjukkan pada 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 Window utama perlu diubah menjadi NavigationWindow. NavigationWindow mewarisi semua properti Window. Elemen NavigationWindow dalam file XAML membuat instans kelas NavigationWindow. Untuk informasi selengkapnya, lihat gambaran umum Navigasi .

  5. Hapus elemen Grid dari antara tag NavigationWindow.

  6. Ubah properti berikut dalam kode XAML untuk elemen NavigationWindow:

    • Atur properti Title ke "ExpenseIt".

    • Atur properti Height menjadi 350 piksel.

    • Atur properti Width 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 event yang dideklarasikan dalam MainWindow.xaml. File ini berisi kelas parsial untuk jendela yang ditentukan dalam XAML.

  8. Jika Anda menggunakan C#, ubah kelas MainWindow 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 node proyek ExpenseIt 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 Title ke "ExpenseIt - Home".

  4. Atur DesignHeight menjadi 350 piksel dan DesignWidth menjadi 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. Tambahkan properti Source ke elemen NavigationWindow dan atur ke "ExpenseItHome.xaml".

    Ini mengatur ExpenseItHome.xaml menjadi halaman pertama yang dibuka saat 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>

    Petunjuk / Saran

    Anda juga dapat mengatur properti Sumber di kategori Lain-lain dari jendela Properti.

    properti Sumber di jendela Properti

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

    1. Di Penjelajah Solusi, klik kanan pada node proyek ExpenseIt 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 Title ke "ExpenseIt - View Expense".

  10. Atur DesignHeight menjadi 350 piksel dan DesignWidth menjadi 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. Buka 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 di belakang kode. File code-behind ini mengelola logika dalam 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 microsoft/WPF-Samples repositori GitHub.

    1. Klik kanan pada simpul proyek dan pilih Tambahkan Item yang Ada, atau tekan ShiftAltA.

    2. Dalam dialog Tambahkan Item yang Ada, atur filter file ke Semua File atau File Gambar, cari file gambar yang ingin digunakan, lalu pilih Tambahkan.

    3. Pilih file gambar di Solution Explorer, lalu di jendela Properti, atur Aksi Build ke Resource.

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:

    Aplikasi setelah Anda membuat dan menjalankannya.

  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 - Menentukan area di mana Anda dapat secara eksplisit memosisikan elemen turunan dengan menggunakan koordinat yang relatif terhadap area Kanvas.
  • DockPanel - Menentukan area tempat Anda dapat mengatur elemen-elemen anak secara horizontal atau vertikal, dalam kaitannya satu sama lain.
  • Grid - Menentukan area kisi fleksibel yang terdiri dari kolom dan baris.
  • StackPanel - Mengatur elemen anak ke dalam satu baris yang dapat diorientasikan secara horizontal atau vertikal.
  • VirtualizingStackPanel - Mengatur dan memvirtualisasi konten pada satu baris yang berorientasi horizontal atau vertikal.
  • WrapPanel - Memposisikan elemen anak dalam posisi berurutan dari kiri ke kanan, memindahkan konten ke baris berikutnya saat mencapai tepi kotak yang memuatnya. 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 turunannya. 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.

Petunjuk / Saran

Untuk informasi selengkapnya tentang elemen Panel, 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 di ExpenseItHome.xaml.

  1. Dalam ExpenseItHome.xaml, atur properti Margin pada elemen Grid ke "10,0,10,10", yang sesuai dengan margin kiri, atas, kanan, dan bawah:

    <Grid Margin="10,0,10,10">

    Petunjuk / Saran

    Anda juga bisa mengatur nilai Margin di jendela Properti , di bawah kategori Tata Letak .

    Nilai margin di jendela Properti

  2. Tambahkan XAML berikut di antara tag Grid untuk membuat definisi baris dan kolom:

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

    "Dua baris dalam Height diatur ke Auto, yang berarti ukuran baris ditentukan berdasarkan konten di dalamnya." Ukuran Height standar adalah Star, yang berarti tinggi baris adalah proporsi tertimbang dari ruang yang tersedia. Misalnya jika masing-masing dua baris memiliki Height "*", masing-masing memiliki tinggi yang setengah dari ruang yang tersedia.

    Grid sekarang seharusnya 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>

Tambahkan 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 selengkapnya, lihat Kontrol.

Untuk membuat UI ini, Anda akan menambahkan elemen berikut ke ExpenseItHome.xaml:

  • ListBox (untuk daftar nama orang).
  • Sebuah Label sebagai header daftar.
  • Button (untuk mengklik untuk melihat laporan pengeluaran untuk orang yang dipilih dalam daftar).

Setiap kontrol ditempatkan dalam baris Grid dengan mengatur properti terlampir Grid.Row. Untuk informasi selengkapnya tentang properti terlampir, lihat Gambaran Umum Properti Terlampir .

  1. Di ExpenseItHome.xaml, tambahkan XAML berikut di suatu tempat antara tag Grid:

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

    Petunjuk / Saran

    Anda juga dapat membuat kontrol dengan menyeretnya dari jendela Kotak Alat ke jendela desain, lalu mengatur propertinya di jendela Properti .

  2. Bangun dan jalankan aplikasi.

    Ilustrasi berikut ini memperlihatkan kontrol yang Anda buat:

cuplikan layar sampel ExpenseIt yang menampilkan daftar nama

Menambahkan gambar dan judul

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

  1. Di ExpenseItHome.xaml, tambahkan kolom baru ke ColumnDefinitions dengan Width berukuran tetap 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 properti Grid.Column ke 1 di masing-masing dari tiga kontrol (Batas, Kotak Daftar, dan Tombol).

  4. Pindahkan setiap kontrol ke bawah baris dengan menambahkan nilai 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 tag dan :

    <Grid.Background>
    <ImageBrush ImageSource="watermark.png"/>
</Grid.Background>

  6. Sebelum elemen Border, 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. Bangun dan jalankan aplikasi.

Ilustrasi berikut menunjukkan hasil apa yang baru saja Anda tambahkan:

cuplikan layar sampel ExpenseIt memperlihatkan latar belakang gambar baru dan judul halaman

Menambahkan kode untuk menangani peristiwa

  1. Di ExpenseItHome.xaml, tambahkan penanganan aktivitas Click ke elemen Button. 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 kelas ExpenseItHome untuk menambahkan pengendali acara klik tombol. Penanganan kejadian 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 halaman ExpenseItHome. 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 antara tag Grid:

     <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 dengan ExpenseItHome.xaml, kecuali data laporan ditampilkan dalam DataGrid.

  3. Bangun dan jalankan aplikasi.

  4. Pilih tombol Tampilan.

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

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

cuplikan layar sampel ExpenseIt yang menunjukkan UI yang baru saja dibuat untuk 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 ulang gaya membantu menyederhanakan proses 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 antara tag Application.Resources:

    
<!-- 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 halaman Label.

    • labelStyle: Untuk memformat kontrol Label.

    • columnHeaderStyle: Untuk memformat DataGridColumnHeader.

    • listHeaderStyle: Untuk memformat tajuk daftar kontrol Border.

    • listHeaderTextStyle: Untuk memformat header daftar Label.

    • buttonStyle: Untuk memformat Button di ExpenseItHome.xaml.

    Perhatikan bahwa gaya adalah sumber daya dan turunan dari elemen properti Application.Resources. 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 semua yang ada di antara elemen-elemen Grid 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 digunakan untuk "Lihat Laporan Pengeluaran" Label.

  4. Buka ExpenseReportPage.xaml.

  5. Ganti semuanya antara elemen Grid 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 elemen Label dan Border.

  6. Bangun dan jalankan aplikasi. Tampilan jendela sama seperti sebelumnya.

    cuplikan layar sampel ExpenseIt dengan tampilan yang sama seperti di bagian terakhir.

  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 XmlDataProvider yang 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 tersebut dibuat sebagai sumber daya Grid. Biasanya data ini akan dimuat sebagai file, tetapi untuk kesederhanaan, data ditambahkan sebaris.

  2. Dalam elemen <Grid.Resources>, tambahkan elemen <xref:System.Windows.DataTemplate> berikut, yang menentukan cara menampilkan data di ListBox, setelah elemen <XmlDataProvider>:

    <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 ListBox yang ada 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 properti ItemsSource dari ListBox ke sumber data dan menerapkan templat data sebagai ItemTemplate.

Menyambungkan data ke kontrol

Selanjutnya, Anda akan menambahkan kode untuk mengambil nama yang dipilih di halaman ExpenseItHome dan meneruskannya ke konstruktor ExpenseReportPage. ExpenseReportPage mengatur konteks datanya dengan item yang diteruskan, yang merupakan kontrol yang ada di ExpenseReportPage.xaml dan terikat dengan item tersebut.

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

  2. Tambahkan konstruktor yang menerima objek sehingga Anda dapat meneruskan data laporan biaya 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 event Click untuk memanggil konstruktor baru yang meneruskan data laporan pengeluaran dari 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

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

    <!-- 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. Bangun dan jalankan aplikasi.

  6. Pilih seseorang lalu pilih tombol Tampilkan.

Ilustrasi berikut ini memperlihatkan kedua halaman aplikasi ExpenseIt dengan kontrol, tata letak, gaya, pengikatan data, dan templat data yang diterapkan:

Kedua halaman aplikasi memperlihatkan daftar nama dan laporan pengeluaran.

Nota

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 selanjutnya

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:

Lihat juga

  • Last updated on