Aracılığıyla paylaş

Tüm notlar için görünüm ve model ekleme

Öğreticinin bu bölümü, daha önce oluşturulmuş tüm notları görüntüleyen bir görünümü kapsayan yeni bir sayfayı uygulamaya ekler.

Birden çok notlar ve gezinti

Şu anda not görünümünde tek bir not görüntülenir. Kaydedilen tüm notlarınızı görüntülemek için yeni bir görünüm ve model oluşturun: AllNotes.

  1. Çözüm Gezgini bölmesinde klasöre sağ tıklayın Views ve Yeni Öğe Ekle
  2. Yeni Öğe Ekle iletişim kutusunda, pencerenin sol tarafındaki şablon listesinde WinUI'yi seçin. Ardından Boş Sayfa (WinUI) şablonunu seçin. Dosyayı AllNotesPage.xaml adlandırın ve Ekle'ye basın.
  3. Çözüm Gezgini bölmesinde klasöre sağ tıklayın Models ve Sınıf Ekle
  4. Sınıfı AllNotes.cs adlandırın ve Ekle'ye basın.

Tavsiye

Bu öğreticinin kodunu GitHub deposundan indirebilir veya görüntüleyebilirsiniz. Kodu bu adımda olduğu gibi görmek için şu işlemeye bakın: tüm notlar görünümü ve modeli.

AllNotes modelini kodlayın

Yeni veri modeli, birden çok not görüntülemek için gereken verileri temsil eder. Burada, uygulamanın yerel depolama alanından tüm notları alacak ve bu notları AllNotesPage içinde görüntüleyeceğiniz bir Note nesne koleksiyonu oluşturacaksınız.

  1. Çözüm Gezgini bölmesinde Models\AllNotes.cs dosyasını açın.

  2. Dosyadaki AllNotes.cs kodu şu kodla değiştirin:

    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);
                }
            }
        }
    }
}

Önceki kod, Notes adlı bir Note öğe koleksiyonunu bildirir ve uygulamanın yerel depolama alanından notları yüklemek için LoadNotes yöntemini kullanır.

Koleksiyon, Notes veri bağlamayla iyi çalışan ObservableCollection adlı özel bir koleksiyonu kullanır. ItemsView gibi birden çok öğeyi listeleyen bir denetim bir ObservableCollectionöğesine bağlı olduğunda, iki öğe listesi koleksiyonla otomatik olarak eşitlenmiş durumda tutmak için birlikte çalışır. Koleksiyona bir öğe eklenirse, denetim yeni öğeyle otomatik olarak güncelleştirilir. Listeye bir öğe eklenirse koleksiyon güncelleştirilir.

Belgelerde daha fazla bilgi edinin:

Artık model görünüm için veri sağlamaya hazır olduğuna göre AllNotes , görünümün modele erişebilmesi için içinde AllNotesPage modelin bir örneğini oluşturmanız gerekir.

  1. Çözüm Gezgini bölmesinde Views\AllNotesPage.xaml.cs dosyasını açın.

  2. AllNotesPage sınıfında, "notesModel" adında bir AllNotes modeli oluşturmak için bu kodu ekleyin:

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

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

AllNotes sayfasını tasarlama

Ardından, AllNotes modelini desteklemek için görünümü tasarlamanız gerekir.

  1. Çözüm Gezgini bölmesinde Görünümler\AllNotesPage.xaml dosyasını açın.

  2. <Grid> ... </Grid> öğesini aşağıdaki işaretlemeyle değiştirin:

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

Önceki XAML'de birkaç yeni kavram tanıtılmıştır:

  • CommandBar denetimi bir AppBarButton içerir. Bu düğmenin bir Label ve Icon vardır ve onu içeren CommandBar'den etkilenir. Örneğin, bu CommandBar, düğmelerinin etiket konumunu Right olarak ayarlar. Komut çubukları genellikle sayfanın başlığıyla birlikte uygulamanın en üstünde görüntülenir.
  • ItemsView denetimi bir öğe koleksiyonu görüntüler ve bu durumda modelin Notes özelliğine bağlıdır. Öğelerin öğeler görünümü tarafından sunulma şekli özelliği aracılığıyla ItemsView.Layout ayarlanır. Burada UniformGridLayout kullanırsınız.

Artık AllNotesPage'yi oluşturduğunuza göre, MainWindow.xaml'i son bir kez güncelleyerek tek bir NotePage yerine AllNotesPage yüklenmesini sağlayın.

  1. Çözüm Gezgini bölmesinde MainWindow.xaml dosyasını açın.

  2. rootFrame öğesini, SourcePageType öğesinin views.AllNotesPage öğesine işaret edeceği şekilde güncelleyin:

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

Uygulamayı şimdi çalıştırırsanız, daha önce oluşturduğunuz notunun denetime ItemsView yüklendiğini görürsünüz. Ancak, yalnızca nesnenin dize gösterimi olarak gösterilir. bu ItemsView öğenin nasıl görüntülenmesi gerektiğini bilmiyor. Bunu sonraki bölümde düzelteceksiniz.

Not içeriği yerine Not sınıfı adını gösteren not listesini içeren not uygulaması kullanıcı arabirimi.

Veri şablonu ekleme

