Sebelumnya

Berikutnya

Mentransfer data dengan pengikatan data

Selesai

Dalam pelajaran ini, kami mengeksplorasi bagaimana Anda dapat menggunakan pengikatan data untuk entri data, memperlihatkan dan menyembunyikan bagian UI berdasarkan status aplikasi. Anda juga akan terbiasa dengan pola lengkapnya INotifyPropertyChanged .

Mari kita perluas demo yang ada dengan sapaan akrab yang terlihat seperti ini.

Saat Anda memilih tombol Kirim , aplikasi akan menampilkan salam sederhana di bagian atas.

1. Buka solusi

Jika Anda tidak membuka Visual Studio dengan proyek yang telah Anda buat selama pelajaran terakhir, buka sekarang.

2. Buat UI entri data

UI entri data sederhana: hanya TextBlock, , TextBoxdan Button, dalam satu tata letak horizontal di tengah layar. Cara paling sederhana untuk menempatkan kontrol secara horizontal adalah dengan menggunakan StackPanel, seperti ini.

<StackPanel HorizontalAlignment="Center" 
            VerticalAlignment="Center" 
            Orientation="Horizontal">
    <TextBlock Margin="10" 
               VerticalAlignment="Center" 
               Text="Enter your name: "/>
    <TextBox Name="tbUserName" 
             Margin="10" 
             Width="150" 
             VerticalAlignment="Center"/>
    <Button Margin="10" 
            VerticalAlignment="Center" >Submit</Button>
</StackPanel>

Salin kode sebelumnya, dan tempelkan di dalam Grid tag MainPage.xaml, di bawah jam TextBlock.

3. Terapkan dan ikat properti UserName

Mari kita mengalihkan perhatian kita pada kode. Buka MainPage.xaml.cs (Anda dapat menekan F7 untuk beralih ke kode di belakang, dan Shift+F7 untuk beralih kembali ke XAML). Buat properti sederhana yang disebut UserName.

public string UserName { get; set; }

Kembali ke MainPage.xaml, kita dapat membuat pengikatan data antara properti yang baru dibuat ini dan TextBox kontrol. TextBox Ubah kontrol dengan menambahkan Text atribut , seperti ini:

<TextBox Name="tbUserName" 
         Margin="10" 
         Width="150" 
         VerticalAlignment="Center" 
         Text="{x:Bind UserName, Mode=TwoWay}"/>

Catatan

Pastikan untuk tidak membingungkan TextBlock kontrol dan di TextBox sini. Mereka terlihat sangat mirip di XAML, tetapi jika Anda mengikat UserName properti teks ke TextBlockbukan TextBox, aplikasi tidak akan berfungsi.

Dengan kode sebelumnya, kami telah membuat pengikatan dua arah antara Text properti TextBox dan UserName properti dalam kode. Ini berarti bahwa setiap kali pengguna memasukkan teks (dan memindahkan fokus dari TextBox), UserName properti dalam kode akan berubah. Selain itu TextBox, teks 's diatur ke nilai yang disimpan di UserName properti pada awal aplikasi, atau setiap kali kita menaikkan NotifyPropertyChanged peristiwa dengan propertyName parameter "UserName". (Kami tidak akan melakukan itu dalam pelajaran ini.)

4. Buat penangan klik tombol Kirim

Selanjutnya, di permukaan desain, klik dua kali tombol Kirim . Ini akan secara otomatis membuat dan membuka Button_Click peristiwa dalam kode. Button_Click bukan nama yang sangat baik, jadi ubah nama metode menjadi lebih ekspresif OnSubmitClicked. Setelah selesai mengetik, klik bola lampu di OnSubmitClicked samping garis. Pilih Ganti Nama 'Button_Clicked' menjadi 'OnSubmitClicked' dari menu. Kembali ke XAML, periksa apakah XAML tombol sekarang terlihat seperti ini.

<Button Margin="10" 
        VerticalAlignment="Center" 
        Click="OnSubmitClicked">Submit</Button>

Kembali ke kode di belakang, mari kita tampilkan kotak dialog sederhana ketika tombol telah ditekan. Tambahkan kode berikut ke metode OnSubmitClicked:

var dlg = new Windows.UI.Popups.MessageDialog($"Hello {UserName}!");
_ = dlg.ShowAsync();

