Sdílet prostřednictvím

Přidat zobrazení a model pro poznámku

Tato část kurzu představuje koncepty zobrazení a modelů dat.

V předchozích krocích kurzu jste do project přidali novou stránku, která umožňuje uživateli uložit, upravit nebo odstranit jednu poznámku. Vzhledem k tomu, že aplikace potřebuje zpracovat více než jednu poznámku, musíte přidat další stránku, která zobrazí všechny poznámky (zavolejte ji AllNotesPage). Tato stránka umožňuje uživateli zvolit poznámku, která se má otevřít na stránce editoru, aby ji mohl zobrazit, upravit nebo odstranit. Měl by také umožnit uživateli vytvořit novou poznámku.

K tomu, aby bylo možné toho dosáhnout, AllNotesPage potřebuje mít kolekci poznámek a způsob, jak ji zobrazit. V této aplikaci dochází k potížím, protože data poznámek jsou úzce svázaná se souborem NotePage . Chcete AllNotesPagejenom zobrazit všechny poznámky v seznamu nebo jiném zobrazení kolekce s informacemi o každé poznámce, jako je datum vytvoření a náhled textu. Pokud je text poznámky úzce svázaný s ovládacím prvku TextBox, neexistuje žádný způsob, jak to to do.

Než přidáte stránku, která bude zobrazovat všechny poznámky, provedeme některé změny, které oddělí data poznámek od prezentace poznámek.

Zobrazení a modely

Aplikace WinUI 3 má obvykle alespoň vrstvu zobrazení a datovou vrstvu.

Vrstva zobrazení definuje uživatelské rozhraní pomocí značek XAML. Značkování zahrnuje výrazy pro vazbu dat (například x:Bind), které definují připojení mezi konkrétními komponentami uživatelského rozhraní a datovými členy. Soubory za kódem se někdy používají jako součást vrstvy zobrazení, aby obsahovaly další kód potřebný k přizpůsobení uživatelského rozhraní nebo manipulaci s nimi, nebo k extrakci dat z argumentů obslužné rutiny události před voláním metody, která provádí práci na datech.

Datová vrstva nebo model definuje typy, které představují data vaší aplikace a související logiku. Tato vrstva je nezávislá na vrstvě zobrazení a můžete vytvořit několik různých zobrazení, která pracují s daty.

NotePage V současné době představuje zobrazení dat (text poznámky). Nicméně, po načtení dat do aplikace ze systémového souboru existuje pouze ve Text vlastnosti TextBox ve NotePage. V aplikaci není reprezentována způsobem, který umožňuje prezentovat data různými způsoby nebo na různých místech; to znamená, že aplikace nemá datovou vrstvu. Teď restrukturalizujete project a vytvoří se datová vrstva.

Oddělení zobrazení a modelu

Návod

Kód pro tento kurz si můžete stáhnout nebo zobrazit z úložiště GitHub. Pokud chcete vidět kód, jak je v tomto kroku, podívejte se na toto potvrzení: note page – view-model.

Refaktoring existujícího kódu pro oddělení modelu od zobrazení Následující několik kroků uspořádá kód tak, aby se zobrazení a modely definovaly odděleně od sebe.

  1. V Solution Explorer klikněte pravým tlačítkem na WinUINotes project a vyberte Přidat>Nová složka. Pojmenujte složku Models.

  2. Klikněte pravým tlačítkem na WinUINotes project a vyberte Přidat>Nová složka. Pojmenujte složku Views.

  3. NotePage.xaml Najděte položku a přetáhněte ji do Views složky. Soubor NotePage.xaml.cs by se měl přesunout s ním.

    Poznámka:

    Když soubor přesunete, Visual Studio obvykle zobrazí výzvu s upozorněním, jak může operace přesunutí trvat dlouhou dobu. Nemělo by se jednat o problém, pokud se zobrazí toto upozornění, stiskněte OK .

    Visual Studio vás také může požádat, jestli chcete upravit obor názvů přesunutého souboru. Vyberte Ne. Názvový prostor změníte v dalších krocích.

Aktualizace oboru názvů zobrazení

