Esercitazione .NET MAUI - Creare la prima app multipiattaforma in C #

Windows macOS

Modifica il codice

Quando si sviluppano applicazioni con .NET MAUI, Ricaricamento rapido XAML è disponibile durante il debug dell'applicazione. Ciò significa che è possibile modificare l'interfaccia utente XAML mentre l'applicazione è in esecuzione e l'interfaccia utente verrà aggiornata automaticamente.

Tornare a Visual Studio e lasciare l'app in esecuzione. Nella finestra Esplora soluzione fare doppio clic sul file MainPage.xaml nel progetto MyFirstMauiApp. Se il pannello Esplora soluzioni non è visualizzato, selezionare Visualizza > Esplora soluzioni dal menu principale oppure premere CTRL+ALT+L.

Pannello Esplora soluzioni con il file MainPage.xaml evidenziato.

Tornare al file MainPage.xaml in VS Code e lasciare l'app in esecuzione.

Pannello Esplora soluzioni con il file MainPage.xaml evidenziato.

Il valore Text della seconda Label nella riga 17 è attualmente impostato su Hello, World!, come mostrato nel codice seguente:

MainPage.xaml
<Label
    Text="Hello, World!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

Aggiorna il testo per leggere Hello, .NET MAUI!:

MainPage.xaml
<Label
    Text="Hello, .NET MAUI!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

L'interfaccia utente dell'app viene aggiornata automaticamente quando si apportano modifiche.

Windows che esegue l'app .NET MAUI. Viene visualizzato un messaggio 'Ciao, .NET MAUI!' durante l'aggiornamento con Ricaricamento rapido.

Mac che esegue l'app .NET MAUI. Viene visualizzato un messaggio 'Ciao, .NET MAUI!' durante l'aggiornamento con Ricaricamento rapido.

Quando si sviluppano applicazioni con .NET MAUI, è anche possibile usare .NET Ricaricamento rapido per ricaricare il codice C#. Modificare la logica nell'applicazione per incrementare il conteggio di 10 anziché di 1 quando si fa clic sul pulsante.

Apri MainPage.xaml.cs (questo file è annidato in MainPage.xaml oppure è possibile fare clic con il pulsante destro del mouse e selezionare Visualizza codice dal menu).

Elenco a discesa per visualizzare il codice sottostante di MainPage. XAML

Il metodo OnCounterClicked nel file include attualmente il codice seguente:

MainPage.xaml.cs
private void OnCounterClicked(object sender, EventArgs e)
{
    count++;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Aggiornare count++; per incrementarlo di 10 modificandolo in count += 10;.

MainPage.xaml.cs
private void OnCounterClicked(object sender, EventArgs e)
{
    count += 10;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Per applicare le modifiche al codice, salva il file e seleziona il pulsante Ricaricamento rapido in Visual Studio o premi ALT+F10.

Elenco a discesa per visualizzare il codice sottostante di MainPage. XAML

Selezionare il pulsante Fai clic su di me e visualizzarne l'incremento di 10. Ben fatto! È ora possibile chiudere l'app in esecuzione.

Contatore aggiornato a incrementi di 10

Continua