Bagikan melalui

Menambahkan tampilan dan model untuk semua catatan

Bagian tutorial ini menambahkan halaman baru ke aplikasi, tampilan yang menampilkan semua catatan yang dibuat sebelumnya.

Beberapa catatan dan navigasi

Saat ini tampilan catatan menampilkan satu catatan. Untuk menampilkan semua catatan tersimpan, buat tampilan dan model baru: AllNotes.

  1. Di panel Penjelajah Solusi, klik kanan folder Views dan pilih Tambahkan>Item Baru...
  2. Dalam dialog Tambahkan Item Baru , pilih WinUI di daftar templat di sisi kiri jendela. Selanjutnya, pilih templat Halaman Kosong (WinUI). Beri nama file AllNotesPage.xaml dan tekan Tambahkan.
  3. Di panel Penjelajah Solusi, klik kanan folder Models dan pilih Tambahkan>Kelas...
  4. Beri nama kelas AllNotes.cs dan tekan Tambahkan.

Tip

Anda dapat mengunduh atau melihat kode untuk tutorial ini dari repositori GitHub. Untuk melihat kode apa adanya dalam langkah ini, lihat penerapan ini: semua tampilan dan model catatan.

Mengkodekan model AllNotes

Model data baru menggambarkan data yang dibutuhkan untuk menampilkan banyak catatan. Di sini, Anda akan mendapatkan semua catatan dari penyimpanan lokal aplikasi dan membuat kumpulan Note objek yang akan Anda tampilkan di AllNotesPage.

  1. Di panel Penjelajah Solusi , buka file Model\AllNotes.cs .

  2. Ganti kode dalam AllNotes.cs file dengan kode ini:

    using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Threading.Tasks;
using Windows.Storage;

namespace WinUINotes.Models
{
    public class AllNotes
    {
        public ObservableCollection<Note> Notes { get; set; } = 
                                    new ObservableCollection<Note>();

        public AllNotes()
        {
            LoadNotes();
        }

        public async void LoadNotes()
        {
            Notes.Clear();
            // Get the folder where the notes are stored.
            StorageFolder storageFolder = 
                          ApplicationData.Current.LocalFolder;
            await GetFilesInFolderAsync(storageFolder);
        }

        private async Task GetFilesInFolderAsync(StorageFolder folder)
        {
            // Each StorageItem can be either a folder or a file.
            IReadOnlyList<IStorageItem> storageItems = 
                                        await folder.GetItemsAsync();
            foreach (IStorageItem item in storageItems)
            {
                if (item.IsOfType(StorageItemTypes.Folder))
                {
                    // Recursively get items from subfolders.
                    await GetFilesInFolderAsync((StorageFolder)item);
                }
                else if (item.IsOfType(StorageItemTypes.File))
                {
                    StorageFile file = (StorageFile)item ;
                    Note note = new Note()
                    {
                        Filename = file.Name,
                        Text = await FileIO.ReadTextAsync(file),
                        Date = file.DateCreated.DateTime
                    };
                    Notes.Add(note);
                }
            }
        }
    }
}

Kode sebelumnya mendeklarasikan kumpulan Note item, bernama Notes, dan menggunakan LoadNotes metode untuk memuat catatan dari penyimpanan lokal aplikasi.

Koleksi Notes menggunakan ObservableCollection, yang merupakan koleksi khusus yang bekerja sangat baik ketika digunakan dengan pengikatan data. Saat kontrol yang mencantumkan beberapa item, seperti ItemsView, terikat ke ObservableCollection, keduanya bekerja sama untuk secara otomatis menjaga daftar item tetap sinkron dengan koleksi. Jika item ditambahkan ke koleksi, kontrol akan diperbarui secara otomatis dengan item baru. Jika item ditambahkan ke daftar, koleksi akan diperbarui.

Pelajari selengkapnya di dokumen:

Sekarang setelah AllNotes model siap menyediakan data untuk tampilan, Anda perlu membuat instans model AllNotesPage sehingga tampilan dapat mengakses model.

  1. Di panel Penjelajah Solusi , buka file Views\AllNotesPage.xaml.cs .

  2. Dalam AllNotesPage kelas, tambahkan kode ini untuk membuat model AllNotes bernama notesModel:

    public sealed partial class AllNotesPage : Page
{
    // ↓ Add this. ↓
    private AllNotes notesModel = new AllNotes();
    // ↑ Add this. ↑

    public AllNotesPage()
    {
        this.InitializeComponent();
    }
}

Mendesain halaman AllNotes

