Projekteinrichtung

Bevor Sie mit der Codierung der App beginnen, werfen wir einen schnellen Blick auf das Visual Studio-Projekt und kümmern uns um die Projekteinrichtung. Wenn Visual Studio ein WinUI 3-Projekt erstellt, werden mehrere wichtige Ordner und Codedateien generiert. Diese sind im Bereich Projektmappen-Explorer von Visual Studio zu sehen:

Die hier aufgeführten Elemente sind die Elemente, mit denen Sie in erster Linie interagieren. Diese Dateien helfen beim Konfigurieren und Ausführen der WinUI 3-App. Jede Datei dient einem anderen Zweck, wie unten beschrieben:

• Ordner "Assets"

  Dieser Ordner enthält das Logo, Bilder und andere Medienressourcen Ihrer App. Sie beginnt mit Platzhalterdateien für das Logo Ihrer App aufgefüllt. Dieses Logo stellt Ihre App im Windows-Startmenü, der Windows-Taskleiste und im Microsoft Store dar, wenn Ihre App dort veröffentlicht wird.

• App.xaml und App.xaml.cs

  Die App.xaml Datei enthält appweite XAML-Ressourcen, z. B. Farben, Stile oder Vorlagen. Die App.xaml.cs Datei enthält im Allgemeinen Code, der das Anwendungsfenster instanziiert und aktiviert. In diesem Projekt verweist sie auf die Klasse MainWindow.

• MainWindow.xaml und MainWindow.xaml.cs

  Diese Dateien stellen das Fenster Ihrer App dar.

• Package.appxmanifest

  Mit dieser Paketmanifestdatei können Sie Herausgeberinformationen, Logos, Prozessorarchitekturen und andere Details konfigurieren, die bestimmen, wie Ihre App im Microsoft Store angezeigt wird.

XAML-Dateien und Partielle Klassen

Extensible Application Markup Language (XAML) ist eine deklarative Sprache, die Objekte initialisieren und Eigenschaften von Objekten festlegen kann. Sie können sichtbare UI-Elemente im deklarativen XAML-Markup erstellen. Anschließend können Sie eine separate Codedatei für jede XAML-Datei (in der Regel als CodeBehind-Datei bezeichnet) zuordnen, die auf Ereignisse reagieren und die Objekte bearbeiten kann, die Sie ursprünglich in XAML deklarieren.

Es gibt in der Regel zwei Dateien mit einer beliebigen XAML-Datei, der .xaml Datei selbst und einer entsprechenden CodeBehind-Datei, die ein untergeordnetes Element davon im Projektmappen-Explorer ist.

• Die .xaml Datei enthält XAML-Markup, das ihre App-UI definiert. Der Klassenname wird mit dem x:Class Attribut deklariert.
• Die Codedatei enthält Code, den Sie zum Interagieren mit dem XAML-Markup und einem Aufruf der InitializeComponent Methode erstellen. Die Klasse wird als eine partial class.

Wenn Sie Ihr Projekt erstellen, wird die InitializeComponent Methode aufgerufen, um die .xaml Datei zu analysieren und Code zu generieren, der mit dem Code partial class verknüpft ist, um die vollständige Klasse zu erstellen.

Weitere Informationen finden Sie in den Dokumenten:

• XAML-Übersicht
• Partielle Klassen und Methoden (C#-Programmierhandbuch)
• x:Class-Attribut, x:Class-Direktive

MainWindow aktualisieren

Die MainWindow im Projekt enthaltene Klasse ist eine Unterklasse der XAML Window-Klasse , die zum Definieren der Shell der App verwendet wird. Das Fenster der App weist zwei Teile auf:

• Der Clientteil des Fensters ist der Ort, an dem Sich Ihre Inhalte befinden.
• Der Nicht-Client-Teil ist der Teil, der vom Windows-Betriebssystem gesteuert wird. Sie enthält die Titelleiste, in der sich die Beschriftungssteuerelemente (Min/Max/Close-Schaltflächen), App-Symbol, Titel und Ziehbereich befinden. Sie enthält auch den Rahmen um die Außenseite des Fensters.

Damit die WinUI Notes-App den Fluent Design-Richtlinien entspricht, nehmen Sie einige Änderungen vor MainWindow. Zuerst wenden Sie Mica-Material als Fensterkulisse an. Mica ist ein undurchsichtiges, dynamisches Material, das Design und Desktophintergrund enthält, um den Hintergrund des Fensters zu zeichnen. Anschließend erweitern Sie den Inhalt Ihrer App in den Titelleistenbereich und ersetzen die Systemtitelleiste durch ein XAML-Titelleisten-Steuerelement . Dadurch wird der Platz besser genutzt, und Sie haben mehr Kontrolle über das Design und bieten gleichzeitig alle funktionen, die für die Titelleiste erforderlich sind.

Außerdem fügen Sie einen Frame als Inhalt des Fensters hinzu. Die Frame Klasse funktioniert mit der Page-Klasse , damit Sie zwischen Den seiten des Inhalts in Ihrer App navigieren können. Sie fügen die Seiten in einem späteren Schritt hinzu.

Tipp

Sie können den Code für dieses Lernprogramm aus dem GitHub-Repository herunterladen oder anzeigen. Um den Code wie in diesem Schritt anzuzeigen, lesen Sie diesen Commit: Notizseite – Initial.

1. Doppelklicken Sie auf MainWindow.xaml im Projektmappen-Explorer, um es zu öffnen.

2. Ersetzen Sie zwischen den öffnenden und schließenden<Window.. > Tags alle vorhandenen XAML-Code durch folgendes:

   <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. Speichern Sie die Datei, indem Sie STRG+S drücken, auf das Symbol "Speichern" in der Symbolleiste klicken oder das Menü "MainPage.xaml speichern> auswählen.

Machen Sie sich keine Sorgen, wenn Sie nicht verstehen, was dieses GESAMTE XAML-Markup derzeit tut. Während Sie den Rest der App-UI erstellen, erläutern wir DIE XAML-Konzepte ausführlicher.

Hinweis

In diesem Markup werden zwei verschiedene Möglichkeiten zum Festlegen von Eigenschaften in XAML angezeigt. Die erste und kürzeste Möglichkeit besteht darin, die XAML-Attributsyntax wie folgt zu verwenden: <object attribute="value">. Dies eignet sich hervorragend für einfache Werte, z <MicaBackdrop Kind="Base"/>. B. . Es funktioniert jedoch nur für Werte, bei denen der XAML-Parser weiß, wie die Zeichenfolge in den erwarteten Werttyp konvertiert werden kann.

Wenn der Eigenschaftswert komplexer ist oder der XAML-Parser nicht weiß, wie er konvertiert werden kann, müssen Sie die Eigenschaftselementsyntax verwenden, um das Objekt zu erstellen. So:

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

Um beispielsweise die Window.SystemBackdrop Eigenschaft festzulegen, müssen Sie die Eigenschaftselementsyntax verwenden und das MicaBackdrop Element explizit erstellen. Sie können jedoch eine einfache Attributsyntax verwenden, um die MicaBackdrop.Kind Eigenschaft festzulegen.

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

In MainWindow.xaml, <Window.SystemBackdrop>, <Grid.RowDefinitions>und <TitleBar.IconSource> enthalten komplexe Werte, die mit eigenschaftselementsyntax festgelegt werden müssen.

Weitere Informationen finden Sie in den Dokumenten:

• XAML-Syntax-Leitfaden

Wenn Sie die App jetzt ausführen, wird das hinzugefügte XAML-Element TitleBar angezeigt, befindet sich jedoch unter der Systemtitelleiste, die weiterhin angezeigt wird.

Sie müssen ein wenig Code schreiben, um das Ersetzen der Systemtitelleiste abzuschließen.

1. Öffnen Sie MainWindow.xaml.cs. Sie können den CodeBehind für MainWindow.xaml (oder eine beliebige XAML-Datei) auf drei Arten öffnen:

   • Wenn die MainWindow.xaml Datei geöffnet ist und das aktive Dokument bearbeitet wird, drücken Sie F7.
   • Wenn die MainWindow.xaml Datei geöffnet ist und das aktive Dokument bearbeitet wird, klicken Sie mit der rechten Maustaste in den Text-Editor, und wählen Sie "Code anzeigen" aus.
   • Verwenden Sie den Projektmappen-Explorer , um den MainWindow.xaml Eintrag zu erweitern und die MainWindow.xaml.cs Datei einzublenden. Doppelklicken Sie auf die Datei, um sie zu öffnen.

2. Fügen Sie im Konstruktor für MainWindowdiesen Code nach dem Aufruf von InitializeComponent:

   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. ↑
   }
   

   Die Eigenschaft "ExtendsContentIntoTitleBar " blendet die Standardtitelleiste des Systems aus und erweitert Den App-XAML-Code in diesen Bereich. Der Aufruf von SetTitleBar weist das System dann an, das angegebene XAML-Element (AppTitleBar) als Titelleiste für die App zu behandeln.

3. Erstellen Sie das Projekt, und führen Sie es aus, indem Sie F5 drücken, in der Symbolleiste auf die Schaltfläche "Start debuggen" klicken oder das Menü "Debuggen starten> auswählen.

Wenn Sie die App jetzt ausführen, sehen Sie ein leeres Fenster mit einem Ica-Hintergrund und der XAML-Titelleiste, die die Systemtitelleiste ersetzt.

Fahren Sie mit Schritt 2 fort – Hinzufügen einer Notizseite