Jika Anda tidak terbiasa dengan $"Hello {Username}" sintaks, sintaksnya setara dengan "Hello " + UserName + "!" atau String.Format("Hello {0}!", UserName). Fitur yang lebih ringkas dan dapat dibaca ini disebut interpolasi string, dan diperkenalkan di C# 6.

_ adalah variabel buang. Ini digunakan untuk menunjukkan bahwa nilai ShowAsync pengembalian metode tidak digunakan. Metode mengembalikan ShowAsyncTask objek, yang merupakan tempat penampung untuk tugas yang akan diselesaikan di masa mendatang. Dalam kasus kami, kami tidak perlu menunggu tugas selesai, sehingga kami dapat membuang nilai pengembalian.

5. Jalankan aplikasi

Mari kita lihat apa yang kita lakukan sejauh ini! Jalankan aplikasi dengan menekan F5 atau Ctrl+F5. Masukkan nama Anda, pilih tombol Kirim , dan kotak dialog akan menyambut Anda.

6. Terapkan IsNameNeeded properti

Jika Anda menutup kotak dialog, Anda masih melihat bagian entri nama UI ditampilkan. Ini bukan yang kita inginkan. Kita perlu menyembunyikan formulir setelah berhasil diisi. Jadi mari kita lakukan ini sebagai langkah berikutnya dengan menggunakan pengikatan data.

Buka MainPage.xaml.cs, dan buat properti untuk menunjukkan apakah memasukkan nama pengguna masih diperlukan. Tambahkan kode berikut dalam MainPage kelas :

private bool _isNameNeeded = true;

public bool IsNameNeeded
{
    get { return _isNameNeeded; }
    set
    {
        if (value != _isNameNeeded)
        {
            _isNameNeeded = value;
            PropertyChanged?.Invoke(
                this, new PropertyChangedEventArgs(nameof(IsNameNeeded)));
        }
    }
}

Ini adalah properti Boolean yang cukup standar dengan bidang dukungan dan nilai truedefault , sampai kita sampai ke setter. Setter properti pertama kali memverifikasi apakah nilai baru sama dengan yang lama. Jika ya, tidak perlu melakukan apa-apa. Jika tidak ada yang berubah, Anda tidak ingin memulai proses panjang menghitung ulang tata letak dan kontrol penyajian ulang. Namun, jika nilai properti telah berubah, Anda perlu memberi tahu UI tentang hal itu, dengan menggunakan peristiwa tersebut PropertyChanged .

Dalam kode sebelumnya, Anda dapat melihat pola standar antarmuka INotifyPropertyChanged :

• Verifikasi apakah nilai telah berubah.
• Jika sudah, atur nilai baru.
• Beri tahu UI.

Setelah Anda memberi tahu UI (dengan asumsi mode pengikatan diatur ke OneWay atau TwoWay), ia memanggil getter properti, menerima nilai baru, dan mengubah UI yang sesuai.

7. Sembunyikan formulir setelah tombol Kirim dipilih

Dalam kasus kami, kami ingin formulir entri nama terlihat hanya sampai tombol Kirim telah dipilih. Kemudian akan hilang pada saat yang sama pesan salam ditampilkan. Mari kita ubah metode , OnSubmitClicked dengan menambahkan kode ini di awal:

if (string.IsNullOrEmpty(UserName))
{
    return;
}

IsNameNeeded = false;

Pertama, pemeriksaan cepat dilakukan, karena kami tidak lagi menerima nama pengguna kosong di sini. Setelah nama dimasukkan, IsNameNeeded diatur ke false, dan aplikasi dilanjutkan dengan menampilkan kotak dialog pesan. Mengatur nilai IsNameNeeded menaikkan NotifyPropertyChanged peristiwa dan memberi tahu UI.

Kami sekarang sudah selesai dengan kode untuk menyembunyikan UI. Mari kita kembali ke XAML!

Di sisi XAML, kita perlu menyembunyikan TextBlock, , TextBoxdan Button kapan IsNameNeeded salah. Atau kita hanya dapat menyembunyikan kontainer mereka, StackPanel, dalam satu langkah. Cukup tambahkan Visibility atribut ke StackPanel, seperti ini:

Visibility="{x:Bind IsNameNeeded, Mode=OneWay}"

Jalankan aplikasi, masukkan nama Anda ke dalam TextBox, dan verifikasi bahwa formulir entri memang menghilang saat Anda memilih tombol Kirim .

8. Gunakan pengikatan UI-ke-UI untuk menampilkan salam

