Dela via

Skapa en sida för en anteckning

Nu ska du skapa en sida som gör att en användare kan redigera en anteckning och sedan skriva koden för att spara eller ta bort anteckningen.

Tips/Råd

Du kan ladda ned eller visa koden för den här självstudien från GitHub-lagringsplatsen. Om du vill se koden som den är i det här steget kan du läsa den här incheckningssidan: anteckningssida – initial.

Lägg först till den nya sidan i projektet:

  1. I fönstret Solution Explorer i Visual Studio högerklickar du på WinUINotes-projektet>Lägg till>nytt objekt....

  2. I dialogrutan Lägg till nytt objekt väljer du WinUI i malllistan till vänster i fönstret. Välj sedan mallen Tom sida (WinUI 3). Ge filen NotePage.xamlnamnet och välj sedan Lägg till.

  3. Filen NotePage.xaml öppnas på en ny flik och visar alla XAML-markeringar som representerar sidans användargränssnitt. Ersätt elementet <Grid> ... </Grid> i XAML med följande markering:

    <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. Spara filen genom att trycka på CTRL + S, klicka på ikonen Spara i verktygsfältet eller genom att välja menyn Spara>NotePage.xaml .

    Om du kör appen just nu visas inte anteckningssidan som du nyss skapade. Det beror på att du fortfarande behöver ange den som innehållet i Frame kontrollen i MainWindow.

  5. Öppna MainWindow.xaml och ange NotePage som SourcePageType på Frame, så här:

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

    Nu när du kör appen Frame läser in en instans av NotePage och visar den för användaren.

Viktigt!

XAML-namnområdesmappningar (xmlns) är XAML-motsvarigheten till C#- using instruktionen. local: är ett prefix som mappas åt dig inom XAML-sidorna för ditt appprojekt (xmlns:local="using:WinUINotes"). Den mappas för att referera till samma namnområde som har skapats för att innehålla x:Class attributet och koden för alla XAML-filer, inklusive App.xaml. Så länge du definierar anpassade klasser som du vill använda i XAML i samma namnområde kan du använda prefixet local: för att referera till dina anpassade typer i XAML.

Nu ska vi dela upp de viktigaste delarna i XAML-kontrollerna som finns på sidan:

Det nya användargränssnittet för anteckningssidan med rutnätet markerat av Visual Studio.

  • Grid.RowDefinitions och Grid.ColumnDefinitions definierar ett rutnät med 2 rader och 3 kolumner (placerade under namnlisten).

    • Den nedre raden är automatiskt (Auto) storleksanpassad för att passa innehållet, de två knapparna. Den översta raden använder allt återstående lodräta utrymme (*).
    • Den mellersta kolumnen är 400epx bred och är dit anteckningsredigeraren går. Kolumnerna på båda sidor är tomma och delar upp allt återstående vågräta utrymme mellan dem (*).

    Anmärkning

    På grund av hur skalningssystemet fungerar utformar du effektiva pixlar, inte faktiska fysiska bildpunkter, när du utformar din XAML-app. Effektiva pixlar (epx) är en virtuell måttenhet och används för att uttrycka layoutdimensioner och avstånd, oberoende av skärmdensitet.

  • <TextBox x:Name="NoteEditor" ... > ... </TextBox> är en textinmatningskontroll (Textbox) som konfigurerats för textpost med flera rader och placeras i den övre mittencellen i Grid (Grid.Column="1"). Rad- och kolumnindex är 0-baserade och som standard placeras kontrollerna i rad 0 och kolumn 0 i den överordnade Grid. Det motsvarar alltså att ange rad 0, kolumn 1.

  • <StackPanel Orientation="Horizontal" ... > ... </StackPanel> definierar en layoutkontroll (StackPanel) som staplar underordnade objekt lodrätt (standard) eller vågrätt. Den placeras i den nedre mittencellen i Grid (Grid.Row="1" Grid.Column="1").

    Anmärkning

    Grid.Row="1" Grid.Column="1" är ett exempel på XAML-kopplade egenskaper. Med anslutna egenskaper kan ett XAML-objekt ange en egenskap som tillhör ett annat XAML-objekt. Som i det här fallet kan underordnade element ofta använda bifogade egenskaper för att informera sitt överordnade element om hur de ska visas i användargränssnittet.

  • Två <Button> kontroller finns inuti <StackPanel> och ordnade vågrätt. Du lägger till koden för att hantera knapparna Klicka på händelser i nästa avsnitt.

Läs mer i dokumenten:

Läsa in och spara en anteckning

NotePage.xaml.cs Öppna filen bakom koden. När du lägger till en ny XAML-fil innehåller koden bakom en enda rad i konstruktorn, ett anrop till metoden InitializeComponent:

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

Metoden InitializeComponent läser XAML-markering och initierar alla objekt som definieras av markering. Objekten är anslutna i sina överordnade och underordnade relationer, och de händelsehanterare som definierats i kod kopplas till händelser som anges i XAML.

