Aracılığıyla paylaş

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

Öğreticinin bu bölümünde veri görünümleri ve modelleri kavramları tanıtmaktadır.

Öğreticinin önceki adımlarında, projeye kullanıcının tek bir notu kaydetmesine, düzenlemesine veya silmesine olanak tanıyan yeni bir sayfa eklediniz. Ancak, uygulamanın birden fazla notu işlemesi gerektiğinden, tüm notları görüntüleyen başka bir sayfa eklemeniz gerekir (bunu çağırın AllNotesPage). Bu sayfa, kullanıcının düzenleyici sayfasında açmak üzere bir not seçmesine olanak tanır ve böylece notu görüntüleyebilir, düzenleyebilir veya silebilir. Ayrıca kullanıcının yeni bir not oluşturmasına da izin vermelidir.

Bunu başarmak için bir AllNotesPage not koleksiyonuna ve koleksiyonu görüntülemenin bir yoluna sahip olması gerekir. Not verileri dosyaya sıkı sıkıya bağlı NotePage olduğundan uygulamanın başı burada derde girer. içinde AllNotesPage, yalnızca tüm notları, oluşturulduğu tarih ve metnin önizlemesi gibi her notla ilgili bilgilerle birlikte bir liste veya başka bir koleksiyon görünümünde görüntülemek istiyorsunuz. Not metni denetime sıkı sıkıya TextBox bağlı olduğundan bunu yapmanıza imkan yoktur.

Tüm notları gösterecek bir sayfa eklemeden önce, not verilerini not sunusundan ayırmak için bazı değişiklikler yapalım.

Görünümler ve modeller

WinUI uygulaması genellikle en az bir görünüm katmanına ve bir veri katmanına sahiptir.

Görünüm katmanı, XAML işaretlemesini kullanarak kullanıcı arabirimini tanımlar. İşaretleme, belirli kullanıcı arabirimi bileşenleri ve veri üyeleri arasındaki bağlantıyı tanımlayan veri bağlama ifadelerini (x:Bind gibi) içerir. Arka planda kod dosyaları bazen görünüm katmanının bir parçası olarak, kullanıcı arabirimini özelleştirmek veya işlemek için gereken ek kodu içermek ya da veriler üzerinde çalışmayı gerçekleştiren bir yöntemi çağırmadan önce olay işleyicisi bağımsız değişkenlerinden veri ayıklamak için kullanılır.

Veri katmanı veya modeli, uygulama verilerinizi ve ilgili mantığı temsil eden türleri tanımlar. Bu katman görünüm katmanından bağımsızdır ve verilerle etkileşim kuran birden çok farklı görünüm oluşturabilirsiniz.

Şu anda, NotePage veri görünümünü (not metni) temsil eder. Ancak, veriler sistem dosyasından uygulamaya okunduktan sonra yalnızca Text içindeki özelliğinde TextBoxNotePagebulunur. Uygulamada verileri farklı şekillerde veya farklı yerlerde sunmanıza olanak sağlayacak şekilde temsil edilmediğinden; başka bir ifadeyle uygulamanın veri katmanı yoktur. Veri katmanını oluşturmak için projeyi şimdi yeniden yapılandıracaksınız.

Görünüm ve modeli ayırma

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: not sayfası - görünüm modeli.

Modeli görünümden ayırmak için mevcut kodu yeniden düzenleyin. Sonraki birkaç adım, görünümlerin ve modellerin birbirinden ayrı olarak tanımlanması için kodu düzenler.

  1. Çözüm Gezgini'nde projeye sağ tıklayın WinUINotes veYeni Klasör Ekle'yi> seçin. klasörünü Modelsadlandırın.

  2. Projeye yeniden sağ tıklayın WinUINotes veYeni Klasör Ekle'yi> seçin. klasörünü Viewsadlandırın.

  3. Öğeyi NotePage.xaml bulun ve klasöre Views sürükleyin. Dosya NotePage.xaml.cs onunla birlikte taşınmalıdır.

    Uyarı

    Bir dosyayı taşıdığınızda, Visual Studio genellikle taşıma işleminin nasıl uzun sürebileceğiyle ilgili bir uyarı ister. Bu sorun olmamalı, bu uyarıyı görürseniz Tamam'a basın.

    Visual Studio, taşınan dosyanın ad alanını ayarlamak isteyip istemediğinizi de sorabilir. Hayır'ı seçin. Sonraki adımlarda ad alanını değiştireceksiniz.

Görünüm ad alanını güncelleştirme