Mari kita ganti MessageDialog dengan tampilan yang lebih permanen: a TextBlock di sudut kiri atas. Tambahkan baru TextBlock ke kontrol utama Grid di XAML.

<TextBlock Text="{x:Bind sys:String.Format('Hello {0}!',  tbUserName.Text), Mode=OneWay}" 
           HorizontalAlignment="Left" 
           VerticalAlignment="Top" 
           Margin="10"/>

Ada banyak hal baru yang terjadi di sini. Mari kita membedah pengikatan Text atribut!

Untuk mengevaluasi nilai Text properti pada TextBlock, sistem memanggil metode bawaan String.Format dengan string "Hello {0}"format . Objek yang akan diformat ( tbUserName.Text dengan kata lain, Text properti pada tbUserName kontrol). Mode pengikatan didefinisikan sebagai OneWay, yang TextBlock berarti akan menerima data dari TextBoxproperti .Text

Ini disebut pengikatan UI-ke-UI karena sumber dan target pengikatan data berada di UI. Untuk melihatnya dalam tindakan, Anda perlu menentukan sys namespace (yang berisi System.Format metode ). Tambahkan baris berikut ke tag akar Page di XAML:

xmlns:sys="using:System"

Sekarang jika Anda menjalankan aplikasi, Anda akan melihat bahwa salam diperbarui dengan setiap keypress. Anda bahkan tidak perlu menghapus fokus dari TextBox atau memilih tombol Kirim !

Di aplikasi dunia nyata, menampilkan nama pengguna tidak akan terjadi melalui pengikatan UI-ke-UI. Anda mungkin akan mengikat properti DisplayName kelas, atau sesuatu yang User serupa.

9. Sembunyikan salam sampai Kirim dipilih

Sekeren yang terlihat memiliki pembaruan salam saat mengetik, "Halo !" teks saat startup mungkin tampak tidak profesional. Lebih baik agar salam TextBlock tetap tidak terlihat sampai tombol Kirim dipilih.

Untuk menghitung apakah salam terlihat, gunakan metode yang disebut GetGreetingVisibility, dan tambahkan ke MainPage kelas .

public Visibility GetGreetingVisibility()
{
    return IsNameNeeded ? Visibility.Collapsed : Visibility.Visible;
}

Anda mungkin melihat bahwa ketika menyembunyikan StackPanel, kami mengikat bool nilai ke Visibility properti (yang memiliki jenis UIElement.Visibility). Mengikat ke Visibilitybool nilai sangat umum sehingga Microsoft telah membuat konversi default antara keduanya, dan inilah sebabnya kami tidak mendapatkan kesalahan konversi jenis apa pun sebelumnya. Namun, konversi otomatis ini hanya berfungsi untuk properti, sehingga GetGreetingVisibility() metode harus mengembalikan UIElement.Visibility alih-alih nilai Boolean.

Seperti halnya properti, kita perlu menggunakan PropertyChanged peristiwa untuk memberi tahu UI ketika kita ingin mengevaluasi ulang metode . Jadi mari kita tambahkan baris ini ke akhir OnSubmitClicked metode.

PropertyChanged?.Invoke(this, 
    new PropertyChangedEventArgs(nameof(GetGreetingVisibility)));

Sebagai langkah terakhir, sebenarnya lakukan pengikatan dengan menambahkan Visibility atribut ke salam TextBlock. Di MainPage.xaml, edit TextBlock sehingga terlihat seperti ini:

<TextBlock Text="{x:Bind sys:String.Format('Hello {0}!',  tbUserName.Text), Mode=OneWay}" 
           Visibility="{x:Bind GetGreetingVisibility(), Mode=OneWay}"
           HorizontalAlignment="Left" 
           VerticalAlignment="Top" 
           Margin="10"/>

Perhatikan bahwa kami tidak perlu menambahkan referensi namespace layanan apa pun ke GetGreetingVisibility() panggilan, karena itu adalah anggota kelas itu MainPage sendiri.

Terakhir, untuk berhenti menampilkan MessageDialog, komentari baris berikut dari OnSubmitClicked metode .

// var dlg = new Windows.UI.Popups.MessageDialog($"Hello {UserName}!");
// dlg.ShowAsync();

Sekarang Anda siap untuk menjalankan aplikasi dan menikmati pesan salam Anda.

Ringkasan

