Configurazione del progetto

Prima di iniziare a scrivere codice sull'app, si esaminerà rapidamente il progetto di Visual Studio e si esaminerà la configurazione di un progetto. Quando Visual Studio crea un progetto WinUI 3, vengono generati diversi file di codice e cartelle importanti. Questi elementi sono visibili nel riquadro Esplora soluzioni di Visual Studio:

Gli elementi elencati di seguito sono quelli con cui interagirai principalmente. Questi file consentono di configurare e eseguire l'app WinUI 3. Ogni file ha uno scopo diverso, descritto di seguito:

• Cartella Assets

  Questa cartella contiene il logo, le immagini e altri asset multimediali dell'app. Viene popolato con i file segnaposto per il logo dell'app. Questo logo rappresenta l'app nel menu Start di Windows, nella barra delle applicazioni di Windows e in Microsoft Store quando l'app viene pubblicata.

• App.xaml e App.xaml.cs

  Il App.xaml file contiene risorse XAML a livello di app, ad esempio colori, stili o modelli. Il App.xaml.cs file contiene in genere codice che crea un'istanza e attiva la finestra dell'applicazione. In questo progetto punta alla MainWindow classe .

• MainWindow.xaml e MainWindow.xaml.cs

  Questi file rappresentano la finestra dell'app.

• Package.appxmanifest

  Questo file manifesto del pacchetto consente di configurare informazioni sull'editore, logo, architetture del processore e altri dettagli che determinano la modalità di visualizzazione dell'app in Microsoft Store.

File XAML e classi parziali

Extensible Application Markup Language (XAML) è un linguaggio dichiarativo che può inizializzare gli oggetti e impostare le proprietà degli oggetti. Puoi creare elementi dell'interfaccia utente visibili nel markup XAML dichiarativo. È quindi possibile associare un file di codice separato per ogni file XAML (in genere denominato file code-behind ) che può rispondere agli eventi e modificare gli oggetti dichiarati originariamente in XAML.

Esistono in genere due file con qualsiasi file XAML, il .xaml file stesso e un file code-behind corrispondente che è un elemento figlio di esso in Esplora soluzioni.

• Il .xaml file contiene markup XAML che definisce l'interfaccia utente dell'app. Il nome della classe viene dichiarato con l'attributo x:Class .
• Il file di codice contiene il codice creato per interagire con il markup XAML e una chiamata al InitializeComponent metodo . La classe è definita come .partial class

Quando si compila il progetto, viene chiamato il InitializeComponent metodo per analizzare il file e generare codice .xaml unito al codice partial class per creare la classe completa.

Per altre informazioni, vedere la documentazione:

• Panoramica di XAML
• Classi e metodi parziali (Guida per programmatori C#)
• Attributo x:Class, direttiva x:Class

Aggiornare MainWindow

La MainWindow classe inclusa nel progetto è una sottoclasse della classe Xaml Window , usata per definire la shell dell'app. La finestra dell'app ha due parti:

• La parte client della finestra è la posizione in cui viene inserito il contenuto.
• La parte non client è la parte controllata dal sistema operativo Windows. Include la barra del titolo, in cui si trovano i controlli della didascalia (pulsanti Min/Max/Close), l'icona dell'app, il titolo e l'area di trascinamento. Include anche la cornice intorno all'esterno della finestra.

Per rendere l'app Note WinUI coerente con le linee guida di Fluent Design, verranno apportate alcune modifiche a MainWindow. Prima di tutto, applicherà il materiale Mica come sfondo della finestra. Mica è un materiale opaco e dinamico che incorpora tema e sfondo desktop per disegnare lo sfondo della finestra. Estenderai quindi il contenuto dell'app nell'area della barra del titolo e sostituirai la barra del titolo di sistema con un controllo TitleBar XAML. In questo modo si usa meglio lo spazio e si ottiene un maggiore controllo sulla progettazione, fornendo al tempo stesso tutte le funzionalità necessarie per la barra del titolo.

Si aggiungerà anche un frame come contenuto della finestra. La Frame classe funziona con la classe Page per consentire di spostarsi tra pagine di contenuto nell'app. Le pagine verranno aggiunte in un passaggio successivo.

Suggerimento

È possibile scaricare o visualizzare il codice per questa esercitazione dal repository GitHub. Per visualizzare il codice così com'è in questo passaggio, vedere la pagina commit: nota - iniziale.

1. Fare doppio clic MainWindow.xaml in Esplora soluzioni per aprirlo.

2. Tra i tag di apertura e chiusura<Window.. > sostituire qualsiasi xaml esistente con questo:

   <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. Salvare il file premendo CTRL+S, facendo clic sull'icona Salva nella barra degli strumenti o selezionando il menu File>Salva MainPage.xaml.

Non preoccuparti se non capisci cosa fa tutto questo markup XAML al momento. Durante la compilazione del resto dell'interfaccia utente dell'app, verranno illustrati in modo più dettagliato i concetti XAML.

Annotazioni

In questo markup vengono visualizzati due modi diversi per impostare le proprietà in XAML. Il primo e il modo più breve consiste nell'usare la sintassi degli attributi XAML, come illustrato di seguito: <object attribute="value">. Questa operazione è ideale per i valori semplici, ad esempio <MicaBackdrop Kind="Base"/>. Ma funziona solo per i valori in cui il parser XAML sa come convertire la stringa nel tipo di valore previsto.

Se il valore della proprietà è più complesso o il parser XAML non sa come convertirlo, devi usare la sintassi degli elementi della proprietà per creare l'oggetto. Così:

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

Ad esempio, per impostare la proprietà, è necessario usare la Window.SystemBackdrop sintassi degli elementi proprietà e creare in modo esplicito l'elemento MicaBackdrop . È tuttavia possibile usare una sintassi di attributo semplice per impostare la MicaBackdrop.Kind proprietà .

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

MainWindow.xamlIn <Window.SystemBackdrop>, <Grid.RowDefinitions>, e <TitleBar.IconSource> contengono valori complessi che devono essere impostati con la sintassi degli elementi di proprietà.

Per altre informazioni, vedere la documentazione:

• Guida alla sintassi XAML

Se esegui l'app ora, vedrai l'elemento XAML TitleBar aggiunto, ma sarà sotto la barra del titolo di sistema, che è ancora visualizzata.

È necessario scrivere un po' di codice per completare la sostituzione della barra del titolo di sistema.

1. Apri MainWindow.xaml.cs. È possibile aprire il code-behind per MainWindow.xaml (o qualsiasi file XAML) in tre modi:

   • Se il MainWindow.xaml file è aperto ed è il documento attivo da modificare, premere F7.
   • Se il MainWindow.xaml file è aperto ed è il documento attivo da modificare, fare clic con il pulsante destro del mouse nell'editor di testo e selezionare Visualizza codice.
   • Usare Esplora soluzioni per espandere la MainWindow.xaml voce, rivelando il MainWindow.xaml.cs file. Fare doppio clic sul file per aprirlo.

2. Nel costruttore per MainWindowaggiungere questo codice dopo la chiamata a 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. ↑
   }
   

   La proprietà ExtendsContentIntoTitleBar nasconde la barra del titolo di sistema predefinita ed estende il codice XAML dell'app in tale area. La chiamata a SetTitleBar indica quindi al sistema di considerare l'elemento XAML specificato (AppTitleBar) come barra del titolo per l'app.

3. Compilare ed eseguire il progetto premendo F5, facendo clic sul pulsante Debug "Start" nella barra degli strumenti oppure selezionando il menu Esegui>debug avvia debug.

Quando esegui l'app ora, vedrai una finestra vuota con uno sfondo mica e la barra del titolo XAML che ha sostituito la barra del titolo di sistema.

Continuare con il passaggio 2 - Aggiungere una pagina note