Sdílet prostřednictvím

Vytvoření stránky pro poznámku

Teď vytvoříte stránku, která uživateli umožní upravit poznámku a pak napíšete kód pro uložení nebo odstranění poznámky.

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í: poznámková stránka – počáteční.

Nejprve přidejte novou stránku do projektu:

  1. V podokně Průzkumník řešení sady Visual Studio klikněte pravým tlačítkem myši na projekt >Přidat>novou položku....

  2. V dialogovém okně Přidat novou položku vyberte WinUI v seznamu šablon na levé straně okna. Dále vyberte šablonu Prázdná stránka (WinUI 3 ). Pojmenujte soubor NotePage.xamla pak vyberte Přidat.

  3. Soubor NotePage.xaml se otevře na nové kartě a zobrazí se všechny kódy XAML, které představují uživatelské rozhraní stránky. <Grid> ... </Grid> Nahraďte prvek v XAML následujícím kódem:

    <Grid Padding="16" RowSpacing="8">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="400"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <TextBox x:Name="NoteEditor"
         AcceptsReturn="True"
         TextWrapping="Wrap"
         PlaceholderText="Enter your note"
         Header="New note"
         ScrollViewer.VerticalScrollBarVisibility="Auto"
         Width="400"
         Grid.Column="1"/>

    <StackPanel Orientation="Horizontal"
            HorizontalAlignment="Right"
            Spacing="4"
            Grid.Row="1" Grid.Column="1">
        <Button Content="Save" Style="{StaticResource AccentButtonStyle}"/>
        <Button Content="Delete"/>
    </StackPanel>
</Grid>

  4. Uložte soubor stisknutím kombinace kláves CTRL+S, kliknutím na ikonu Uložit na panelu nástrojů nebo výběrem nabídky>NotePage.xaml .

    Pokud aplikaci spustíte právě teď, nezobrazí se stránka s poznámkami, kterou jste právě vytvořili. Je to proto, že ho stále potřebujete nastavit jako obsah Frame ovládacího prvku v MainWindow.

  5. Otevřete MainWindow.xaml a nastavte NotePage jako SourcePageType na následující Frame:

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

    Když teď aplikaci spustíte, Frame načte instanci NotePage a zobrazí ji uživateli.

Důležité

Mapování oboru názvů XAML (xmlns) jsou protějšek XAML příkazu jazyka C# using . local: je předpona mapovaná pro vás na stránkách XAML projektu aplikace (xmlns:local="using:WinUINotes"). Mapuje se tak, aby odkazoval na stejný obor názvů, který je vytvořený tak, aby obsahoval x:Class atribut a kód pro všechny soubory XAML včetně App.xaml. Pokud definujete vlastní třídy, které chcete použít v XAML v tomto stejném oboru názvů, můžete použít předponu local: k odkazování na vlastní typy v XAML.

Pojďme rozdělit klíčové části ovládacích prvků XAML umístěné na stránce:

Nové uživatelské rozhraní stránky poznámek se zvýrazněnou mřížkou v sadě Visual Studio

  • Grid.RowDefinitions a Grid.ColumnDefinitions definují mřížku se 2 řádky a 3 sloupci (umístěné pod záhlavím).

    • Dolní řádek se automaticky přizpůsobíAuto jeho obsahu, dvěma tlačítky. Horní řádek používá všechny zbývající svislé mezery (*).
    • Prostřední sloupec je 400epx široký a je místo, kde editor poznámek jde. Sloupce na obou stranách jsou prázdné a rozdělí všechny zbývající vodorovné mezery mezi ně (*).

    Poznámka:

    Vzhledem k tomu, jak funguje systém škálování, při návrhu aplikace XAML navrhujete efektivní pixely, nikoli skutečné fyzické pixely. Efektivní pixely (epx) jsou virtuální měrnou jednotkou a používají se k vyjádření rozměrů rozložení a mezer nezávisle na hustotě obrazovky.

  • <TextBox x:Name="NoteEditor" ... > ... </TextBox> je ovládací prvek pro zadávání textu (TextBox) nakonfigurovaný pro zadávání víceřádkového textu a je umístěn v horní prostřední buňce Grid (Grid.Column="1"). Indexy řádků a sloupců jsou založené na 0 a ve výchozím nastavení jsou ovládací prvky umístěny v řádku 0 a sloupci 0 nadřazeného Gridobjektu . Toto je tedy ekvivalent zadání řádku 0, sloupce 1.

  • <StackPanel Orientation="Horizontal" ... > ... </StackPanel> definuje ovládací prvek rozložení (StackPanel), který naskládá podřízené položky svisle (výchozí) nebo vodorovně. Je umístěn ve středu dolní buňky Grid (Grid.Row="1" Grid.Column="1").

    Poznámka:

    Grid.Row="1" Grid.Column="1" je příkladem připojených vlastností XAML. Připojené vlastnosti umožňují jednomu objektu XAML nastavit vlastnost, která patří do jiného objektu XAML. Podobně jako v tomto případě můžou podřízené prvky používat připojené vlastnosti k informování nadřazeného prvku o tom, jak mají být prezentovány v uživatelském rozhraní.

  • Uvnitř jsou <Button> dva <StackPanel> ovládací prvky a uspořádané vodorovně. Do další části přidáte kód pro zpracování událostí kliknutí na tlačítka.