Dalam pelajaran ini, Anda telah melihat bagaimana pengikatan data memudahkan transfer data antara UI dan kode Anda, atau di antara dua elemen UI. Namun, ada banyak kode untuk ditulis, terutama ketika memanggil PropertyChanged peristiwa di setter properti. Dalam pelajaran berikutnya, Anda akan membuat kelas pembantu untuk menyederhanakan penggunaan INotifyPropertyChanged pola.

Dalam pelajaran ini, kami mengeksplorasi bagaimana Anda dapat menggunakan pengikatan data untuk entri data, memperlihatkan dan menyembunyikan bagian UI berdasarkan status aplikasi. Anda juga akan terbiasa dengan pola lengkap INotifyPropertyChanged , dan mempelajari lebih lanjut tentang DataContext.

Mari kita perluas demo yang ada dengan sapaan akrab yang terlihat seperti ini.

Saat Anda memilih tombol Kirim , aplikasi akan menampilkan salam sederhana di bagian atas.

1. Buat DataContext di seluruh jendela

Jika Anda tidak membuka Visual Studio dengan proyek yang telah Anda buat selama pelajaran terakhir, buka sekarang.

Dalam pelajaran sebelumnya, kami membuat kelas khusus Clock yang diinstansiasi dalam TextBlock jam yang ditampilkan. Kelas ini Clock berisi logika bisnis untuk jam itu sendiri. Namun, Anda sering kali perlu mencakup lebih banyak fungsionalitas untuk layar, dan akan melelahkan untuk mengatur DataContext untuk setiap kontrol pada UI.

Untungnya, DataContext dirancang sehingga Anda dapat menerapkannya ke seluruh pohon XAML - atau hanya sebagian darinya. Atribut DataContext utama adalah bahwa ia diwarisi di seluruh pohon XAML, tetapi dapat ditimpa pada titik mana pun untuk subtree tertentu.

Mari kita lihat ini dalam praktek. Buat kelas baru bernama MainWindowDataContext, dan pastikan kelas dan konstruktornya bersifat publik:

namespace DatabindingSampleWPF
{
    public class MainWindowDataContext
    {
        public MainWindowDataContext()
        {
        }
    }
}

Sekarang, atur instans kelas ini menjadi DataContext untuk seluruh Window. Di MainWindow.xaml, tambahkan ini tepat setelah tag pembuka Window :

<Window.DataContext>
    <local:MainWindowDataContext />
</Window.DataContext>

Pada titik ini, Visual Studio mungkin menunjukkan bahwa kelas DatabindingSampleWPF.MainWindowDataContext tidak ada. Ini karena proyek belum dikompilasi sejak Anda menambahkan kelas ini. Anda dapat memperbaiki kesalahan ini dengan mengkompilasi proyek Anda.

Mari kita tinjau apa yang kita miliki sejauh ini. DataContext diatur pada Window tingkat (root). Instans objek ini akan menjadi DataContext untuk setiap kontrol di Windowdalam . Satu-satunya pengecualian adalah TextBlock menampilkan jam, yang sudah memiliki set sendiri DataContext , sehingga menimpa global DataContextyang diwariskan . Jika ini TextBlock memiliki kontrol lebih lanjut di dalamnya dalam hierarki, mereka juga akan mewarisi Clock objek yang ditetapkan pada DataContext .TextBlock

2. Buat UI entri data

UI entri data sederhana: hanya TextBlock, TextBox, dan Button dalam satu tata letak horizontal di tengah layar. Cara paling sederhana untuk menempatkan kontrol secara horizontal adalah dengan menggunakan StackPanel, seperti ini.

<StackPanel HorizontalAlignment="Center" 
            VerticalAlignment="Center" 
            Orientation="Horizontal">
    <TextBlock Margin="10" 
               VerticalAlignment="Center" 
               Text="Enter your name:"/>
    <TextBox Name="tbName" 
             Margin="10" 
             Width="150" 
             VerticalAlignment="Center"/>
    <Button Margin="10" 
            VerticalAlignment="Center">Submit</Button>
</StackPanel>

Salin kode sebelumnya, dan tempelkan di dalam Grid tag MainPage.xaml, di bawah jam TextBlock.

3. Terapkan dan ikat properti UserName

Mari kita mengalihkan perhatian kita pada kode. Buka MainWindowDataContext.cs, dan buat properti baru yang disebut UserName.

public string? UserName { get; set; }