Görünüm klasöre taşındığına Views göre, ad alanlarını eşleşecek şekilde güncelleştirmeniz gerekir. Sayfaların XAML ve arka planda kod dosyalarının ad alanı olarak WinUINotesayarlanır. Bunun olarak güncelleştirilmesi WinUINotes.Viewsgerekir.

  1. Çözüm Gezgini bölmesinde, arka planda kod dosyasını göstermek için genişletinNotePage.xaml.

  2. Henüz açık değilse kod düzenleyicisini açmak için öğeye çift tıklayın NotePage.xaml.cs . Ad alanını olarak WinUINotes.Viewsdeğiştirin:

    namespace WinUINotes.Views

  3. Henüz açık değilse öğeye çift tıklayarak NotePage.xaml XAML düzenleyicisini açın. Eski ad alanına, XAML için arka planda kod olan sınıf türünü tanımlayan özniteliği aracılığıyla x:Class başvurulur. Bu girdi yalnızca ad alanı değil, türüne sahip ad alanıdır. değerini x:Classolarak WinUINotes.Views.NotePage değiştirin:

    x:Class="WinUINotes.Views.NotePage"

MainWindow'da ad alanı başvuruyu düzeltme

Önceki adımda not sayfasını oluşturdunuz ve bu sayfaya gitmek için güncelleştirdiyseniz MainWindow.xaml . Ad alanı eşlemesiyle local: eşlendiğini unutmayın. Adı local projenizin kök ad alanına eşlemek yaygın bir uygulamadır ve Visual Studio proje şablonu bunu sizin için zaten yapar (xmlns:local="using:WinUINotes"). Sayfa yeni bir ad alanına taşındığına göre, XAML'deki tür eşlemesi artık geçersizdir.

Neyse ki, gerektiğinde kendi ad alanı eşlemelerinizi ekleyebilirsiniz. Projenizde oluşturduğunuz farklı klasörlerdeki öğelere erişmek için bunu yapmanız gerekir. Bu yeni XAML ad alanı, ad alanına WinUINotes.Viewseşlenir ve adını verin views. Bildirim aşağıdaki öznitelik gibi görünmelidir: xmlns:views="using:WinUINotes.Views".

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

  2. Bu yeni ad alanı eşlemesini için localeşlemenin altındaki satıra ekleyin:

    xmlns:views="using:WinUINotes.Views"

  3. Özelliği local ayarlamak Frame.SourcePageType için XAML ad alanı kullanıldı, bu nedenle bunu views oraya değiştirin. XAML'niz şu şekilde görünmelidir:

    <Window
    x:Class="WinUINotes.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUINotes"
    xmlns:views="using:WinUINotes.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="WinUI Notes">

    <!-- ... Unchanged XAML not shown. -->

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

    <!-- ... Unchanged XAML not shown. -->

</Window>

  4. Uygulamayı derleyin ve çalıştırın. Uygulama herhangi bir derleyici hatası olmadan çalıştırılmalıdır ve her şey daha önce olduğu gibi çalışmaya devam etmelidir.

Modeli tanımlama

Şu anda model (veriler) not görünümüne katıştırılmış durumdadır. Not sayfasının verilerini temsil eden yeni bir sınıf oluşturacaksınız:

  1. Çözüm Gezgini bölmesinde klasöre sağ tıklayın Models ve Sınıf Ekle.

  2. Sınıfı Note.cs adlandırın ve Ekle'ye basın. Dosya Note.cs kod düzenleyicisinde açılır.

  3. dosyasındaki Note.cs kodu şu kodla değiştirin; bu kod sınıfını public oluşturur ve not işlemek için özellikler ve yöntemler ekler:

    using System;
using System.Threading.Tasks;
using Windows.Storage;

namespace WinUINotes.Models
{
    public class Note
    {
        private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
        public string Filename { get; set; } = string.Empty;
        public string Text { get; set; } = string.Empty;
        public DateTime Date { get; set; } = DateTime.Now;

        public Note()
        {
            Filename = "notes" + DateTime.Now.ToBinary().ToString() + ".txt";
        }

        public async Task SaveAsync()
        {
            // Save the note to a file.
            StorageFile noteFile = (StorageFile)await storageFolder.TryGetItemAsync(Filename);
            if (noteFile is null)
            {
                noteFile = await storageFolder.CreateFileAsync(Filename, CreationCollisionOption.ReplaceExisting);
            }
            await FileIO.WriteTextAsync(noteFile, Text);
        }