Další informace najdete v dokumentaci:

Načtení a uložení poznámky

NotePage.xaml.cs Otevřete soubor kódu za kódem. Když přidáte nový soubor XAML, kód za sebou obsahuje jeden řádek v konstruktoru, volání InitializeComponent metody:

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        public NotePage()
        {
            this.InitializeComponent();
        }
    }
}

Metoda InitializeComponent přečte kód XAML a inicializuje všechny objekty definované značkou. Objekty jsou propojené ve svých relacích nadřazeného a podřízeného objektu a obslužné rutiny událostí definované v kódu jsou připojeny k událostem nastaveným v xaml.

Teď do souboru s kódem přidáte kód NotePage.xaml.cs pro zpracování načítání a ukládání poznámek.

  1. Do třídy přidejte následující deklarace proměnných NotePage :

    public sealed partial class NotePage : Page
{
    private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
    private StorageFile? noteFile = null;
    private string fileName = "note.txt";

    Když se poznámka uloží, uloží se do místního úložiště aplikace jako textový soubor.

    Třídu StorageFolder použijete pro přístup k místní datové složce aplikace. Tato složka je specifická pro vaši aplikaci, takže k poznámkám uloženým tady nemají přístup jiné aplikace. Třída StorageFile slouží pro přístup k textovému souboru uloženému v této složce. Název souboru je reprezentován proměnnou fileName . Prozatím nastavte fileName "note.txt".

  2. Vytvořte obslužnou rutinu události pro událost načtenou na stránce poznámek.

    public NotePage()
{
    this.InitializeComponent();
    // ↓ Add this. ↓
    Loaded += NotePage_Loaded;
}

// ↓ Add this event handler method. ↓
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);
    }
}

    V této metodě zavoláte TryGetItemAsync k načtení textového souboru ze složky. Pokud soubor neexistuje, vrátí null. Pokud soubor existuje, zavolejte ReadTextAsync ke čtení textu ze souboru do NoteEditor vlastnosti Text ovládacího prvku. (Nezapomeňte, že je NoteEditor to ovládací prvek, TextBox který jste vytvořili v souboru XAML. Tady na něj odkazujete v souboru s kódem pomocí x:Name přiřazeného souboru.)

    Důležité

    Tuto metodu musíte označit klíčovým slovem async , protože volání přístupu k souboru jsou asynchronní. Stručně řečeno, pokud zavoláte metodu, která končí ...Async (například TryGetItemAsync), můžete do volání přidat operátor await . Tím se následný kód počká, dokud se očekávané volání neskončí a nebude reagovat na uživatelské rozhraní. Při použití awaitmusí být metoda, ze které voláte, označena asynchronním klíčovým slovem. Další informace najdete v tématu Volání asynchronních rozhraní API v jazyce C#.

Další informace najdete v dokumentaci:

Přidání obslužných rutin událostí

Dále přidejte obslužné rutiny události Click pro tlačítka Uložit a Odstranit . Přidání obslužných rutin událostí je něco, co budete často dělat při vytváření aplikací, takže Visual Studio nabízí několik funkcí, které vám usnadní práci.

  1. NotePage.xaml V souboru umístěte kurzor za Content atribut v ovládacím prvku UložitButton. Zadejte Click=. V tomto okamžiku by sada Visual Studio měla zobrazit automaticky dokončené uživatelské rozhraní, které vypadá takto:

    Snímek obrazovky s novým uživatelským rozhraním obslužné rutiny události sady Visual Studio v editoru XAML

    • Stisknutím klávesy se šipkou dolů vyberte <Nová obslužná rutina> události a pak stiskněte klávesu Tab. Visual Studio dokončí atribut s Click="Button_Click" a přidá metodu obslužné rutiny události pojmenovanou Button_Click v NotePage.xaml.cs souboru kódu za kódem.

    Teď byste měli metodu Button_Click přejmenovat na něco smysluplnějšího. Provedete to v následujících krocích.

  2. V NotePage.xaml.csčásti vyhledejte metodu, která byla přidána za vás:

    private void Button_Click(object sender, RoutedEventArgs e)
{

}

    Návod

    Pokud chcete vyhledat kód v aplikaci, klikněte na tlačítko Hledat v záhlaví sady Visual Studio a použijte možnost Hledání kódu . Poklikáním na výsledek hledání otevřete kód v editoru kódu.

    Funkce vyhledávání v sadě Visual Studio

  3. Umístěte kurzor před "B" a Button zadejte Save. Chvíli počkejte a název metody se zvýrazní zelenou barvou.

  4. Když najedete myší na název metody, visual Studio zobrazí popisek s ikonou šroubováku nebo žárovky. Klikněte na tlačítko se šipkou dolů vedle ikony a potom klikněte na Přejmenovat Button_Click na SaveButton_Click.

    Metoda sady Visual Studio přejmenuje místní uživatelské rozhraní.

    Visual Studio přejmenuje metodu všude ve vaší aplikaci, včetně souboru XAML, do kterého jste ji poprvé přidali do Buttonsouboru .

  5. Opakujte tyto kroky pro tlačítko Delete a přejmenujte metodu na DeleteButton_Click.