Nu ska du lägga till kod i NotePage.xaml.cs filen bakom koden för att hantera inläsning och sparande av anteckningar.

  1. Lägg till följande variabeldeklarationer i NotePage klassen:

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

    När en anteckning sparas sparas den i appens lokala lagring som en textfil.

    Du använder klassen StorageFolder för att komma åt appens lokala datamapp. Den här mappen är specifik för din app, så anteckningar som sparas här kan inte nås av andra appar. Du använder klassen StorageFile för att komma åt textfilen som sparats i den här mappen. Namnet på filen representeras av variabeln fileName. För tillfället anger du fileName till "note.txt".

  2. Skapa en händelsehanterare för anteckningssidans inlästa händelse.

    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);
    }
}

    I den här metoden anropar du TryGetItemAsync för att hämta textfilen från mappen. Om filen inte finns returneras null. Om filen finns anropar du ReadTextAsync för att läsa texten från filen till NoteEditor kontrollens textegenskap. (Kom ihåg att NoteEditor är kontrollen TextBox du skapade i XAML-filen. Du refererar till den här i din kod bakom-fil med hjälp av den x:Name du har tilldelat till den.)

    Viktigt!

    Du måste markera den här metoden med nyckelordet async eftersom filåtkomstanropen är asynkrona. Kort och gott, om du anropar en metod som slutar i ...Async (till exempel TryGetItemAsync) kan du lägga till inväntningsoperatorn i anropet. Detta hindrar efterföljande kod från att köras tills det väntade anropet har slutförts och håller användargränssnittet responsivt. När du använder awaitmåste den metod som du anropar från markeras med nyckelordet async . Mer information finns i Anropa asynkrona API:er i C#.

Läs mer i dokumenten:

Lägga till händelsehanterare

Lägg sedan till klicka händelsehanterare för för knapparna Spara och Ta bort . Att lägga till händelsehanterare är något som du gör ofta när du skapar dina appar, så Visual Studio har flera funktioner som gör det enklare.

  1. NotePage.xaml Placera markören efter Content attributet i kontrollen SparaButton i filen. Skriv Click=. Nu bör Visual Studio visa ett automatiskt komplett användargränssnitt som ser ut så här:

    En skärmbild av det nya användargränssnittet för den nya händelsehanteraren i Visual Studio i XAML-redigeraren

    • Tryck på nedåtpilen för att välja <Ny händelsehanterare> och tryck sedan på Tabb. Visual Studio slutför attributet med Click="Button_Click" och lägger till en händelsehanterarmetod med namnet Button_Click i NotePage.xaml.cs filen bakom koden.

    Nu bör du byta namn på Button_Click metoden till något mer meningsfullt. Det gör du i följande steg.

  2. I NotePage.xaml.cshittar du den metod som lades till åt dig:

    private void Button_Click(object sender, RoutedEventArgs e)
{

}

    Tips/Råd

    Om du vill hitta kod i din app klickar du på Sök i Visual Studio-namnlisten och använder alternativet Kodsökning . Dubbelklicka på sökresultatet för att öppna koden i kodredigeraren.

    Sökfunktion i Visual Studio

  3. Placera markören före "B" i Button och skriv Save. Vänta en stund så markeras metodnamnet i grönt.

  4. När du hovra över metodnamnet visar Visual Studio en knappbeskrivning med en skruvmejsel eller glödlampa. Klicka på nedpilen bredvid ikonen och klicka sedan på Byt namn på "Button_Click" till "SaveButton_Click".

    Visual Studio-metoden byter namn på popup-användargränssnittet.

    Visual Studio byter namn på metoden överallt i din app, inklusive i XAML-filen där du först lade till den i Button.

  5. Upprepa de här stegen för knappen Ta bort och byt namn på metoden till DeleteButton_Click.

Nu när händelsehanterarna är anslutna kan du lägga till koden för att spara och ta bort anteckningsfilen.

  1. Lägg till den SaveButton_Click här koden i metoden för att spara filen. Observera att du också måste uppdatera metodsignaturen med nyckelordet 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 I metoden kontrollerar du först om noteFile har skapats. Om det är måste du skapa en ny fil i den lokala lagringsmappen nullmed namnet som representeras av variabeln fileName och tilldela filen till variabeln noteFile . Sedan skriver du texten i TextBox kontrollen till filen som representeras av noteFile.

  2. Lägg till den DeleteButton_Click här koden i metoden för att ta bort filen. Du måste också uppdatera metodsignaturen med nyckelordet async här.

    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 I metoden kontrollerar du först om noteFile det finns. Om den gör det tar du bort filen som representeras av noteFile från den lokala lagringsmappen och anger noteFile till null. Återställ sedan texten i TextBox kontrollen till en tom sträng.

    Viktigt!

    När textfilen har tagits bort från filsystemet är det viktigt att ange noteFile till null. Kom ihåg att noteFile är en StorageFile som ger åtkomst till systemfilen i din app. När systemfilen har tagits noteFile bort pekar den fortfarande på den plats där systemfilen fanns, men vet inte att den inte längre finns. Om du försöker läsa, skriva eller ta bort systemfilen nu får du ett fel.

  3. Spara filen genom att trycka på CTRL + S, klicka på ikonen Spara i verktygsfältet eller genom att välja menyn Spara>NotePage.xaml.cs .

Den sista koden för filen bakom koden bör se ut så här:

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;
            }
        }
    }
}

Testa anteckningen

Med den här koden på plats kan du testa appen för att se till att anteckningen sparas och läses in korrekt.

  1. Skapa och kör projektet genom att trycka på F5, klicka på knappen Felsöka "Start" i verktygsfältet eller genom att välja menyn Kör>startfelsökning.
  2. Skriv i textrutan och tryck på knappen Spara .
  3. Stäng appen och starta sedan om den. Den angivna anteckningen ska läsas in från enhetens lagring.
  4. Tryck på knappen Ta bort .
  5. Stäng appen och starta om den. Du bör få en ny tom anteckning.

Viktigt!

När du har bekräftat att det fungerar korrekt att spara och ta bort en anteckning skapar och sparar du en ny anteckning igen. Du vill ha en sparad anteckning för att testa appen i senare steg.

Fortsätt till steg 3 – Lägg till en vy och modell för anteckningen

  • Last updated on