        public async Task DeleteAsync()
        {
            // Delete the note from the file system.
            StorageFile noteFile = (StorageFile)await storageFolder.TryGetItemAsync(Filename);
            if (noteFile is not null)
            {
                await noteFile.DeleteAsync();
            }
        }
    }
}

  4. Dosyayı kaydedin.

Bu kodun birkaç değişiklik ve eklemeyle içindeki NotePage.xaml.cskoda çok benzer olduğunu fark edeceksiniz.

Filename ve Text özellikler olarak public değiştirildi ve yeni Date bir özellik eklendi.

Dosyaları kaydetme ve silme kodu yöntemlere public yerleştirildi. Çoğunlukla içindeki düğme Click olay işleyicilerinde NotePagekullandığınız kodla aynıdır, ancak dosya silindikten sonra görünümü güncelleştirmek için ek kod kaldırıldı. Burada gerekli değildir çünkü modeli ve görünümü eşitlenmiş tutmak için veri bağlamayı kullanacaksınız.

Bu zaman uyumsuz yöntem imzaları yerine void döndürür. sınıfı, Task bir değer döndürmeyen tek bir zaman uyumsuz işlemi temsil eder. Yöntem imzası, olay işleyicileri voidiçin Click olduğu gibi gerektirmediği sürece yöntemlerin async bir Taskdöndürmesi gerekir.

Ayrıca, notu tutan başvuruyu StorageFile artık tutmayacaksınız. Dosyayı kaydetmeye veya silmeye ihtiyacınız olduğunda almaya çalışırsınız.

içinde NotePage, dosya adı için bir yer tutucu kullandınız: note.txt. Uygulama birden fazla notu desteklediğine göre, kaydedilen notların dosya adlarının farklı ve benzersiz olması gerekir. Bunu yapmak için oluşturucuda özelliğini ayarlayın Filename . Geçerli saate göre dosya adının bir bölümünü oluşturmak ve dosya adlarını benzersiz hale getirmek için DateTime.ToBinary yöntemini kullanabilirsiniz. Oluşturulan dosya adı şöyle görünür: notes-8584626598945870392.txt.

Not sayfasını güncelleştirme

Artık görünümü veri modelini kullanacak NotePage şekilde güncelleştirebilir Note ve modele Note taşınan kodu silebilirsiniz.

  1. Düzenleyicide henüz açık değilse Views\NotePage.xaml.cs dosyasını açın.

  2. Sayfanın en üstündeki son using deyimden sonra, kodunuzun klasör ve ad alanı içindeki using sınıflara erişmesini sağlamak için yeni Models bir deyim ekleyin.

    using WinUINotes.Models;

  3. Sınıftan şu satırları silin:

    private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
private StorageFile? noteFile = null;
private string fileName = "note.txt";

  4. Bunun yerine, yerine adlı Note bir noteModel nesne ekleyin. Bu, görünümünü sağlayan NotePage not verilerini temsil eder.

    private Note? noteModel;

  5. Ayrıca artık olay işleyicisine NotePage_Loaded de ihtiyacınız yoktur. Metni doğrudan metin dosyasından TextBox'a okumayacaksınız. Bunun yerine, not metni nesnelere Note okunur. Sonraki bir adımda öğesini eklediğinizde bunun kodunu ekleyeceksiniz AllNotesPage . Bu satırları silin.

    Loaded += NotePage_Loaded;

...

private async void NotePage_Loaded(object sender, RoutedEventArgs e)
{
    noteFile = (StorageFile)await storageFolder.TryGetItemAsync(fileName);
    if (noteFile is not null)
    {
      NoteEditor.Text = await FileIO.ReadTextAsync(noteFile);
    }
}

  6. yöntemindeki SaveButton_Click kodu şununla değiştirin:

    if (noteModel is not null)
{
    await noteModel.SaveAsync();
}

  7. yöntemindeki DeleteButton_Click kodu şununla değiştirin:

    if (noteModel is not null)
{
    await noteModel.DeleteAsync();
}

