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 3, 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 3. 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ý soubor XAML (obvykle označovaný jako soubor kódu za kódem), 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, .xaml samotným souborem a odpovídajícím souborem kódu, 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 partial classjako .

Při sestavování projektu InitializeComponent se volá metoda pro parsování .xaml souboru a vygenerování kódu, který je připojený 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ůhlený dynamický materiál, který obsahuje motiv a tapetu na plochu, aby nakreslila 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 toto potvrzení: poznámková stránka – počáteční.

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

2. Mezi levou a pravou<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> obsahovat 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 můžete otevřít pro MainWindow.xaml (nebo jakýkoli soubor XAML) 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í PrůzkumníkaMainWindow.xaml řešení rozbalte položku a zobrazte MainWindow.xaml.cs soubor. Poklikáním otevřete soubor.

2. Do konstruktoru pro MainWindowpřidejte tento kód za volání: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émový záhlaví a rozšíří XAML aplikace do této oblasti. Volání SetTitleBar pak systému říká, aby zacházet s elementEM XAML, který jste zadali (AppTitleBar) jako záhlaví aplikace.

3. Sestavte a spusťte projekt stisknutím klávesy F5, klikněte na tlačítko Spustit "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 mikrofonu a záhlavím XAML, které nahradilo systémový záhlaví.

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