Project beállítása

Mielőtt elkezdené az alkalmazás kódolását, gyorsan áttekintjük a Visual Studio projektet, és gondoskodunk a projekt beállításáról. Amikor Visual Studio létrehoz egy WinUI 3-projektet, számos fontos mappa és kódfájl jön létre. Ezek a Visual Studio Megoldáskezelő paneljén láthatók:

Az itt felsorolt elemeket fogja elsődlegesen használni. Ezek a fájlok segítenek a WinUI-alkalmazás konfigurálásában és futtatásában. Minden fájl más célt szolgál, az alábbiakban leírtak szerint:

• Eszközök mappa

  Ez a mappa tartalmazza az alkalmazás emblémáját, képeit és egyéb médiaeszközeit. Alkalmazása logójához használt helyőrző fájlokkal kezdődik. Ez az embléma az alkalmazást a Windows Start menüben, a Windows tálcán, valamint a Microsoft Store az alkalmazás ott való közzétételekor jeleníti meg.

• App.xaml és App.xaml.cs

  A App.xaml fájl alkalmazásszintű XAML-erőforrásokat, például színeket, stílusokat vagy sablonokat tartalmaz. A App.xaml.cs fájl általában olyan kódot tartalmaz, amely példányosítja és aktiválja az alkalmazásablakot. Ez a projekt a MainWindow osztályra mutat.

• MainWindow.xaml és MainWindow.xaml.cs

  Ezek a fájlok az alkalmazás ablakát jelölik.

• Package.appxmanifest

  Ez a package jegyzékfájl lehetővé teszi a közzétevők adatainak, emblémáinak, processzorarchitektúráinak és egyéb adatainak konfigurálását, amelyek meghatározzák, hogyan jelenik meg az alkalmazás a Microsoft Store.

XAML-fájlok és részleges osztályok

Az Extensible Application Markup Language (XAML) egy deklaratív nyelv, amely inicializálhatja az objektumokat és beállíthatja az objektumok tulajdonságait. A deklaratív XAML jelölőnyelvben látható felhasználói felületi elemeket hozhat létre. Ezután hozzárendelhet egy külön kódfájlt minden XAML-fájlhoz (általában kód mögötti fájlhoz), amely képes reagálni az eseményekre, és módosíthatja az eredetileg XAML-ben deklarált objektumokat.

Az XAML-fájl általában két fájlból áll, maga a .xaml fájl, valamint egy kód mögötti fájl, amely a Megoldáskezelő gyermekeleme.

• A .xaml fájl XAML-jelölést tartalmaz, amely meghatározza az alkalmazás UI-ját. Az osztálynév deklarálva van az x:Class attribútummal.
• A kódfájl tartalmazza az Ön által létrehozott kódot, amely a XAML-jelöléssel való interakcióhoz és a InitializeComponent metódus meghívásához szükséges. Az osztály partial class-ként van meghatározva.

A project létrehozásakor a rendszer meghívja a InitializeComponent metódust a .xaml fájl elemzéséhez, és a teljes osztály létrehozásához a partial class kódhoz csatlakoztatott kódot generál.

További információ a dokumentumokban:

• Az XAML áttekintése
• Részleges osztályok és módszerek (C# programozási útmutató)
• x:Osztályattribútum, x:Osztályirányirány

MainWindow frissítése

A project MainWindow osztály az XAML Window osztály alosztálya, amely az alkalmazás felületének meghatározására szolgál. Az alkalmazás ablakának két része van:

• Az ablak ügyféloldali része a tartalom helye.
• A non-client rész az Windows operációs rendszer által szabályozott rész. Tartalmazza a címsort, ahol a feliratvezérlők (Min/Max/Close gombok), az alkalmazás ikonja, a cím és az húzási terület található. A keret az ablak külső részén is megtalálható.

Ha azt szeretné, hogy a WinUI Notes alkalmazás összhangban legyen a Fluent tervezési irányelveivel, néhány módosítást kell végeznie.MainWindow Először a Mica anyagot fogja alkalmazni az ablak háttereként. A Mica egy átlátszatlan, dinamikus anyag, amely témát és asztali háttérképet tartalmaz az ablak hátterének festéséhez. Ezután kiterjeszti az alkalmazás tartalmát a címsor területére, és lecseréli a rendszer címsorát egy XAML címsáv vezérlőelemre. Így jobban kihasználhatja a helyet, és jobban szabályozhatja a kialakítást, miközben a címsorhoz szükséges összes funkciót biztosítja.

Az ablak tartalmaként egy keret is hozzáadva lesz. Az Frame osztály a Lap osztálysal együttműködve lehetővé teszi, hogy navigáljon az alkalmazásban található tartalomoldalak között. A lapokat későbbi lépésben adod hozzá.

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: note page – initial.

1. A megnyitáshoz kattintson duplán a MainWindow.xamlMegoldáskezelő fájlban.

2. A nyitó és a záró<Window.. > címkék között cserélje le a meglévő XAML-eket a következőre:

   <Window.SystemBackdrop>
       <MicaBackdrop Kind="Base"/>
   </Window.SystemBackdrop>
   
   <Grid>
       <Grid.RowDefinitions>
           <!-- Title Bar -->
           <RowDefinition Height="Auto" />
           <!-- App Content -->
           <RowDefinition Height="*" />     
       </Grid.RowDefinitions>
       <TitleBar x:Name="AppTitleBar"
                 Title="WinUI Notes">
           <TitleBar.IconSource>
               <FontIconSource Glyph="&#xF4AA;"/>
           </TitleBar.IconSource>
       </TitleBar>
   
       <!-- App content -->
       <Frame x:Name="rootFrame" Grid.Row="1"/>
   </Grid>
   

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 MainWindow.xamlmenüre kattintva.

Ne aggódjon, ha nem érti, hogy mit csinál ez a XAML-jelölés jelenleg. Az alkalmazás többi felhasználói felületének összeállítása során részletesebben ismertetjük az XAML-fogalmakat.

Megjegyzés:

Ebben a jelölésben két különböző módot láthat, hogyan lehet tulajdonságokat beállítani az XAML-ben. Az első és legrövidebb módszer az XAML attribútum szintaxisának használata, például: <object attribute="value">. Ez nagyszerűen használható egyszerű értékekhez, például <MicaBackdrop Kind="Base"/>. De csak olyan értékeknél működik, ahol az XAML-elemző tudja, hogyan konvertálhatja a sztringet a várt értéktípusra.

Ha a tulajdonság értéke összetettebb, vagy az XAML-elemző nem tudja, hogyan konvertálja, a tulajdonságelem szintaxisával kell létrehoznia az objektumot. így:

<object ... >
    <object.property>
        value
    </object.property>
</object>

A tulajdonság beállításához például a Window.SystemBackdrop tulajdonságelem szintaxisát kell használnia, és explicit módon létre kell hoznia az MicaBackdrop elemet. A tulajdonság beállításához azonban használhat egyszerű attribútumszintaxisokat MicaBackdrop.Kind .

<Window ... >
   <Window.SystemBackdrop>
       <MicaBackdrop Kind="Base"/>
   </Window.SystemBackdrop>
    ...
</Window>

In MainWindow.xaml, <Window.SystemBackdrop>, <Grid.RowDefinitions>és <TitleBar.IconSource> olyan összetett értékeket tartalmaz, amelyeket tulajdonságelem-szintaxissal kell beállítani.

További információ a dokumentumokban:

• XAML-szintaxisi útmutató

Ha most futtatja az alkalmazást, megjelenik a hozzáadott XAML-elem TitleBar , de a rendszer címsora alatt lesz, amely továbbra is látható.

A rendszer címsorának cseréjéhez meg kell írnia egy kis kódot.

1. Nyissa meg MainWindow.xaml.cs. A mögöttes MainWindow.xaml kód (vagy bármely XAML-fájl) három módon nyitható meg:

   • Ha a MainWindow.xaml fájl meg van nyitva, és az aktív dokumentum szerkesztése folyamatban van, nyomja le az F7 billentyűt.
   • Ha a MainWindow.xaml fájl meg van nyitva, és az aktív dokumentum szerkesztése folyamatban van, kattintson a jobb gombbal a szövegszerkesztőben, és válassza a Kód megtekintése lehetőséget.
   • A Megoldáskezelő használatával bontsa ki a MainWindow.xaml bejegyzést, és felfedje a MainWindow.xaml.cs fájlt. Kattintson duplán a fájlra a megnyitásához.

2. A(z) MainWindow konstruktorban ezt a kódot a InitializeComponent hívás után adja hozzá:

   public MainWindow()
   {
       this.InitializeComponent();
   
       // ↓ Add this. ↓
       // Hide the default system title bar.
       ExtendsContentIntoTitleBar = true;
       // Replace system title bar with the WinUI TitleBar.
       SetTitleBar(AppTitleBar);
       // ↑ Add this. ↑
   }
   

   Az ExtendsContentIntoTitleBar tulajdonság elrejti az alapértelmezett rendszercímsávot, és kiterjeszti az alkalmazás XAML-ét erre a területre. A SetTitleBar hívása ezután arra utasítja a rendszert, hogy a megadott XAML-elemet (AppTitleBar) kezelje az alkalmazás címsoraként.

3. 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> menüt.

Most, amikor futtatja az alkalmazást, egy üres ablakot lát mica háttérrel és a rendszer címsorát lecserélő XAML-címsávval.

Folytassa a 2. lépéssel – Jegyzetoldal hozzáadása