Projekt 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 a 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 tekinthetők meg:

Az itt felsorolt elemeket fogja elsődlegesen használni. Ezek a fájlok segítenek a WinUI 3 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. Az alkalmazás embléma helyőrző fájljaival kezdődik. Ez az embléma az alkalmazást a Windows Start menüjében, a Windows tálcán és a Microsoft Store-ban jeleníti meg, amikor az alkalmazást ott közzéteszi.

• 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. Ebben a projektben a MainWindow osztályra mutat.

• MainWindow.xaml és MainWindow.xaml.cs

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

• Package.appxmanifest

  Ezzel a csomagjegyzékfájllal konfigurálhatja a közzétevő adatait, emblémáit, processzorarchitektúráit és egyéb adatait, amelyek meghatározzák, hogyan jelenik meg az alkalmazás a Microsoft Store-ban.

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.

A .xaml általában két olyan fájl található, amely tartalmaz bármilyen XAML-fájlt, magát a fájlt és a hozzá tartozó kód mögötti fájlt, amely annak gyermekeleme.

• A .xaml fájl XAML-korrektúrát tartalmaz, amely meghatározza az alkalmazás felhasználói felületét. Az osztálynév deklarálva van az x:Class attribútummal.
• A kódfájl az XAML-korrektúra használatához létrehozott kódot és a metódus hívását InitializeComponent tartalmazza. Az osztály a .partial class

A projekt létrehozásakor a rendszer meghívja a InitializeComponent metódust a fájl elemzésére és a .xaml kódhoz partial class csatlakoztatott kód létrehozására a teljes osztály létrehozásához.

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 MainWindow projekthez tartozó osztály az XAML Ablak 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 nem ügyfél rész a 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 egy későbbi lépésben fogja hozzáadni.

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.

1. Kattintson duplán MainWindow.xaml a Megoldáskezelőben a megnyitásához.

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óval, kattintson a Mentés ikonra az eszközsávon, vagy válassza a Fájl>mentése MainPage.xaml menüt.

Ne aggódjon, ha nem érti, mit tesz ez az XAML-korrektúra. 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 korrektúra két különböző módon állíthat be tulajdonságokat 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. tetszik:

<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ővel bontsa ki a MainWindow.xaml bejegyzést, és tárja fel a MainWindow.xaml.cs fájlt. Kattintson duplán a fájlra a megnyitásához.

2. A konstruktorban MainWindowadja hozzá ezt a kódot a következő hívás InitializeComponentután:

   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 indítása> menüt.

Amikor most futtatja az alkalmazást, egy üres ablak jelenik meg, amelyen csillámháttér és a rendszer címsorát lecserélő XAML-címsáv látható.

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