Bagikan melalui

Menggunakan data sampel waktu desain dengan Perancang XAML di Visual Studio

  • Artikel

Beberapa kontrol yang bergantung pada data, seperti ListView, , ListBoxdan DataGrid, sulit divisualisasikan tanpa data. Dalam artikel ini, kita akan meninjau pendekatan baru yang memungkinkan pengembang yang mengerjakan proyek Windows Presentation Foundation (WPF) .NET Core atau proyek WPF .NET Framework dengan XAML Designer di Visual Studio untuk mengaktifkan data sampel dalam kontrol ini.

Persyaratan

Fitur Data Sampel memerlukan Visual Studio 2019 versi 16.10 atau yang lebih baru.

Fitur ini mendukung proyek desktop Windows yang menargetkan WPF untuk .NET Core atau .NET Framework saat Anda menggunakan desainer baru. Untuk mengaktifkan perancang baru untuk .NET Framework:

  1. Buka Fitur Pratinjau Lingkungan>Opsi>Alat.>
  2. Pilih Desainer XAML WPF Baru untuk .NET Framework, lalu mulai ulang Visual Studio.

Dasar-dasar fitur Data Sampel

Fitur Data Sampel hanya untuk visualisasi waktu desain. Ini hanya muncul di perancang XAML, bukan di aplikasi yang sedang berjalan. Dengan demikian, ini diterapkan ke versi ItemsSource waktu desain properti d:ItemsSource. Data sampel memerlukan namespace layanan waktu desain untuk berfungsi.

Catatan

Untuk mempelajari selengkapnya tentang properti waktu desain di XAML, lihat properti waktu desain XAML.

Untuk memulai, tambahkan baris kode berikut ke header dokumen XAML Anda jika belum ada:

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"

Setelah menambahkan namespace layanan, Anda dapat menggunakan d:ItemsSource="{d:SampleData}" untuk mengaktifkan data sampel di kontrol , , Listboxatau DataGrid AndaListView. Misalnya:

<DataGrid d:ItemsSource="{d:SampleData}"/>

Screenshot that shows sample data on a data grid.

Dalam contoh ini, tanpa d:ItemsSource="{d:SampleData}", Perancang XAML akan menampilkan kisi data kosong. Sebaliknya, dengan d:SampleData, sekarang menunjukkan data sampel default yang dihasilkan.

Secara default, lima item ditampilkan. Namun, Anda dapat menggunakan ItemCount properti untuk menentukan berapa banyak item yang ingin Anda tampilkan. Sebagai contoh: d:ItemsSource="{d:SampleData ItemCount=2}".

Data sampel dengan templat data

Fitur Data Sampel berfungsi untuk ListBox, ListView, atau DataGrid kontrol saat Anda menggunakan templat data. Fitur ini akan menganalisis DataTemplate kontrol dan mencoba menghasilkan data yang sesuai untuknya.

Data sampel hanya akan dihasilkan untuk elemen dalam templat data yang menggunakan pengikatan. Data sampel akan dihasilkan meskipun pengikatan belum memiliki sumber. Misalnya:

<ListView d:ItemsSource="{d:SampleData ItemCount=3}">
     <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Width="50" Source="{Binding ProfilePicture}"/>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding FirstName}" Margin="5"/>
                    <Label Content="{Binding LastName}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Screenshot that shows sample data in a list view with a data template.

Contoh data dengan Tindakan yang Disarankan

Untuk mengaktifkan atau menonaktifkan data sampel dengan mudah untuk kontrol dari perancang, Anda dapat menggunakan fitur Tindakan yang Disarankan. Tindakan yang Disarankan adalah bola lampu pada perancang yang muncul di kanan atas saat Anda memilih kontrol. Anda dapat mengaktifkan data sampel dengan memilih kontrol Anda, memilih bola lampu, lalu memilih Perlihatkan Data Sampel. Misalnya:

Screenshot that shows sample data with Suggested Actions.

Contoh data dengan antarmuka IValueConverter

Fitur Data Sampel tidak sepenuhnya mendukung pengonversi atau IValueConverter antarmuka. Namun, Anda bisa membuatnya berfungsi dengan melakukan salah satu atau kedua hal berikut:

  • Pastikan fungsi Anda Convert dapat menangani skenario di mana nilai sudah menjadi jenis target Anda.
  • Terapkan ConvertBack fungsi yang akan mengonversi nilai Anda kembali ke jenis asli.

Pemecahan Masalah

Jika data sampel Anda tidak menampilkan apa pun atau gagal menampilkan jenis yang benar, Anda dapat mencoba me-refresh perancang atau menutup dan membuka kembali halaman.

Jika Anda mengalami masalah yang tidak tercantum di bagian ini atau yang tidak dapat diperbaiki dengan me-refresh halaman, beri tahu kami dengan menggunakan alat Laporkan Masalah .

Konten terkait