Teď, když jsou obslužné rutiny událostí připojeny, můžete přidat kód pro uložení a odstranění souboru poznámky.

  1. Přidejte tento kód do SaveButton_Click metody pro uložení souboru. Všimněte si, že musíte také aktualizovat podpis metody klíčovým slovem async .

    private async void SaveButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is null)
    {
        noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
    }
    await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
}

    SaveButton_Click V metodě nejprve zkontrolujete, jestli noteFile se vytvořilo. Pokud ano null, musíte vytvořit nový soubor ve složce místního úložiště s názvem reprezentovaným proměnnou fileName a přiřadit soubor proměnné noteFile . Pak napíšete text v ovládacím TextBox prvku do souboru reprezentované noteFile.

  2. Přidejte tento kód do DeleteButton_Click metody pro odstranění souboru. Podpis metody je potřeba aktualizovat také tímto klíčovým slovem async .

    private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is not null)
    {
        await noteFile.DeleteAsync();
        noteFile = null;
        NoteEditor.Text = string.Empty;
    }
}

    DeleteButton_Click V metodě nejprve zkontrolujete, jestli noteFile existuje. Pokud ano, odstraňte soubor reprezentovaný noteFile z místní složky úložiště a nastavte noteFile na null. Potom resetujte text v ovládacím TextBox prvku na prázdný řetězec.

    Důležité

    Po odstranění textového souboru ze systému souborů je důležité nastavit noteFile .null Mějte na paměti, že noteFile je soubor StorageFile , který poskytuje přístup k systémovému souboru ve vaší aplikaci. Po odstranění systémového souboru stále odkazuje na místo, noteFile kde byl systémový soubor, ale neví, že už neexistuje. Pokud se teď pokusíte systémový soubor přečíst, zapsat nebo odstranit, zobrazí se chyba.

  3. Uložte soubor stisknutím kombinace kláves CTRL+S, kliknutím na ikonu Uložit na panelu nástrojů nebo výběrem nabídky>NotePage.xaml.cs .

Konečný kód pro soubor s kódem by měl vypadat takto:

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System;
using Windows.Storage;

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
        private StorageFile? noteFile = null;
        private string fileName = "note.txt";

        public NotePage()
        {
            this.InitializeComponent();
            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);
            }
        }

        private async void SaveButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is null)
            {
                noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
            }
            await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
        }

        private async void DeleteButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is not null)
            {
                await noteFile.DeleteAsync();
                noteFile = null;
                NoteEditor.Text = string.Empty;
            }
        }
    }
}

Otestování poznámky

S tímto kódem můžete aplikaci otestovat, abyste měli jistotu, že se poznámka uloží a načte správně.

  1. Sestavte a spusťte projekt stisknutím klávesy F5, klikněte na tlačítko Spustit "Start" na panelu nástrojů nebo výběrem nabídky Spustit>ladění.
  2. Zadejte text do textového pole a stiskněte tlačítko Uložit .
  3. Zavřete aplikaci a restartujte ji. Zadaná poznámka by se měla načíst z úložiště zařízení.
  4. Stiskněte tlačítko Odstranit .
  5. Zavřete aplikaci a restartujte ji. Měla by se zobrazit nová prázdná poznámka.

Důležité

Jakmile potvrdíte, že ukládání a odstraňování poznámek funguje správně, vytvořte a znovu uložte novou poznámku. V dalších krocích budete chtít uložit poznámku k otestování aplikace.

Pokračujte krokem 3 – přidání zobrazení a modelu poznámky

  • Last updated on