Dela via

Projektinställningar

Innan du börjar koda appen tar vi en snabb titt på Visual Studio-projektet och tar hand om vissa projektkonfigurationer. När Visual Studio skapar ett WinUI 3-projekt genereras flera viktiga mappar och kodfiler. Dessa visas i fönstret Solution Explorer i Visual Studio:

Solution Explorer som visar filerna för ett WinUI 3-projekt i Visual Studio.

De objekt som anges här är de som du främst interagerar med. De här filerna hjälper dig att konfigurera och köra WinUI 3-appen. Varje fil har ett annat syfte, som beskrivs nedan:

  • Mappen Assets

    Den här mappen innehåller appens logotyp, bilder och andra medietillgångar. Den börjar fyllas med platshållarfiler för appens logotyp. Den här logotypen representerar din app i Start-menyn i Windows, i Aktivitetsfältet i Windows och i Microsoft Store när appen publiceras där.

  • App.xaml och App.xaml.cs

    Filen App.xaml innehåller appomfattande XAML-resurser, till exempel färger, formatmallar eller mallar. Filen App.xaml.cs innehåller vanligtvis kod som instansierar och aktiverar programfönstret. I det här projektet pekar den på klassen MainWindow.

  • MainWindow.xaml och MainWindow.xaml.cs

    Dessa filer representerar appens fönster.

  • Package.appxmanifest

    Med den här paketmanifestfilen kan du konfigurera utgivarinformation, logotyper, processorarkitekturer och annan information som avgör hur din app visas i Microsoft Store.

XAML-filer och partiella klasser

XAML (Extensible Application Markup Language ) är ett deklarativt språk som kan initiera objekt och ange egenskaper för objekt. Du kan skapa synliga gränssnittselement i den deklarativa XAML-markeringen. Du kan sedan associera en separat kodfil för varje XAML-fil (kallas vanligtvis en kod bakom fil) som kan svara på händelser och ändra de objekt som du ursprungligen deklarerar i XAML.

Det finns vanligtvis två filer med valfri XAML-fil, .xaml själva filen och en motsvarande kod bakom fil som är ett underordnat objekt i Solution Explorer.

  • Filen .xaml innehåller XAML-markering som definierar appens användargränssnitt. Klassnamnet deklareras med attributet x:Class .
  • Kodfilen innehåller kod som du skapar för att interagera med XAML-markering och ett anrop till InitializeComponent metoden. Klassen definieras som en partial class.

När du skapar projektet InitializeComponent anropas metoden för att parsa .xaml filen och generera kod som är kopplad till koden partial class för att skapa hela klassen.

Läs mer i dokumenten:

Uppdatera MainWindow

Klassen MainWindow som ingår i projektet är en underklass till klassen XAML Window , som används för att definiera appens gränssnitt. Appens fönster har två delar:

  • Klientdelen av fönstret är dit ditt innehåll hamnar.
  • Icke-klientdelen är den del som styrs av Windows-operativsystemet. Den innehåller namnlisten, där undertextkontrollerna (knapparna Min/Max/Close), appikonen, rubriken och dragområdet finns. Den innehåller även ramen runt fönstrets utsida.

Om du vill göra WinUI Notes-appen konsekvent med Fluent Design-riktlinjerna gör du några ändringar i MainWindow. Först ska du använda Mica-material som fönsterbakgrund. Mica är ett ogenomskinlig, dynamiskt material som innehåller tema och skrivbordsunderlägg för att måla bakgrunden av fönstret. Sedan utökar du appens innehåll till namnlistområdet och ersätter systemrubrikfältet med en XAML TitleBar-kontroll . Detta ger bättre användning av utrymme och ger dig mer kontroll över designen, samtidigt som du tillhandahåller alla funktioner som krävs i namnlisten.

Du lägger också till en ram som innehåll i fönstret. Klassen Frame fungerar med klassen Page så att du kan navigera mellan sidor med innehåll i din app. Du lägger till sidorna i ett senare steg.

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.

  1. Dubbelklicka MainWindow.xaml i Solution Explorer för att öppna den.

  2. Mellan de inledande och avslutande<Window.. > taggarna ersätter du alla befintliga XAML med följande:

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

Oroa dig inte om du inte förstår vad all denna XAML-markering gör just nu. När du skapar resten av appgränssnittet förklarar vi XAML-begreppen mer detaljerat.

Anmärkning

I den här markeringen ser du två olika sätt att ange egenskaper i XAML. Det första och kortaste sättet är att använda XAML-attributsyntax, så här: <object attribute="value">. Detta fungerar bra för enkla värden, till exempel <MicaBackdrop Kind="Base"/>. Men det fungerar bara för värden där XAML-parsern vet hur du konverterar strängen till den förväntade värdetypen.

Om egenskapsvärdet är mer komplext, eller om XAML-parsern inte vet hur det ska konverteras, måste du använda syntaxen för egenskapselementet för att skapa objektet. Gillar det här:

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

Om du till exempel vill ange Window.SystemBackdrop egenskapen måste du använda syntaxen för egenskapselementet och uttryckligen skapa elementet MicaBackdrop . Men du kan använda enkel attributsyntax för att ange MicaBackdrop.Kind egenskapen.

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

I MainWindow.xaml, <Window.SystemBackdrop>, <Grid.RowDefinitions>och <TitleBar.IconSource> innehåller komplexa värden som måste anges med syntax för egenskapselement.

Läs mer i dokumenten:

Om du kör appen nu ser du XAML-elementet TitleBar som du har lagt till, men det kommer att ligga under systemrubrikfältet, som fortfarande visas.

Det tomma WinUI Notes-appfönstret med både systemrubrikfältet och det anpassade namnlisten.

Du måste skriva lite kod för att slutföra bytet av systemrubrikfältet.

  1. Öppna MainWindow.xaml.cs. Du kan öppna koden bakom MainWindow.xaml (eller valfri XAML-fil) på tre sätt:

    • MainWindow.xaml Om filen är öppen och är det aktiva dokument som redigeras trycker du på F7.
    • MainWindow.xaml Om filen är öppen och är det aktiva dokument som redigeras högerklickar du i textredigeraren och väljer Visa kod.
    • Använd Solution Explorer för att expandera MainWindow.xaml posten och visa MainWindow.xaml.cs filen. Dubbelklicka på filen för att öppna den.

  2. I konstruktorn för MainWindowlägger du till den här koden efter anropet till 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. ↑
}

    Egenskapen ExtendsContentIntoTitleBar döljer standardfältet för systemrubriker och utökar din app XAML till det området. Anropet till SetTitleBar instruerar sedan systemet att behandla XAML-elementet som du angav (AppTitleBar) som namnlist för appen.

  3. 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.

När du kör appen nu visas ett tomt fönster med en glimmerbakgrund och XAML-namnlisten som har ersatt systemrubrikfältet.

Det tomma WinUI Notes-appfönstret med ikonen och appnamnet i namnlisten.

Fortsätt till steg 2 – Lägg till en anteckningssida

  • Last updated on