Artık modeli kullanmak Note için XAML dosyasını güncelleştirebilirsiniz. Daha önce, metni doğrudan metin dosyasından arka planda kod dosyasındaki TextBox.Text özelliğine okuyorsunuz. Şimdi özelliği için veri bağlamayı Text kullanacaksınız.

  1. Düzenleyicide henüz açık değilse Views\NotePage.xaml dosyasını açın.

  2. Denetime Text bir TextBox öznitelik ekleyin. öğesinin Text özelliğine noteModelbağlayın: Text="{x:Bind noteModel.Text, Mode=TwoWay}".

  3. Header özelliğini bağlamak için Date öğesini güncelleştirinnoteModel: Header="{x:Bind noteModel.Date.ToString()}".

    <TextBox x:Name="NoteEditor"
         <!-- ↓ Add this line. ↓ -->
         Text="{x:Bind noteModel.Text, Mode=TwoWay}"
         AcceptsReturn="True"
         TextWrapping="Wrap"
         PlaceholderText="Enter your note"
         <!-- ↓ Update this line. ↓ -->
         Header="{x:Bind noteModel.Date.ToString()}"
         ScrollViewer.VerticalScrollBarVisibility="Auto"
         Width="400"
         Grid.Column="1"/>

Veri bağlama, uygulamanızın kullanıcı arabiriminin verileri görüntülemesine ve isteğe bağlı olarak bu verilerle eşitlenmiş durumda kalmasına yönelik bir yoldur. Mode=TwoWay Bağlamadaki ayar, ve TextBox.Text özelliklerinin otomatik olarak eşitlenmesi anlamına gelirnoteModel.Text. içinde metin güncelleştirildiğindeTextBox, değişiklikler öğesinin TextnoteModel özelliğine yansıtılır ve değiştirilirsenoteModel.Text, güncelleştirmeler öğesine TextBoxyansıtılır.

Header özelliği varsayılan değerini ModeOneTime kullanır çünkü noteModel.Date dosya oluşturulduktan sonra özelliği değişmez. Bu kod, bağlama yolundaki bir adım gibi x:Bind bir işlevi kullanmanıza olanak tanıyan işlev bağlama olarak adlandırılan güçlü bir özelliği ToString de gösterir.

Önemli

Doğru BindingMode'u seçmek önemlidir; aksi takdirde, veri bağlamanız beklendiği gibi çalışmayabilir. (sık karşılaşılan bir hata{x:Bind}, gerektiğinde veya BindingMode gerektiğinde varsayılanı OneWayTwoWay değiştirmeyi unutmaktır.)

İsim Description
OneTime Hedef özelliği yalnızca bağlama oluşturulduğunda güncelleştirir. için {x:Bind}varsayılan değeridir.
OneWay Bağlama oluşturulduğunda hedef özelliğini güncelleştirir. Kaynak nesnedeki değişiklikler hedefe de yayılabilir. için {Binding}varsayılan değeridir.
TwoWay Her biri değiştiğinde hedefi veya kaynak nesneyi güncelleştirir. Bağlama oluşturulduğunda hedef özellik kaynaktan güncelleştirilir.

Veri bağlama, verilerinizin ve kullanıcı arabiriminizin ayrılmasını destekler ve bu da daha basit bir kavramsal modelin yanı sıra uygulamanızın daha iyi okunabilirliği, test edilebilirliği ve sürdürülebilirliğiyle sonuçlanabilir.

WinUI'de, aralarından seçim yapabileceğiniz iki bağlama türü vardır:

  • İşaretlemeyi {x:Bind} uzantısı derleme zamanında işlenir. Avantajlarının bazıları, bağlama ifadelerinizin performansı ve derleme zamanı doğrulamasıdır. WinUI uygulamalarında bağlama için önerilir.
  • İşaretlemeyi {Binding} genişletme çalışma zamanında işlenir ve genel amaçlı çalışma zamanı nesne incelemesini kullanır.

Belgelerde daha fazla bilgi edinin:

Veri bağlama ve MVVM

Model-View-ViewModel (MVVM), .NET geliştiricileri tarafından popüler olan kullanıcı arabirimini ve kullanıcı arabirimi olmayan kodu ayırmaya yönelik bir ui mimari tasarım desenidir. WinUI uygulamaları oluşturma hakkında daha fazla bilgi edindikçe büyük olasılıkla bahsedilenleri görüp duyacaksınız. Burada yaptığınız gibi görünümleri ve modelleri ayırmak, uygulamanın tam MVVM uygulamasına yönelik ilk adımdır, ancak bu öğreticide ilerleyeceğimiz adım budur.

Uyarı

Bu öğreticideki veri modeline başvurmak için "model" terimini kullandık, ancak bu modelin tam bir MVVM uygulamasında ViewModel ile daha yakından uyumlu olduğunu ve modelin özelliklerini de birleştirdiğini unutmamak önemlidir.

MVVM hakkında daha fazla bilgi edinmek için şu kaynaklara bakın:

4. adıma devam et - Tüm notlar için görünüm ve model ekleme

  • Last updated on