Aracılığıyla paylaş

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

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

"Eğitimin ö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, 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. Uygulama burada sorun yaşar çünkü not verileri NotePage dosyasına sıkı sıkıya bağlıdır. 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 TextBox kontrolüne sıkı sıkıya bağlı olduğu için bunu yapmak mümkün değil.

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 3 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 şimdi project yeniden yapılandıracaksınız.

Görünüm ve modeli ayırı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 "commit"e bakın: note sayfası - view-model.

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. Solution Explorer'da WinUINotes project sağ tıklayın ve Add>Yeni Klasör öğesini seçin. klasörünü Modelsadlandırın.

  2. WinUINotes projeye yeniden sağ tıklayın ve Ekle>Yeni Klasör öğesini 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ği hakkında 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, Views klasörüne taşındığına göre, ad alanlarını eşleşecek şekilde güncellemeniz gerekir. Sayfaların XAML ve arka planda kod dosyalarının ad alanı olarak WinUINotesayarlanır. Bunun WinUINotes.Views olarak güncellenmesi gerekiyor.

  1. Solution Explorer bölmesinde arka planda kod dosyasını göstermek için NotePage.xaml genişletin.

  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ı WinUINotes.Views olarak değ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 hangi sınıfın türünü tanımlayan x:Class özniteliği üzerinden başvurulur. Bu giriş yalnızca bir ad alanı değil, aynı zamanda bir tür ile birlikte gelen ad alanıdır. değerini x:Classolarak WinUINotes.Views.NotePage değiştirin:

    x:Class="WinUINotes.Views.NotePage"

MainWindow'da ad alanı başvurusunu düzeltin

Önceki adımda not sayfasını oluşturdunuz ve bu sayfaya gitmek için MainWindow.xaml güncellediniz. local: ad alanı eşlemesiyle eşlendiğini hatırlayın. local adını project kök ad alanına eşlemek yaygın bir uygulamadır ve Visual Studio project ş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 gereklidir. Bu yeni XAML ad alanı, WinUINotes.Views ad alanıyla eşleşecektir, bu yüzden ona views adını verin. Bildirim aşağıdaki öznitelik gibi görünmelidir: xmlns:views="using:WinUINotes.Views".

  1. Solution Explorer bölmesinde MainWindow.xaml girişine çift tıklayarak XAML düzenleyicisinde açın.

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

    xmlns:views="using:WinUINotes.Views"

  3. local XAML ad alanı, Frame.SourcePageType özelliğini ayarlamak için kullanıldı, bu nedenle bunu views olarak 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. Solution Explorer bölmesinde, Models klasörüne sağ tıklayın ve Add>Class... öğesini seçin. .

  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 public yöntemlerine 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. Bir yöntem imzası, void olay işleyicileri için Click olduğu gibi gerektirmediği sürece, async yöntemlerin bir Task döndürmesi gerekir.

Artık notu tutan StorageFile referansını da saklamayacaksınız. Dosyayı kaydetmeniz veya silmeniz gerektiğinde onu 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, Filename özelliğini oluşturucuda ayarlayın. 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, NotePage görünümünü Note veri modelini kullanacak şekilde güncelleştirebilir ve Note modeline 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 deyiminden sonra, kodunuza using klasöründeki ve ad alanındaki sınıflara erişim sağlamak için yeni bir Models deyimi 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, NotePage tarafından görüntülenen 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 Note nesnelerine okunacaktır. Bunu, sonraki bir adımda `AllNotesPage` öğesini eklediğinizde kod olarak ekleyeceksiniz. 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 XAML dosyasını Note modelini kullanacak şekilde güncelleyebilirsiniz. Daha önce, metni doğrudan metin dosyasından arka planda kod dosyasındaki TextBox.Text özelliğine okuyorsunuz. Şimdi Text özelliği için veri bağlamayı kullanacaksınız.

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

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

  3. Header bileşenini Date bağlamında noteModel özelliğine bağlayacak şekilde güncelleştirin: 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. Bağlamadaki Mode=TwoWay ayarı, TextBox.Text ve noteModel.Text özelliklerinin otomatik olarak senkronize edilmesi anlamına gelir. Metin TextBox içinde güncellendiğinde, değişiklikler Text öğesinin noteModel özelliğine yansıtılır ve noteModel.Text değiştirildiğinde, güncellemeler TextBox öğesine yansı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. x:Bind işlevini bağlama yolundaki bir adım olarak kullanmanıza olanak tanıyan işlev bağlama olarak adlandırılan güçlü bir özelliği de bu kod 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 OneWay değiştirmeyi unutmaktır.TwoWay)

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

  • {x:Bind} işaretleme uzantısı, derleme zamanında işlenir. Bağlama ifadelerinizin performansını iyileştirme ve derleme zamanı doğrulaması gibi bazı avantajları vardır. WinUI uygulamalarında bağlama için önerilir.
  • {Binding} biçimlendirme uzantısı çalışma zamanında işlenir ve genel amaçlı çalışma zamanı nesne denetlemesini kullanır.

Belgelerde daha fazla bilgi edinin:

Veri bağlama ve MVVM

Model-View-ViewModel (MVVM), kullanıcı arabirimini ve kullanıcı arabirimi olmayan kodu ayırmaya yönelik .NET geliştiricilerin popüler olduğu 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