Teď, když je zobrazení přesunuto do Views složky, budete muset aktualizovat obory názvů tak, aby odpovídaly. Obor názvů pro soubory XAML a soubory kódu na pozadí stránek je nastaven na WinUINotes. Je potřeba ho aktualizovat na WinUINotes.Views.

  1. V podokně Solution Explorer rozbalte NotePage.xaml, aby se zobrazil soubor kódu na pozadí.

  2. Poklikáním NotePage.xaml.cs na položku otevřete editor kódu, pokud ještě není otevřený. Změňte obor názvů na WinUINotes.Views:

    namespace WinUINotes.Views

  3. Poklikáním na NotePage.xaml položku otevřete editor XAML, pokud ještě není otevřený. Starý jmenný prostor je odkazován prostřednictvím atributu x:Class, který definuje, který typ třídy je kódem na pozadí pro XAML. Tato položka není jenom obor názvů, ale obor názvů s typem. x:Class Změňte hodnotu naWinUINotes.Views.NotePage:

    x:Class="WinUINotes.Views.NotePage"

Upravte odkaz na obor názvů v MainWindow

V předchozím kroku jste vytvořili stránku poznámky a aktualizovali MainWindow.xaml ji, abyste na ni přešli. Mějte na paměti, že byla namapována pomocí mapování oboru názvů local:. Je běžné namapovat název local na kořenový obor názvů vašeho projektu a šablona projektu Visual Studio to už udělá za vás (xmlns:local="using:WinUINotes"). Teď, když se stránka přesunula do nového oboru názvů, je mapování typů v XAML nyní neplatné.

Naštěstí můžete podle potřeby přidat vlastní mapování oborů názvů. Pro přístup k položkám v různých složkách, které vytvoříte ve svém projektu, musíte toto udělat. Tento nový obor názvů XAML se namapuje na obor názvů WinUINotes.Views, takže ho pojmenujte views. Deklarace by měla vypadat jako následující atribut: xmlns:views="using:WinUINotes.Views".

  1. V podokně Solution Explorer poklikejte na položku MainWindow.xaml a otevřete ji v editoru XAML.

  2. Přidejte toto nové mapování oboru názvů na řádek pod mapováním pro local:

    xmlns:views="using:WinUINotes.Views"

  3. Obor názvů local XAML se použil ke konfiguraci vlastnosti Frame.SourcePageType, proto ji tam změňte na views. Váš XAML by teď měl vypadat takto:

    <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. Zkompilujte a spusťte aplikaci. Aplikace by měla běžet bez chyb kompilátoru a všechno by mělo fungovat stejně jako předtím.

Definování modelu

V současné době je model (data) vložen do zobrazení poznámek. Vytvoříte novou třídu, která bude představovat data stránky poznámek:

  1. V podokně Solution Explorer klikněte pravým tlačítkem na složku Models a vyberte Add>Class... .

  2. Pojmenujte třídu Note.cs a stiskněte Přidat. Soubor Note.cs se otevře v editoru kódu.

  3. Nahraďte kód v Note.cs souboru tímto kódem, díky kterému třída public přidává vlastnosti a metody pro zpracování poznámky:

    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. Uložte soubor.

Všimněte si, že tento kód je velmi podobný kódu v NotePage.xaml.cs, s několika změnami a dodatky.

Filename a Text byly změněny na public vlastnosti a byla přidána nová Date vlastnost.

Kód pro uložení a odstranění souborů byl umístěn v public metodách. Většinou je identický s kódem, který jste použili v obslužných rutinách události tlačítka ClickNotePage, ale kód pro aktualizaci zobrazení po odstranění souboru byl odebrán. Tady to není potřeba, protože k zachování modelu a zobrazení použijete datovou vazbu.

Tyto asynchronní podpisy metod vrací Task místo void. Třída Task představuje jednu asynchronní operaci, která nevrací hodnotu. Pokud podpis metody nevyžaduje void, jak je tomu u Click obslužných rutin událostí, async metody by měly vrátit Task.

Nebudete také nadále udržovat odkaz na StorageFile, který obsahuje poznámku. Soubor se jenom pokusíte získat, když ho potřebujete k uložení nebo odstranění.

V NotePagesouboru jste použili zástupný symbol pro název souboru: note.txt. Teď, když aplikace podporuje více než jednu poznámku, musí být názvy souborů uložených poznámek odlišné a jedinečné. K tomu nastavte vlastnost Filename v konstruktoru. Pomocí metody DateTime.ToBinary můžete vytvořit část názvu souboru na základě aktuálního času a nastavit názvy souborů jako jedinečné. Vygenerovaný název souboru vypadá takto: notes-8584626598945870392.txt.

Aktualizace stránky poznámek

