Megosztás:

Lap létrehozása jegyzethez

Most létrehoz egy lapot, amely lehetővé teszi, hogy a felhasználó szerkessze a jegyzetet, majd megírja a kódot a jegyzet mentéséhez vagy törléséhez.

Jótanács

Az oktatóanyag kódját a GitHub-adattárból töltheti le vagy tekintheti meg. A jelen lépésben szereplő kód megtekintéséhez tekintse meg a következő véglegesítést: jegyzetoldal – kezdeti.

Először adja hozzá az új lapot a projekthez:

  1. A Visual Studio Megoldáskezelő paneljén kattintson a jobb gombbal az Új elem hozzáadása>WinUINotes>

  2. Az Új elem hozzáadása párbeszédpanelen válassza a WinUI lehetőséget az ablak bal oldalán található sablonlistában. Ezután válassza ki az Üres lap (WinUI 3) sablont. Nevezze el a fájlt NotePage.xaml, majd válassza a Hozzáadás lehetőséget.

  3. A NotePage.xaml fájl egy új lapon nyílik meg, amely megjeleníti az oldal felhasználói felületét képviselő összes XAML-jelölőt. Cserélje le az <Grid> ... </Grid> XAML elemét a következő korrektúrára:

    <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. Mentse a fájlt a CTRL+ S billentyűkombináció lenyomásával, az eszközsáv Mentés ikonjára kattintva vagy a Fájl>mentése NotePage.xamlmenüre kattintva.

    Ha most futtatja az alkalmazást, nem fogja látni az imént létrehozott jegyzetoldalt. Ennek az az oka, hogy továbbra is be kell állítania a vezérlőelem tartalmaként a Frame következőben MainWindow: .

  5. Nyissa meg MainWindow.xaml és állítsa be NotePageSourcePageType-ként a Framekövetkező módon:

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

    Most, amikor futtatja az alkalmazást, a Frame rendszer betölt egy példányt NotePage , és megjeleníti azt a felhasználónak.

Fontos

Az XAML-névtér (xmlns) leképezései a C# using utasítás XAML-megfelelője. local: egy előtag, amely az alkalmazásprojekt XAML-oldalain (xmlns:local="using:WinUINotes") van leképezve. A rendszer arra a névtérre hivatkozik, amely az összes XAML-fájl attribútumát és kódját tartalmazza x:Class , beleértve App.xamla . Ha az XAML-ben azonos névtérben használni kívánt egyéni osztályokat definiálja, az local: előtaggal hivatkozhat az XAML egyéni típusaira.

Bontsuk le az oldalon elhelyezett XAML-vezérlők főbb részeit:

Az új jegyzetoldal felhasználói felülete a Visual Studio által kiemelt rácskal.

  • A Grid.RowDefinitions és a Grid.ColumnDefinitions egy 2 sorból és 3 oszlopból álló rácsot határoz meg (a címsor alatt).

    • Az alsó sor automatikusan (Auto) úgy van méretezve, hogy illeszkedjen a tartalmához, a két gombhoz. A felső sor az összes fennmaradó függőleges területet (*) használja.
    • A középső oszlop 400epx széles, és a jegyzetszerkesztő oda kerül. A két oldalon lévő oszlopok üresek, és a fennmaradó vízszintes térközt felosztják közöttük (*).

    Megjegyzés:

    A skálázási rendszer működése miatt az XAML-alkalmazás tervezésekor hatékony képpontokkal tervez, nem tényleges fizikai képpontokkal. Az effektív képpontok (epx) virtuális mértékegységek, és a képernyő sűrűségétől független elrendezési méretek és térközök kifejezésére szolgálnak.

  • <TextBox x:Name="NoteEditor" ... > ... </TextBox>egy többsoros szövegbevitelhez konfigurált szövegbevitel-vezérlő (TextBox), amely a (Grid) felső középső cellájába Grid.Column="1" kerül. A sor- és oszlopindexek 0-alapúak, és alapértelmezés szerint a vezérlők a szülő Grid0. és 0. sorába kerülnek. Ez tehát a 0. sor 1. oszlopának megadásával egyenértékű.

  • <StackPanel Orientation="Horizontal" ... > ... </StackPanel> Egy elrendezésvezérlőt (StackPanel) határoz meg, amely függőlegesen (alapértelmezett) vagy vízszintesen veri a gyermekeket. A(z) (Grid) alsó középső cellájába Grid.Row="1" Grid.Column="1" kerül.

    Megjegyzés:

    Grid.Row="1" Grid.Column="1" egy példa az XAML-hez csatolt tulajdonságokra. A csatolt tulajdonságok lehetővé teszik, hogy egy XAML-objektum egy másik XAML-objektumhoz tartozó tulajdonságot állítson be. Gyakran előfordul, hogy a gyermekelemek a csatolt tulajdonságok használatával tájékoztatják a szülőelemet arról, hogyan jelenjenek meg a felhasználói felületen.

  • Két <Button> vezérlő található a <StackPanel> belsejében, és vízszintesen vannak elrendezve. A következő szakaszban a gombok kattintási eseményeit kezelő kódot fogja hozzáadni.