Verinizin nasıl gösterilmesi gerektiğini ItemsView belirtmek için bir DataTemplate belirtmeniz gerekir. DataTemplate öğesi, ItemsView'nin ItemsTemplate özelliğine atanır. koleksiyondaki her öğe için bildirilen ItemsView.ItemTemplate XAML'yi oluşturur.

  1. Çözüm Gezgini bölmesinde girdiye AllNotesPage.xaml çift tıklayarak XAML düzenleyicisinde açın.

  2. Bu yeni ad alanı eşlemesini, local eşlemesinin altındaki satıra ekleyin.

    xmlns:models="using:WinUINotes.Models"

  3. Açma <Page.Resources> etiketinden sonra bir <Page...> öğe ekleyin. Bu, 's Resources özelliğinden PageResourceDictionary'yi alır, böylece buna XAML kaynakları ekleyebilirsiniz.

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

</Page.Resources>

  4. <Page.Resources> öğesinin içine, bir Note öğesinin nasıl görüntüleneceğini açıklayan DataTemplate öğesini ekleyin.

    <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. ItemsView XAML'de, ItemTemplate özelliğini yeni oluşturduğunuz veri şablonuna atayın:

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

  6. Uygulamayı derleyin ve çalıştırın.

x:Bind işaretleme uzantısını bir DataTemplate içinde kullandığınızda, DataTemplate üzerinde x:DataType belirtmeniz gerekir. Bu durumda, bu bir bireysel olaydır Note (bu nedenle Models için bir XAML ad alanı başvurusu eklemeniz gerekir). Not şablonu, notun Text ve Date özelliklerine bağlı olan iki TextBlock denetimi kullanır. Grid öğesi düzen ve arka plan rengi sağlamak için kullanılır. Tarihin arka planı için border öğesi kullanılır. (XAML Border öğesi hem ana hat hem de arka plan sağlayabilir.)

Uygulamayı çalıştırdığınızda, veri şablonu öğelerinize Note uygulanır ve Windows Kişiselleştirme > Renkleri ayarlarınız Açık modunu kullanıyorsa şöyle görünür:

Not içeriğini ve veri şablonu tarafından biçimlendirilmiş tarihi gösteren not listesini içeren not uygulaması kullanıcı arabirimi.

Ancak Windows Kişiselleştirme > Renkleri ayarlarınız Koyu modu kullanıyorsa şöyle görünür:

Koyu arka planlı ancak açık gri not şablonuna sahip not uygulaması kullanıcı arabirimi.

Bu, uygulama için amaçlanan görünüm değildir. Bunun nedeni, not için veri şablonunda sabit kodlanmış renk değerleri olmasıdır. Varsayılan olarak, WinUI öğeleri kullanıcının Koyu veya Açık renk tercihine uyarlanır. Veri şablonu gibi kendi öğelerinizi tanımlarken, aynı işlemi yaparken dikkatli olmanız gerekir.

XAML'de ResourceDictionarybir kaynak tanımladığınızda, kaynağı tanımlamak için bir x:Key değer atamanız gerekir. Ardından, x:Key kullanarak veya {StaticResource} ya da {ThemeResource} işaretleme uzantısını XAML'deki kaynağı almak için kullanabilirsiniz.

  • A {StaticResource}, renk temasından bağımsız olarak aynıdır, bu nedenle Font veya Style ayarları gibi şeyler için kullanılır.
  • {ThemeResource}, seçilen renk temasına bağlı olarak değişiklik gösterir, bu nedenle Foreground, Background ve diğer renkle ilgili özellikler için kullanılır.

WinUI, uygulamanızın Fluent stil yönergelerini ve erişilebilirlik yönergelerini izlemesini sağlamak için kullanabileceğiniz çeşitli yerleşik kaynaklar içerir. Veri şablonundaki sabit kodlanmış renkleri yerleşik tema kaynaklarıyla değiştirecek ve Fluent Design yönergelerine uyacak başka birkaç kaynak uygulayacaksınız.

  1. Daha önce eklediğiniz veri şablonunda, yerleşik kaynakları kullanmak için burada belirtilen bölümleri güncelleştirin:

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

Uygulamayı açık renk ayarıyla çalıştırdığınızda şu şekilde görünür:

Açık arka planlı ve açık not şablonuna sahip notlar uygulaması kullanıcı arabirimi.

Uygulamayı Koyu renk ayarıyla çalıştırdığınızda şöyle görünür:

Koyu arka plan ve koyu not şablonuna sahip notlar uygulaması kullanıcı arabirimi.

Belgelerde daha fazla bilgi edinin:

Tavsiye

Uygulama WinUI Gallery , farklı WinUI denetimleri ve tasarım yönergeleri hakkında bilgi edinmek için harika bir yoldur. Veri şablonunda kullanılan tema kaynaklarını görmek için uygulamayı Renk kılavuzuna açınWinUI Gallery. Buradan kaynakların nasıl göründüğünü görebilir ve ihtiyacınız olan değerleri doğrudan uygulamadan kopyalayabilirsiniz.

Bu veri şablonunda kullanılan diğer yerleşik kaynakları görmek için Tipografi sayfasını ve Geometri sayfasını da açabilirsiniz.

WinUI 3 Galeri uygulaması çoğu WinUI 3 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın

5. adıma devam et - Sayfalar arasında gezinti ekleme

  • Last updated on