Teď můžete zobrazení aktualizovat NotePage tak, aby používalo Note datový model a odstranilo kód přesunutý do Note modelu.

  1. Otevřete soubor Views\NotePage.xaml.cs pokud ještě není v editoru otevřený.

  2. Za poslední příkaz using v horní části stránky přidejte nový příkaz using, abyste poskytli kódu přístup ke třídám ve složce Models a jmenném prostoru.

    using WinUINotes.Models;

  3. Odstraňte z třídy tyto řádky:

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

  4. Místo toho přidejte objekt pojmenovaný NotenoteModel na jejich místo. Toto představuje údaje poznámky, které NotePage poskytuje zobrazení.

    private Note? noteModel;

  5. Také už nepotřebujete obslužnou rutinu události NotePage_Loaded. Text nebudete číst přímo z textového souboru do textového pole. Místo toho se text poznámky načte do Note objektů. Tento kód přidáte, když přidáte AllNotesPage v pozdějším kroku. Odstraňte tyto řádky.

    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. Nahraďte kód v SaveButton_Click metodě tímto kódem:

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

  7. Nahraďte kód v DeleteButton_Click metodě tímto kódem:

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

Teď můžete soubor XAML aktualizovat tak, aby používal Note model. Dříve jste text přečetli přímo z textového souboru do TextBox.Text vlastnosti v souboru kódu. Teď pro vlastnost použijete datovou Text vazbu.

  1. Otevřete soubor Views\NotePage.xaml pokud ještě není v editoru otevřený.

  2. Přidejte atribut Text k ovládacímu prvku TextBox. Připojte na Text vlastnost noteModel: Text="{x:Bind noteModel.Text, Mode=TwoWay}".

  3. Aktualizujte Header pro vazbu na vlastnost DatenoteModel: 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"/>

Datová vazba je způsob, jak může uživatelské rozhraní vaší aplikace zobrazovat data a volitelně zůstávat synchronizované s těmito daty. Nastavení Mode=TwoWay vazby znamená, že vlastnosti TextBox.Text a noteModel.Text se automaticky synchronizují. Při aktualizaci textu v TextBoxsouboru , změny se projeví ve Text vlastnosti objektu noteModel, a pokud noteModel.Text je změněn, aktualizace se projeví v TextBoxsouboru .

Vlastnost Header používá výchozí Mode kvůli tomu, že OneTime se po vytvoření souboru nezmění. Tento kód také ukazuje výkonnou funkci x:Bind známou jako vázání funkcí, která umožňuje použití funkce jako ToString jako jeden krok v cestě vazby.

Důležité

Je důležité zvolit správný BindingMode; jinak vaše datová vazba nemusí fungovat podle očekávání. (Běžnou chybou {x:Bind} je zapomenout změnit výchozí BindingMode když je třeba OneWay nebo TwoWay.)

Název Description
OneTime Aktualizuje cílovou vlastnost pouze při vytvoření vazby. Výchozí hodnota pro {x:Bind}.
OneWay Aktualizuje cílovou vlastnost při vytvoření vazby. Změny zdrojového objektu se také můžou rozšířit do cíle. Výchozí hodnota pro {Binding}.
TwoWay Aktualizuje cíl nebo zdrojový objekt, když se změní. Při vytvoření vazby se cílová vlastnost aktualizuje ze zdroje.

Datová vazba podporuje oddělení dat a uživatelského rozhraní a výsledkem je jednodušší koncepční model a lepší čitelnost, testovatelnost a udržovatelnost aplikace.

Ve WinUI existují dva druhy vazeb, ze které si můžete vybrat:

  • Rozšíření {x:Bind} značkovacího jazyka se zpracovává v době kompilace. Některé z jeho výhod jsou lepší výkon a ověření vazebných výrazů při kompilaci. Doporučuje se pro vazbu v aplikacích WinUI.
  • Rozšíření {Binding} značek se zpracovává za běhu a používá kontrolu objektů modulu runtime pro obecné účely.

Další informace najdete v dokumentaci:

Datová vazba a MVVM

Model-View-ViewModel (MVVM) je vzor návrhu architektury uživatelského rozhraní pro oddělení uživatelského rozhraní a kódu bez uživatelského rozhraní, který je oblíbený u vývojářů .NET. Pravděpodobně uvidíte a uslyšíte zmínku, když se budete více dozvídat o vytváření aplikací WinUI. Oddělení zobrazení a modelů, jak jste to udělali tady, je prvním krokem k úplné implementaci MVVM aplikace, ale v tomto kurzu se dostanete jen tak daleko.

Poznámka:

Termín "model" jsme použili k odkazování na datový model v tomto kurzu, ale je důležité si uvědomit, že tento model je lépe v souladu s modelem ViewModel v úplné implementaci MVVM a zároveň zahrnuje aspekty modelu.

Další informace o MVVM najdete v těchto zdrojích informací:

Pokračujte krokem 4 – přidání zobrazení a modelu pro všechny poznámky

  • Last updated on