Selanjutnya, Anda perlu merancang tampilan untuk mendukung AllNotes model.

  1. Di panel Penjelajah Solusi , buka file Views\AllNotesPage.xaml .

  2. <Grid> ... </Grid> Ganti elemen dengan markup berikut:

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

    <CommandBar DefaultLabelPosition="Right">
        <AppBarButton Icon="Add" Label="New note"/>
        <CommandBar.Content>
            <TextBlock Text="Quick notes" Margin="16,8" 
                   Style="{ThemeResource SubtitleTextBlockStyle}"/>
        </CommandBar.Content>
    </CommandBar>

    <ItemsView ItemsSource="{x:Bind notesModel.Notes}" 
           Grid.Row="1" Padding="16" >
        <ItemsView.Layout>
            <UniformGridLayout MinItemWidth="200"
                           MinColumnSpacing="12"
                           MinRowSpacing="12"
                           ItemsJustification="Start"/>
        </ItemsView.Layout>
    </ItemsView>
</Grid>

XAML sebelumnya memperkenalkan beberapa konsep baru:

  • Kontrol CommandBar berisi AppBarButton. Tombol ini memiliki Label dan Icon, dan dipengaruhi oleh CommandBar yang berisinya. Misalnya, ini CommandBar mengatur posisi label tombolnya ke Right. Bilah perintah biasanya ditampilkan di bagian atas aplikasi, bersama dengan judul halaman.
  • Kontrol ItemsView menampilkan kumpulan item, dan dalam hal ini, terikat ke properti model Notes . Cara penyajian item oleh pandangan item diatur melalui properti ItemsView.Layout. Di sini, Anda menggunakan UniformGridLayout.

Sekarang setelah Anda membuat AllNotesPage, Anda perlu memperbarui MainWindow.xaml untuk terakhir kalinya agar memuat AllNotesPage alih-alih NotePage yang terpisah.

  1. Di panel Penjelajah Solusi , buka file MainWindow.xaml .

  2. Perbarui elemen rootFrame sehingga SourcePageType menunjuk ke views.AllNotesPage, seperti ini:

    <Frame x:Name="rootFrame" Grid.Row="1"
       SourcePageType="views:AllNotesPage"/>

Jika Anda menjalankan aplikasi sekarang, Anda akan melihat bahwa catatan yang Anda buat sebelumnya dimuat ke dalam kontrol ItemsView. Namun, itu hanya ditampilkan sebagai representasi string objek. ItemsView Tidak tahu bagaimana item ini harus ditampilkan. Anda akan memperbaiki ini di bagian berikutnya.

UI aplikasi catatan dengan daftar catatan memperlihatkan nama kelas Catatan, bukan konten catatan.

Menambahkan templat data

Anda perlu menentukan DataTemplate untuk memberi tahu ItemsView bagaimana item data Anda harus ditampilkan. DataTemplate ditetapkan ke properti ItemsTemplate dari ItemsView. Untuk setiap item dalam koleksi, ItemsView.ItemTemplate menghasilkan XAML yang dideklarasikan.

  1. Di panel Penjelajah Solusi , klik dua kali pada AllNotesPage.xaml entri untuk membukanya di editor XAML.

  2. Tambahkan pemetaan namespace baru ini pada baris di bawah pemetaan untuk local:

    xmlns:models="using:WinUINotes.Models"

  3. <Page.Resources> Tambahkan elemen setelah tag pembuka<Page...>. Ini mengambil ResourceDictionary dari properti ResourcesPage sehingga Anda dapat menambahkan sumber daya XAML ke dalamnya.

    <Page
    x:Class="WinUINotes.Views.AllNotesPage"
    ... >
<!-- ↓ Add this. ↓ -->
<Page.Resources>

</Page.Resources>

  4. <Page.Resources> Di dalam elemen , tambahkan DataTemplate yang menjelaskan cara menampilkan Note item.

    <Page.Resources>
    <!-- ↓ Add this. ↓ -->
    <DataTemplate x:Key="NoteItemTemplate" 
                  x:DataType="models:Note">
        <ItemContainer>
            <Grid Background="LightGray">
                <Grid.RowDefinitions>
                    <RowDefinition Height="120"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Text="{x:Bind Text}" Margin="12,8"
                           TextWrapping="Wrap"
                           TextTrimming="WordEllipsis"/>
                <Border Grid.Row="1" Padding="8,6,0,6"
                        Background="Gray">
                    <TextBlock Text="{x:Bind Date}"
                               Foreground="White"/>
                </Border>
            </Grid>
        </ItemContainer>
    </DataTemplate>
    <!-- ↑ Add this. ↑ -->
</Page.Resources>

  5. Pada XAML untuk ItemsView, tetapkan properti ItemTemplate ke templat data yang baru saja Anda buat.

    <ItemsView ItemsSource="{x:Bind notesModel.Notes}"
           Grid.Row="1" Margin="24"
           <!-- ↓ Add this. ↓ -->
           ItemTemplate="{StaticResource NoteItemTemplate}">

  6. Buat dan jalankan aplikasi.