További információ a dokumentumokban:

Jegyzet betöltése és mentése

Nyissa meg a NotePage.xaml.cs kód mögötti fájlt. Új XAML-fájl hozzáadásakor a mögöttes kód egyetlen sort tartalmaz a konstruktorban, a InitializeComponent metódus hívását:

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

A InitializeComponent metódus beolvassa az XAML-korrektúrát, és inicializálja a korrektúra által definiált összes objektumot. Az objektumok a szülő-gyermek kapcsolatokban vannak összekapcsolva, és a kódban definiált eseménykezelők az XAML-ben beállított eseményekhez vannak csatolva.

Most kódot fog hozzáadni a kód mögötti fájlhoz a NotePage.xaml.cs jegyzetek betöltésének és mentésének kezeléséhez.

  1. Adja hozzá a következő változódeklarációkat az NotePage osztályhoz:

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

    A jegyzetek mentésekor a rendszer szövegfájlként menti az alkalmazás helyi tárhelyére.

    A StorageFolder osztály használatával érheti el az alkalmazás helyi adatmappáját. Ez a mappa az alkalmazásra vonatkozik, ezért az itt mentett jegyzeteket más alkalmazások nem érhetik el. A StorageFile osztály használatával érheti el a mappában mentett szövegfájlt. A fájl nevét a fileName változó jelöli. Egyelőre állítsa a "fileName" értéket.

  2. Hozzon létre egy eseménykezelőt a jegyzetoldal Betöltött eseményéhez.

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

    Ebben a metódusban meghívja a TryGetItemAsync parancsot , hogy lekérje a szövegfájlt a mappából. Ha a fájl nem létezik, visszaadja a következőt null: . Ha a fájl létezik, hívja meg a ReadTextAsync parancsot , hogy beolvassa a szöveget a fájlból a NoteEditor vezérlő Szöveg tulajdonságába. (Ne feledje, NoteEditor hogy az TextBox XAML-fájlban létrehozott vezérlő. Itt hivatkozhat rá a kód mögötti fájlban a x:Name hozzá rendelt fájl használatával.)

    Fontos

    Ezt a metódust a async kulcsszóval kell megjelölnie, mert a fájlelérési hívások aszinkronok. Röviden, ha egy (például) ...Asyncvégződésű TryGetItemAsync metódust hív meg, hozzáadhatja a várakozási operátort a híváshoz. Ez megakadályozza a következő kód végrehajtását, amíg a várt hívás be nem fejeződik, és a felhasználói felület rugalmas marad. Ha használja await, az aszinkron kulcsszóval kell megjelölni a meghívni kívánt metódust. További információ: Aszinkron API-k meghívása C#-ban.

További információ a dokumentumokban:

Eseménykezelők hozzáadása