Kembali ke MainWindow.xaml, kita dapat membuat pengikatan data antara UserName properti dan TextBox kontrol. TextBox Ubah kontrol dengan menambahkan Text atribut , seperti ini:

<TextBox Name="tbUserName" 
         Margin="10" 
         Width="150" 
         VerticalAlignment="Center" 
         Text="{Binding UserName, Mode=TwoWay}"/>

Catatan

Pastikan untuk tidak membingungkan TextBlock kontrol dan di TextBox sini. Mereka terlihat sangat mirip di XAML, tetapi jika Anda mengikat UserName properti teks ke TextBlockbukan TextBox, aplikasi tidak akan berfungsi.

Dengan kode sebelumnya, kami telah membuat pengikatan dua arah antara Text properti TextBox dan UserName properti dalam kode. Ini berarti bahwa setiap kali pengguna memasukkan teks (dan memindahkan fokus dari TextBox), UserName properti dalam kode akan berubah. Selain itu TextBox, teks 's akan diatur ke nilai yang disimpan di UserName properti pada awal aplikasi, atau setiap kali kita menaikkan NotifyPropertyChanged peristiwa dengan propertyName parameter "UserName". (Kami tidak akan melakukan itu dalam pelajaran ini.)

Catatan

Dalam WPF, mode pengikatan secara otomatis ditentukan untuk situasi yang paling umum. Misalnya, jika Anda mengikat ke Text properti TextBox, WPF mengatur mode pengikatan ke TwoWay secara default. Ini berarti bahwa kita bahkan dapat melompat menentukan mode pengikatan di sini, dan bisa saja menulis Text={Binding UserName}. Pelajari selengkapnya tentang mode pengikatan di sini.

4. Buat penangan klik tombol Kirim

Selanjutnya, di permukaan desain, klik dua kali tombol Kirim . Ini akan secara otomatis membuat dan peristiwa Button_Click di MainWindow.xaml.cs dan membuka file. Button_Click bukan nama yang sangat deskriptif, jadi ubah nama metode menjadi OnSubmitClicked. Setelah selesai mengetik, klik tip obeng di samping OnSubmitClicked baris, dan pilih Ganti Nama 'Button_Clicked' menjadi 'OnSubmitClicked' dari menu. Kembali ke XAML dan periksa apakah XAML tombol sekarang terlihat seperti ini:

<Button Margin="10" 
        VerticalAlignment="Center" 
        Click="OnSubmitClicked">Submit</Button>

Kembali ke kode di belakang, mari kita tampilkan kotak dialog sederhana ketika tombol telah ditekan. Tambahkan properti kenyamanan ke bagian MainWindow atas kelas yang memungkinkan kita untuk dengan mudah mengakses MainWindowDataContext objek yang diatur sebagai DataContext dari seluruh MainWindow.

private MainWindowDataContext DC => (MainWindowDataContext)DataContext;

Selanjutnya, tambahkan kode berikut ke OnSubmitClicked metode :

MessageBox.Show($"Hello {DC.UserName}!");

Nilai teks yang dimasukkan dalam TextBox disimpan di MainWindowDataContext.UserName properti . Baris pertama menyimpan referensi ke MainWindowDataContext objek dalam variabel sementara. Baris kedua menampilkan kotak pesan dengan salam.

Jika Anda tidak terbiasa dengan $"Hello {Username}" sintaks, sintaksnya setara dengan "Hello " + UserName + "!" atau String.Format("Hello {0}!", UserName). Sintaksis yang lebih ringkas dan dapat dibaca ini disebut interpolasi string dan diperkenalkan dalam C# 6.

5. Jalankan aplikasi

Mari kita uji coba apa yang telah kita lakukan sejauh ini! Jalankan aplikasi dengan menekan F5 atau Ctrl+F5. Masukkan nama Anda, pilih tombol Kirim , dan kotak dialog akan menyambut Anda.

6. Terapkan IsNameNeeded properti

Perhatikan bahwa bagian entri nama UI masih ditampilkan setelah tombol Kirim ditekan. Kita perlu menyembunyikan formulir setelah berhasil diisi. Jadi mari kita lakukan ini sebagai langkah berikutnya dengan menggunakan pengikatan data.

Pertama, Buka MainWindowDataContext.cs, dan buat MainWindowDataContext warisan dari INotifyPropertyChanged, seperti yang kami lakukan dengan Clock kelas .

using System.ComponentModel;

public class MainWindowDataContext : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged;