Saat Anda menggunakan x:Bind ekstensi markup dalam DataTemplate, Anda harus menentukan x:DataType pada DataTemplate. Dalam hal ini, itu adalah individu Note (jadi Anda harus menambahkan referensi namespace XAML untuk Models). Template untuk catatan menggunakan dua kontrol TextBlock, yang terikat ke properti dari catatan Text dan Date. Elemen Kisi digunakan untuk tata letak dan untuk menyediakan warna latar belakang. Elemen Batas digunakan untuk latar belakang tanggal. (Elemen XAML Border dapat menyediakan kerangka dan latar belakang.)

Saat Anda menjalankan aplikasi, templat data diterapkan ke item Anda Note dan terlihat seperti ini jika pengaturan Warna Personalisasi > Windows Anda menggunakan mode Terang:

UI aplikasi catatan dengan daftar catatan memperlihatkan konten catatan dan tanggal yang diformat oleh templat data.

Namun, jika pengaturan Warna Personalisasi > Windows Anda menggunakan mode Gelap, pengaturan akan terlihat seperti ini:

UI aplikasi catatan dengan latar belakang gelap tetapi templat catatan abu-abu muda.

Ini bukan tampilan yang dimaksudkan dari aplikasi. Itu terjadi karena ada nilai warna yang dikodekan secara permanen dalam templat data untuk catatan tersebut. Secara default, elemen WinUI beradaptasi dengan preferensi warna Gelap atau Terang pengguna. Saat Anda menentukan elemen Anda sendiri, seperti templat data, Anda harus berhati-hati untuk melakukan hal yang sama.

Saat Anda menentukan sumber daya dalam XAML ResourceDictionary, Anda harus menetapkan x:Key nilai untuk mengidentifikasi sumber daya. Kemudian, Anda dapat menggunakan x:Key untuk mengambil sumber daya di XAML dengan menggunakan ekstensi markup {StaticResource} atau ekstensi markup {ThemeResource}.

  • Sebuah {StaticResource} adalah sama terlepas dari tema warnanya, sehingga digunakan untuk pengaturan seperti Font atau Style.
  • Sebuah {ThemeResource} berubah berdasarkan tema warna yang dipilih, sehingga dapat digunakan untuk Foreground, Background, dan properti terkait warna lainnya.

WinUI menyertakan berbagai sumber daya internal yang dapat Anda gunakan untuk membuat aplikasi Anda mengikuti panduan gaya Fluent serta panduan aksesibilitas. Anda akan mengganti warna yang dikodekan secara permanen dalam templat data dengan sumber daya tema bawaan, dan menerapkan beberapa sumber daya lain agar sesuai dengan panduan Desain Fasih.

  1. Dalam templat data yang Anda tambahkan sebelumnya, perbarui bagian yang ditunjukkan di sini untuk menggunakan sumber daya bawaan:

    <DataTemplate x:Key="NoteItemTemplate" 
              x:DataType="models:Note">

<!-- ↓ Update this. ↓ -->
    <ItemContainer CornerRadius="{StaticResource OverlayCornerRadius}">
        <Grid Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
              BorderThickness="1" 
              BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
              CornerRadius="{StaticResource OverlayCornerRadius}">
<!-- ↑ Update this. ↑ -->

            <Grid.RowDefinitions>
                <RowDefinition Height="120"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock Text="{x:Bind Text}" Margin="12,8"
                       TextWrapping="Wrap"
                       TextTrimming="WordEllipsis"/>

<!-- ↓ Update this. ↓ -->
            <Border Grid.Row="1" Padding="8,6,0,6"
                    Background="{ThemeResource SubtleFillColorSecondaryBrush}">
                <TextBlock Text="{x:Bind Date}"
                    Style="{StaticResource CaptionTextBlockStyle}"
                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
<!-- ↑ Update this. ↑ -->

            </Border>
        </Grid>
    </ItemContainer>
</DataTemplate>

Sekarang saat Anda menjalankan aplikasi dengan pengaturan Warna terang, aplikasi akan terlihat seperti ini:

UI aplikasi catatan dengan latar belakang terang dan templat catatan ringan.

Dan saat Anda menjalankan aplikasi dengan pengaturan Warna gelap, aplikasi akan terlihat seperti ini:

UI aplikasi catatan dengan latar belakang gelap dan templat catatan gelap.

Pelajari selengkapnya di dokumen:

Tip

Aplikasi ini WinUI Gallery adalah cara yang bagus untuk mempelajari kontrol WinUI dan panduan desain yang berbeda. Untuk melihat sumber daya tema yang digunakan dalam templat data, buka aplikasi ke panduan warna. Dari sana, Anda dapat melihat seperti apa sumber daya dan menyalin nilai yang Anda butuhkan langsung dari aplikasi.

Anda juga dapat membuka halaman Tipografi dan halaman Geometri untuk melihat sumber daya bawaan lainnya yang digunakan dalam templat data ini.

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Lanjutkan ke langkah 5 - Tambahkan navigasi antar halaman

  • Last updated on