Nastavení projektu

Než začnete programovat aplikaci, podíváme se na projekt sady Visual Studio a postaráme se o nastavení projektu. Když Visual Studio vytvoří projekt WinUI, vygeneruje se několik důležitých složek a souborů kódu. Můžete je vidět v podokně Průzkumník řešení sady Visual Studio:

Zde uvedené položky jsou ty, se kterými budete primárně pracovat. Tyto soubory vám pomůžou nakonfigurovat a spustit aplikaci WinUI. Každý soubor slouží k jinému účelu, jak je popsáno níže:

• Složka Assets

  Tato složka obsahuje logo, obrázky a další multimediální prostředky vaší aplikace. Začne se vyplňovat zástupnými soubory pro logo vaší aplikace. Toto logo představuje vaši aplikaci v nabídce Start systému Windows, na hlavním panelu Windows a v Microsoft Storu, když je tam aplikace publikovaná.

• App.xaml a App.xaml.cs

  Soubor App.xaml obsahuje prostředky XAML pro celou aplikaci, jako jsou barvy, styly nebo šablony. Soubor App.xaml.cs obecně obsahuje kód, který vytvoří instanci a aktivuje okno aplikace. V tomto projektu odkazuje na MainWindow třídu.

• MainWindow.xaml a MainWindow.xaml.cs

  Tyto soubory představují okno vaší aplikace.

• Package.appxmanifest

  Tento soubor manifestu balíčku umožňuje konfigurovat informace o vydavateli, loga, architektury procesoru a další podrobnosti, které určují, jak se vaše aplikace zobrazí v Microsoft Storu.

Soubory XAML a částečné třídy

Extensible Application Markup Language (XAML) je deklarativní jazyk, který může inicializovat objekty a nastavit vlastnosti objektů. Viditelné prvky uživatelského rozhraní můžete vytvořit v deklarativním kódu XAML. Pak můžete přidružit samostatný soubor kódu pro každý XAML soubor (obvykle označovaný jako code-behind soubor), který může reagovat na události a manipulovat s objekty, které jste původně deklarovali v XAML.

Obecně existují dva soubory ve spojení s libovolným souborem XAML: jeden je .xaml samotný soubor a druhým je odpovídající soubor code-behind, který je podřízenou položkou v Průzkumníku řešení.

• Soubor .xaml obsahuje kód XAML, který definuje uživatelské rozhraní aplikace. Název třídy je deklarován atributem x:Class .
• Soubor kódu obsahuje kód, který vytvoříte pro interakci s kódem XAML a volání metody InitializeComponent . Třída je definována jako partial class.

Při sestavování projektu se volá metoda InitializeComponent pro parsování souboru .xaml a generování kódu, který je spojený s kódem partial class, aby se vytvořila úplná třída.

Další informace najdete v dokumentaci:

• Přehled jazyka XAML
• Částečné třídy a metody (Průvodce programováním v C#)
• x:Class – atribut, x:Class – direktiva

Aktualizace MainWindow

Třída MainWindow , která je součástí projektu, je podtřídou třídy okna XAML, která slouží k definování prostředí aplikace. Okno aplikace má dvě části:

• Část okna klienta je místo, kam váš obsah směřuje.
• Část , která není klientem , je část řízená operačním systémem Windows. Obsahuje záhlaví, kde jsou ovládací prvky titulků (tlačítka Min/Max/Close), ikona aplikace, název a oblast přetažení. Zahrnuje také rám kolem vnějšího okna.

Pokud chcete, aby aplikace WinUI Notes byla konzistentní s pokyny pro fluent Design, provedete několik úprav MainWindow. Nejdřív použijete materiál Mica jako pozadí okna. Mica je neprůhledný dynamický materiál, který zahrnuje motiv a tapetu pro vykreslení pozadí okna. Potom rozšíříte obsah aplikace do oblasti záhlaví a nahradíte záhlaví systému ovládacím panelem TitleBar XAML. Díky tomu lépe využijete místo a získáte větší kontrolu nad návrhem a zároveň zajistíte všechny funkce požadované v záhlaví.

Jako obsah okna přidáte také rámeček . Třída Frame funguje s třídou Page a umožňuje přecházet mezi stránkami obsahu v aplikaci. Stránky přidáte v pozdějším kroku.

Návod

Kód pro účely tohoto kurzu si můžete stáhnout nebo zobrazit z úložiště GitHub. Pokud chcete zobrazit kód, jak je v tomto kroku, podívejte se na tento commit: poznámková stránka – počáteční.

1. Poklikejte na MainWindow.xaml v Průzkumníku řešení, abyste jej otevřeli.

2. Mezi otevírací a uzavírací <Window.. > značkou nahraďte stávající XAML tímto kódem:

   <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. Uložte soubor stisknutím kombinace kláves CTRL+S, kliknutím na ikonu Uložit na panelu nástrojů nebo výběrem nabídky Uložit>mainPage.xaml.

Nedělejte si starosti, pokud nerozumíte tomu, co všechno tento kód XAML dělá právě teď. Při vytváření zbytku uživatelského rozhraní aplikace podrobněji vysvětlíme koncepty XAML.

Poznámka:

V tomto kódu uvidíte dva různé způsoby nastavení vlastností v XAML. Prvním a nejkratším způsobem je použití syntaxe atributu XAML, například takto: <object attribute="value">. To funguje skvěle pro jednoduché hodnoty, například <MicaBackdrop Kind="Base"/>. Funguje ale jenom pro hodnoty, ve kterých analyzátor XAML ví, jak převést řetězec na očekávaný typ hodnoty.

Pokud je hodnota vlastnosti složitější nebo analyzátor XAML neví, jak ji převést, musíte k vytvoření objektu použít syntaxi elementu vlastnosti . Nějak tak:

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

Chcete-li například nastavit Window.SystemBackdrop vlastnost, musíte použít syntaxi elementu property a explicitně vytvořit MicaBackdrop element. K nastavení vlastnosti ale můžete použít jednoduchou syntaxi atributu MicaBackdrop.Kind .

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

V MainWindow.xaml, <Window.SystemBackdrop>, <Grid.RowDefinitions> a <TitleBar.IconSource> jsou obsaženy komplexní hodnoty, které musí být nastaveny pomocí syntaxe elementu property.

Další informace najdete v dokumentaci:

• průvodce syntaxí XAML

Pokud teď aplikaci spustíte, zobrazí se přidaný prvek XAML TitleBar, ale bude pod systémovým záhlavím, které se stále zobrazuje.

Abyste dokončili nahrazení systémového záhlaví, musíte napsat trochu kódu.

1. Otevřít MainWindow.xaml.cs. Kód na pozadí pro MainWindow.xaml (nebo jakýkoli soubor XAML) můžete otevřít třemi způsoby:

   • MainWindow.xaml Pokud je soubor otevřený a upravuje se aktivní dokument, stiskněte klávesu F7.
   • MainWindow.xaml Pokud je soubor otevřený a jedná se o aktivní dokument, který se upravuje, klikněte pravým tlačítkem v textovém editoru a vyberte Zobrazit kód.
   • Použijte Průzkumník řešení k rozbalení položky MainWindow.xaml, což odhalí MainWindow.xaml.cs soubor. Poklikáním otevřete soubor.

2. Do konstruktoru pro MainWindow přidejte tento kód za volání na 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. ↑
   }
   

   Vlastnost ExtendsContentIntoTitleBar skryje výchozí systémovou titulkovou lištu a rozšíří XAML vaší aplikace do této oblasti. Volání SetTitleBar pak systému říká, aby zacházel s XAML elementem, který jste zadali (AppTitleBar), jako se záhlavím aplikace.

3. Sestavte a spusťte projekt stisknutím klávesy F5, kliknutím na tlačítko Debug "Start" na panelu nástrojů nebo výběrem nabídky Spustit>Ladění.

Když teď aplikaci spustíte, zobrazí se prázdné okno s pozadím typu mica a záhlavím XAML, které nahradilo systémové záhlaví.

Pokračovat ke kroku 2 – Přidání stránky poznámek