Ezután adja hozzá a Mentés és törlés gomb kattintási eseménykezelőinek elemét. Az eseménykezelők hozzáadása gyakran történik az alkalmazások létrehozásakor, így a Visual Studio számos funkciót kínál a könnyebbé tétele érdekében.

  1. A fájlban helyezze a NotePage.xaml kurzort az Content attribútum mögé a MentésButton vezérlőben. Gépelje be: Click=. Ezen a ponton a Visual Studiónak elő kell állítania egy automatikusan kitöltendő felhasználói felületet, amely így néz ki:

    Képernyőkép a Visual Studio új eseménykezelőjének automatikus teljes felhasználói felületéről az XAML-szerkesztőben

    • Nyomja le a lefelé mutató nyílbillentyűt az Új eseménykezelő< kiválasztásához>, majd nyomja le a Tab billentyűt. A Visual Studio az attribútumot a kód mögötti fájlban Click="Button_Click" elnevezett Button_Click eseménykezelő metódussal NotePage.xaml.cs egészíti ki és adja hozzá.

    Most nevezze át a metódust Button_Click valami értelmesebbre. Ezt a következő lépésekben teheti meg.

  2. Keresse NotePage.xaml.csmeg az Önhöz hozzáadott metódust:

    private void Button_Click(object sender, RoutedEventArgs e)
{

}

    Jótanács

    Ha meg szeretné keresni a kódot az alkalmazásban, kattintson a Keresés gombra a Visual Studio címsorában, és használja a Kódkeresés lehetőséget. Kattintson duplán a keresési eredményre a kódszerkesztőben való megnyitásához.

    Keresési funkció a Visual Studióban

  3. Helyezze a kurzort a "B" elé, és írja be a következőt ButtonSave: Várjon egy kis időt, és a metódus neve zöld színnel lesz kiemelve.

  4. Ha a metódus nevére mutat, a Visual Studio egy elemleírást jelenít meg egy csavarhúzóval vagy villanykörte ikonnal. Kattintson az ikon melletti lefelé mutató nyílra, majd a "Button_Click" átnevezése a következőre: "SaveButton_Click".

    A Visual Studio metódus átnevezi az előugró felhasználói felületet.

    A Visual Studio mindenhol átnevezi a metódust az alkalmazásban, beleértve azt az XAML-fájlt is, amelyben először hozzáadta a Buttonmetódushoz.

  5. Ismételje meg ezeket a lépéseket a Törlés gombnál, és nevezze át a metódust a következőre DeleteButton_Click: .

Az eseménykezelők csatlakoztatása után hozzáadhatja a kódot a jegyzetfájl mentéséhez és törléséhez.

  1. A fájl mentéséhez adja hozzá ezt a SaveButton_Click kódot a metódushoz. Figyelje meg, hogy a metódus aláírását is frissítenie kell a async kulcsszóval.

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

    A metódusban SaveButton_Click először ellenőrizze, hogy létrejött-e noteFile . Ha így van null, akkor létre kell hoznia egy új fájlt a helyi tármappában a változó által fileName képviselt névvel, és hozzá kell rendelnie a fájlt a noteFile változóhoz. Ezután a vezérlőelemben lévő TextBox szöveget az általa noteFileképviselt fájlba írja.

  2. Adja hozzá ezt a kódot a DeleteButton_Click fájl törléséhez a metódusban. Itt is frissítenie kell a metódus-aláírást a async kulcsszóval.

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

    A metódusban DeleteButton_Click először ellenőrizze, hogy létezik-e noteFile . Ha igen, törölje a helyi tármappa által noteFile képviselt fájlt, és állítsa be noteFile a következőre null: . Ezután állítsa vissza a vezérlőelem szövegét TextBox egy üres sztringre.

    Fontos

    Miután törölte a szövegfájlt a fájlrendszerből, fontos a beállításnoteFile.null Ne feledje, hogy noteFile ez egy StorageFile , amely hozzáférést biztosít az alkalmazás rendszerfájljához. A rendszerfájl törlése után továbbra is arra mutat, noteFile hogy hol volt a rendszerfájl, de nem tudja, hogy már nem létezik. Ha most megpróbálja elolvasni, írni vagy törölni a rendszerfájlt, hibaüzenet jelenik meg.

  3. Mentse a fájlt a CTRL+ S billentyűkombináció lenyomásával, az eszközsáv Mentés ikonjára kattintva vagy a Fájl>mentése NotePage.xaml.csmenüre kattintva.

A kód mögötti fájl végső kódjának a következőképpen kell kinéznie:

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

A jegyzet tesztelése

Ezzel a kóddal tesztelheti az alkalmazást, így meggyőződhet arról, hogy a jegyzet mentése és betöltése megfelelően történik.

  1. A projekt létrehozásához és futtatásához nyomja le az F5 billentyűt, kattintson a Hibakeresés "Start" gombra az eszközsávon, vagy válassza a Hibakeresés indítása> menüt.
  2. Írja be a szövegbeviteli mezőbe, és nyomja le a Mentés gombot.
  3. Zárja be az alkalmazást, majd indítsa újra. A megadott megjegyzést az eszköz tárolójából kell betölteni.
  4. Nyomja le a Delete (Törlés ) gombot.
  5. Zárja be az alkalmazást, indítsa újra. Új üres jegyzetet kell bemutatnia.

Fontos

Miután meggyőződött arról, hogy a jegyzet mentése és törlése helyesen működik, hozzon létre és mentsen újra egy új jegyzetet. Egy mentett jegyzetet szeretne készíteni az alkalmazás későbbi lépésekben való teszteléséhez.

Folytassa a 3. lépéssel – Nézet és modell hozzáadása a jegyzethez

  • Last updated on