Sdílet prostřednictvím

Přidání zobrazení a modelu pro poznámku

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

V předchozích krocích kurzu jste do projektu 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). Na této stránce si uživatel zvolí poznámku, která se otevře 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 AllNotesPage je potřeba mít kolekci poznámek a způsob, jak kolekci 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. S textem poznámky, který je úzce svázaný s ovládacím TextBox prvku, neexistuje žádný způsob, jak to udělat.

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 má obvykle alespoň vrstvu zobrazení a datovou vrstvu.

Vrstva zobrazení definuje uživatelské rozhraní pomocí značek XAML. Revize zahrnuje výrazy datových vazeb (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 in 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ď projekt restrukturalizujete tak, aby se vytvořila datová vrstva.

Oddělení zobrazení a modelu

Návod

Kód pro účely tohoto kurzu si můžete stáhnout nebo zobrazit z úložiště GitHub. Pokud chcete zobrazit kód, jak je v tomto kroku, podívejte se na toto potvrzení: stránka poznámek – model zobrazení.

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 Průzkumníku řešení klikněte pravým tlačítkem na WinUINotes projekt a vyberte Přidat>novou složku. Pojmenujte složku Models.

  2. Znovu klikněte pravým tlačítkem myši na WinUINotes projekt a vyberte Přidat>novou složku. 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ž přesunete soubor, Sada Visual Studio vás obvykle vyzve k upozornění na to, 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, pokud chcete upravit obor názvů přesunutého souboru. Vyberte Ne. Obor názvů 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 kódu na stránkách je nastaven na WinUINotes. Je potřeba ho aktualizovat na WinUINotes.Views.

  1. V podokně Průzkumník řešení rozbalte NotePage.xaml a zobrazte soubor kódu za kódem.

  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ý obor názvů se odkazuje prostřednictvím atributu x:Class , který definuje, který typ třídy je kódem 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"

Oprava odkazu 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 se namapovala pomocí local: mapování oboru názvů. Je běžné namapovat název local na kořenový obor názvů projektu a šablona projektu sady Visual Studio už to udělá za vás (xmlns:local="using:WinUINotes"). Teď, když se stránka přesunula do nového oboru názvů, mapování typů v XAML je teď neplatné.

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

  1. V podokně Průzkumník řešení 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 local názvů XAML byl použit k nastavení Frame.SourcePageType vlastnosti, takže ho změňte tam 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ě Průzkumník řešení klikněte pravým tlačítkem na Models složku a vyberte Přidat>třídu....

  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 Clickudálostí tlačítkaNotePage, ale další 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 metody vrací místovoid. 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é uchovávat odkaz na StorageFile poznámku, 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é. Chcete-li to provést, nastavte Filename vlastnost 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\ (Zobrazení),NotePage.xaml.cs pokud ještě není v editoru otevřený.

  2. Za poslední using příkaz v horní části stránky přidejte nový using příkaz, který dává kódu přístup ke třídám ve Models složce a oboru názvů.

    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. To představuje data poznámky, která NotePage poskytují zobrazení.

    private Note? noteModel;

  5. Také už obslužnou rutinu NotePage_Loaded události nepotřebujete. 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ů. Kód pro tento kód přidáte, když ho AllNotesPage přidáte 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 datová Text vazba.

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

  2. Text Přidejte do TextBox ovládacího prvku atribut. Svázání s Text vlastností noteModel: Text="{x:Bind noteModel.Text, Mode=TwoWay}".

  3. Header Aktualizujte vazbu na Date vlastnost noteModel: 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 TextBox.Text se vlastnosti a noteModel.Text vlastnosti 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 hodnotu, OneTime protože noteModel.Date se po vytvoření souboru nezmění. Tento kód také ukazuje výkonnou funkci x:Bind označovanou jako vazbu funkcí, která umožňuje použít funkci jako ToString 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í nastavení BindingMode v případě OneWay potřeby. 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ček se zpracovává v době kompilace. Některé z jeho výhod jsou lepší výkon a ověření doby kompilace vašich vazeb výrazů. 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, jak se dozvíte více 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 je to až do tohoto kurzu.

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