Selanjutnya, buat properti untuk menunjukkan apakah memasukkan nama pengguna masih diperlukan. Tambahkan kode berikut dalam MainWindowDataContext kelas :

private bool _isNameNeeded = true;

public bool IsNameNeeded
{
    get { return _isNameNeeded; }
    set
    {
        if (value != _isNameNeeded)
        {
            _isNameNeeded = value;
            PropertyChanged?.Invoke(
                this, new PropertyChangedEventArgs(nameof(IsNameNeeded)));
        }
    }
}

Ini adalah properti Boolean yang cukup standar dengan bidang dukungan dan nilai truedefault , sampai kita sampai ke setter. Setter properti pertama kali memverifikasi apakah nilai baru sama dengan yang lama. Jika ya, tidak perlu melakukan apa-apa. Jika tidak ada yang berubah, Anda tidak ingin memulai proses panjang menghitung ulang tata letak dan kontrol penyajian ulang. Namun, jika nilai properti telah berubah, Anda perlu memberi tahu UI tentang hal itu, dengan menggunakan peristiwa tersebut PropertyChanged .

Dalam kode sebelumnya, Anda dapat melihat pola standar antarmuka INotifyPropertyChanged :

• Verifikasi apakah nilai telah berubah.
• Jika sudah, atur nilai baru.
• Beri tahu UI.

Setelah Anda memberi tahu UI (dengan asumsi mode pengikatan diatur ke OneWay atau TwoWay), ia memanggil getter properti, menerima nilai baru, dan mengubah UI yang sesuai.

7. Sembunyikan formulir setelah tombol Kirim dipilih

Dalam kasus kami, kami ingin formulir entri nama terlihat hanya sampai tombol Kirim telah dipilih. Kemudian akan hilang pada saat yang sama pesan salam ditampilkan. Mari kita ubah metode , OnSubmitClicked dengan menambahkan kode ini di awal:

if (string.IsNullOrWhiteSpace(DC.UserName))
{
    return;
}

DC.IsNameNeeded = false;

Pertama, pemeriksaan cepat dilakukan, karena kami tidak lagi menerima nama pengguna kosong di sini. Setelah nama dimasukkan, IsNameNeeded diatur ke false, dan aplikasi dilanjutkan dengan menampilkan kotak dialog pesan. Mengatur nilai IsNameNeeded menaikkan NotifyPropertyChanged peristiwa dan memberi tahu UI.

Kami sekarang sudah selesai dengan kode untuk menyembunyikan UI. Mari kita kembali ke XAML!

Di sisi XAML, kita perlu menyembunyikan TextBlock, , TextBoxdan Button kapan IsNameNeeded salah. Atau kita hanya dapat menyembunyikan kontainer mereka, StackPanel, dalam satu langkah. Visibility Tambahkan atribut ke StackPanel, seperti ini:

Visibility="{Binding IsNameNeeded, Converter={StaticResource BooleanToVisibilityConverter}}"

Pengikatan ini terdiri dari dua bagian. Bagian pertama menentukan jalur pengikatan, yang menunjuk ke IsNameNeeded properti MainWindowDataContext objek yang diatur sebagai DataContext dari seluruh Window.

IsNameNeeded Tetapi properti adalah Boolean, sementara Visibility berjenis System.Windows.Visibility, yang merupakan enum. Kita perlu melakukan konversi antara keduanya. Konversi ini sangat umum, WPF memiliki kelas pembantu bawaan bernama BooleanToVisibilityConverter. Kita perlu membuat instans kelas ini, dan mereferensikannya dari deklarasi pengikatan.

Kami membuat instans kelas ini di XAML, sebagai sumber daya Window objek. Setiap FrameworkElement dapat memiliki koleksi sumber dayanya sendiri, dengan kunci yang mengidentifikasi setiap sumber daya dalam koleksi. Dalam BooleanToVisibilityConverter pengikatan sebelumnya adalah kunci ini, menunjuk ke BooleanToVisibilityConverter objek di dalam koleksi sumber daya. Anda dapat menentukan koleksi sumber daya dengan menambahkan kode berikut ke Window, tepat setelah tag pembuka:

<Window.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</Window.Resources>

Jalankan aplikasi, masukkan nama Anda ke dalam TextBox, dan verifikasi bahwa formulir entri memang menghilang saat Anda memilih tombol Kirim .

8. Gunakan pengikatan UI-ke-UI untuk menampilkan salam

