nastavení projektu

Než se pustíte do kódování aplikace, podíváme se na projekt ve Visual Studiu a postaráme se o některá nastavení projektu. Když Visual Studio vytvoří project WinUI 3, vygeneruje se několik důležitých složek a souborů kódu. Můžete je vidět v podokně Solution Explorer 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 se odkazuje na třídu MainWindow.

• MainWindow.xaml a MainWindow.xaml.cs

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

• Package.appxmanifest

  Tento soubor manifestu balíčku umožňuje nakonfigurovat informace o vydavateli, loga, architektury procesorů a další podrobnosti, které určují, jak se aplikace zobrazuje v Microsoft Store.

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 s libovolným souborem XAML, samotný soubor .xaml a odpovídající soubor s kódem, který je podřízenou položkou v souboru Solution Explorer.

• 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í project se volá metoda InitializeComponent k analýze souboru .xaml a vygenerování kódu, který je připojený k kódu partial class k vytvoření úplné třídy.

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í project, je podtřídou třídy XAML Window, 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 tento kurz si můžete stáhnout nebo zobrazit z úložiště GitHub. Pokud chcete vidět kód, jak je v tomto kroku, podívejte se na toto potvrzení: note page – initial.

1. Poklikáním otevřete MainWindow.xaml v Solution Explorer.

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 kláves CTRL+S, kliknutím na ikonu Uložit na panelu nástrojů, nebo výběrem z nabídky Soubor>Uložit MainWindow.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.
   • Pomocí Solution Explorer rozbalte položku MainWindow.xaml a zobrazte soubor MainWindow.xaml.cs. 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 project stisknutím klávesy F5, kliknutím na tlačítko Spustit na panelu nástrojů nebo výběrem nabídky Run>Start Debugging.

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