Mari kita ganti MessageDialog dengan tampilan yang lebih permanen: a TextBlock di sudut kiri atas. Tambahkan baru TextBlock ke kontrol utama Grid di XAML.

<TextBlock Text="{Binding Text, ElementName=tbName, StringFormat='Hello {0}!'}"
           HorizontalAlignment="Left" 
           VerticalAlignment="Top" 
           Margin="10"/>

Ada beberapa hal baru yang diperkenalkan dalam hal baru TextBlockini. Mari kita membedah pengikatan Text atribut!

Untuk mengevaluasi nilai Text properti pada TextBlock, sistem memanggil metode String.Format bawaan dengan string "Hello {0}"format . Objek yang akan diformat ( tbName.Text dengan kata lain, Text properti pada tbName kontrol). Mode pengikatan secara otomatis didefinisikan sebagai OneWay, yang TextBlock berarti akan menerima data dari TextBoxproperti .Text

Ini disebut pengikatan UI-ke-UI karena sumber dan target pengikatan data berada di UI. Untuk melihatnya beraksi, cukup jalankan aplikasi. Perhatikan bagaimana salam diperbarui dengan setiap keypress. Anda bahkan tidak perlu menghapus fokus dari TextBox atau memilih tombol Kirim !

Di aplikasi dunia nyata, menampilkan nama pengguna tidak akan terjadi melalui pengikatan UI-ke-UI. Anda mungkin akan mengikat DisplayName properti kelas User , atau pendekatan serupa lainnya.

9. Sembunyikan salam sampai Kirim dipilih

Sekeren yang terlihat memiliki pembaruan salam saat mengetik, "Halo !" teks saat startup mungkin tampak tidak profesional. Lebih baik agar salam TextBlock tetap tidak terlihat sampai tombol Kirim dipilih.

Untuk menghitung apakah salam terlihat, gunakan properti yang disebut GreetingVisibility, dan tambahkan ke MainWindowDataContext kelas .

public Visibility GreetingVisibility => IsNameNeeded ? Visibility.Collapsed : Visibility.Visible;

Anda juga harus menambahkan System.Windows namespace layanan ke usingdalam MainWindowDataContext .

Anda mungkin ingat bahwa sebelumnya, ketika kami menyembunyikan StackPanel, kami mengikat bool nilai ke Visibility properti (yang memiliki jenis System.Windows.Visibility). Namun, kita dapat melewati BooleanToVisibilityConverter jika sumber pengikatan sudah dari jenis data yang benar.

Seperti sebelumnya, kita perlu menggunakan PropertyChanged peristiwa untuk memberi tahu UI ketika kita ingin mengevaluasi GreetingVisibilitykembali . Jadi mari kita tambahkan baris ini ke akhir if blok di IsNameNeeded setter.

PropertyChanged?.Invoke(
    this, new PropertyChangedEventArgs(nameof(GreetingVisibility)));

Ini memastikan bahwa setiap kali IsNameNeeded diubah, akan ada dua PropertyChanged peristiwa yang dinaikkan: satu untuk properti itu IsNameNeeded sendiri, dan satu untuk properti GreetingVisibilityterhitung , yang tergantung pada IsNameNeeded.

Sebagai langkah terakhir, lakukan pengikatan dengan menambahkan Visibility atribut ke salam TextBlock. Di MainWindow.xaml, edit TextBlock sehingga terlihat seperti ini:

<TextBlock Text="{Binding Text, ElementName=tbName, StringFormat='Hello {0}!'}"
           Visibility="{Binding GreetingVisibility}"
           HorizontalAlignment="Left" 
           VerticalAlignment="Top" 
           Margin="10"/>

Terakhir, untuk berhenti menampilkan MessageBox, komentari baris berikut dari OnSubmitClicked metode di MainWindow.xaml.cs.

// MessageBox.Show($"Hello {DC.UserName}!");

Sekarang Anda siap untuk menjalankan aplikasi dan menikmati pesan salam Anda.

Ringkasan

Dalam pelajaran ini, Anda telah melihat bagaimana pengikatan data memudahkan transfer data antara UI dan kode Anda, atau di antara dua elemen UI. Namun, ada banyak kode untuk ditulis, terutama ketika memanggil PropertyChanged peristiwa di setter properti. Dalam pelajaran berikutnya, Anda akan membuat kelas pembantu untuk menyederhanakan penggunaan INotifyPropertyChanged pola.

Lanjutkan