Esercitazione: Creare un'app macchine virtuali Windows con .NET

Questa esercitazione illustra come usare Visual Studio per creare un'app Windows Presentation Foundation (macchine virtuali Windows). Con Visual Studio, si aggiungono controlli alle finestre e si gestiscono gli eventi. Al termine di questa esercitazione è disponibile una semplice app che aggiunge nomi a una casella di riepilogo.

In questa esercitazione, farai:

Creare una nuova app macchine virtuali Windows.
Aggiungere controlli a una finestra.
Gestire gli eventi di controllo per fornire funzionalità dell'app.
Avvia l'app.

Ecco un'anteprima dell'app creata durante l'esercitazione seguente:

App di esempio finita per il tutorial macchine virtuali Windows

Prerequisiti

Visual Studio 2026
- Selezionare il carico di lavoro .NET per lo sviluppo desktop
- Selezionare il componente individuale .NET 10

Creare un'app macchine virtuali Windows

Il primo passaggio per creare una nuova app consiste nell'aprire Visual Studio e generare l'app da un modello.

Apri Visual Studio.
Selezionare Crea un nuovo progetto.
Nella casella Cerca modelli digitare wpf e attendere che vengano visualizzati i risultati della ricerca.
Nell'elenco a discesa code language scegliere C# o Visual Basic.
Nell'elenco dei modelli selezionare macchine virtuali Windows Application e quindi selezionare Next.

Importante

Non selezionare il modello macchine virtuali Windows Application (.NET Framework).

L'immagine seguente mostra sia C# che Visual Basic .NET modelli di progetto. Se è stato applicato il filtro del linguaggio di codice , viene elencato il modello corrispondente.
Nella finestra Configura il nuovo progetto impostare Nome progetto su Nomi e selezionare Avanti.

È anche possibile salvare il progetto in una cartella diversa modificando il percorso percorso .
Infine, nella finestra Informazioni aggiuntive, selezionare .NET 10.0 (supporto a lungo termine) per l'impostazione Framework e quindi selezionare Crea.

Dopo che Visual Studio ha generato l'app, apre la finestra del progettista XAML per la finestra predefinita, MainWindow. Se la finestra di progettazione non è visibile, fare doppio clic sul file MainWindow.xaml nella finestra Esplora soluzioni per aprire la finestra di progettazione.

Parti importanti di Visual Studio

Il supporto per macchine virtuali Windows in Visual Studio include cinque componenti importanti con cui si interagisce durante la creazione di un'app:

I componenti importanti di Visual Studio 2026 devono essere noti quando si crea un progetto di macchine virtuali Windows per .NET.

Esplora soluzioni

Tutti i file di progetto, il codice, le finestre e le risorse vengono visualizzati in questa finestra.
Proprietà

Questa finestra mostra le impostazioni delle proprietà che è possibile configurare in base al contesto dell'elemento selezionato. Ad esempio, se si seleziona un elemento da Esplora soluzioni, vengono visualizzate le impostazioni relative al file. Se è selezionato un oggetto in Progettazione , vengono visualizzate le proprietà del controllo o della finestra.
Cassetta degli attrezzi

La casella degli strumenti contiene tutti i controlli che è possibile aggiungere a un'area di progettazione. Per aggiungere un controllo alla superficie corrente, fare doppio clic su un controllo o trascinare il controllo nella finestra di progettazione. È invece comune usare la finestra dell'editor di codice XAML per progettare un'interfaccia utente (UI) usando la finestra di progettazione XAML per visualizzare in anteprima i risultati.
Progettazione XAML

Questa è la finestra di progettazione per un documento XAML. È interattivo ed è possibile trascinare oggetti dalla casella degli strumenti. Selezionando e spostando gli elementi nella finestra di progettazione, è possibile comporre visivamente l'interfaccia utente per l'app.

Quando sia la finestra di progettazione che l'editor sono visibili, le modifiche apportate a una vengono riflesse nell'altro.

Quando si selezionano elementi nella finestra di progettazione, nella finestra Proprietà vengono visualizzate le proprietà e gli attributi relativi a tale oggetto.
Editor di codice XAML

Questo è l'editor di codice XAML per un documento XAML. L'editor di codice XAML è un modo per creare l'interfaccia utente senza una finestra di progettazione. L'ambiente di progettazione potrebbe impostare automaticamente le proprietà su un controllo quando il controllo viene aggiunto nell'ambiente di progettazione. L'editor di codice XAML offre molto più controllo.

Quando sia la finestra di progettazione che l'editor sono visibili, le modifiche apportate a una vengono riflesse nell'altro. Quando si sposta il cursore di testo nell'editor di codice, nella finestra Proprietà vengono visualizzate le proprietà e gli attributi relativi a tale oggetto.

Esaminare il codice XAML

Dopo aver creato il progetto, viene aperto l'editor di codice XAML. Mostra una quantità minima di codice XAML per visualizzare la finestra. Se l'editor non è aperto, fare doppio clic sull'elemento MainWindow.xaml nella finestra Esplora soluzioni. Il codice XAML dovrebbe essere simile all'esempio seguente:

<Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

Importante

Se stai codificando in Visual Basic, il codice XAML è leggermente diverso, in particolare l'attributo x:Class="..". XAML in Visual Basic usa il nome della classe dell'oggetto e omette lo spazio dei nomi della classe.

Per comprendere meglio il codice XAML, è possibile suddividerlo. XAML è semplicemente XML che macchine virtuali Windows processi per creare un'interfaccia utente. Per comprendere XAML, è necessario avere almeno familiarità con le nozioni di base di XML.

La radice del documento rappresenta il tipo di oggetto descritto dal file XAML. Il file dichiara otto attributi e in genere appartengono a tre categorie:

Spazi dei nomi XML

Uno spazio dei nomi XML fornisce struttura al codice XML. Determina il contenuto XML che è possibile dichiarare nel file.

L'attributo principale importa lo spazio dei nomi XML per l'intero file. In questo caso, esegue il mapping ai tipi dichiarati da macchine virtuali Windows. Gli altri spazi dei nomi XML dichiarano un prefisso e importano altri tipi e oggetti per il file XAML. Ad esempio, il namespace dichiara il prefisso e mappa gli oggetti dichiarati dal progetto, quelli dichiarati nello spazio dei nomi del codice.
attributo

Questo attributo esegue il mapping del <Window> al tipo definito dal codice: la classe MainWindow.xaml.cs o MainWindow.xaml.vb, ovvero la classe Names.MainWindow in C# e MainWindow in Visual Basic.
attributo

Qualsiasi attributo normale dichiarato nell'oggetto XAML imposta una proprietà di tale oggetto. In questo caso, l'attributo imposta la proprietà .

Modificare la finestra

Per l'app di esempio, questa finestra è troppo grande e la barra del titolo non è descrittiva. Occorre correggere questo aspetto.

Per prima cosa, eseguire l'app premendo F5 o selezionando DebugAvvia debug dal menu.

Viene visualizzata la finestra predefinita generata dal modello, senza controlli e un titolo di MainWindow:
Modificare il titolo della finestra impostando su .

Modificare le dimensioni della finestra impostando su e su .

<Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="Names" Height="180" Width="260">
    <Grid>
        
    </Grid>
</Window>

Preparare il layout

macchine virtuali Windows fornisce un potente sistema di layout con molti controlli di layout diversi. I controlli di layout consentono di posizionare e ridimensionare i controlli figlio e possono anche farlo automaticamente. Il controllo layout predefinito fornito in questo codice XAML è il controllo .

Il controllo griglia consente di definire righe e colonne, in modo analogo a una tabella, e di posizionare i controlli all'interno dei limiti di una combinazione di righe e colonne specifica. È possibile aggiungere alla griglia un numero qualsiasi di controlli secondari o di altri controlli di layout. Ad esempio, è possibile inserire un altro controllo in una combinazione di righe e colonne specifica e tale nuova griglia può quindi definire più righe e colonne e avere i propri elementi figli.

Il controllo a griglia posiziona i controlli figlio in righe e colonne. Una griglia ha sempre una singola riga e colonna dichiarata, ovvero la griglia per impostazione predefinita è una singola cella. Questa impostazione predefinita non offre molta flessibilità nell'inserimento dei controlli.

Regolare il layout della griglia per i controlli necessari per questa app.

Aggiungere un nuovo attributo all'elemento : .

Questa impostazione porta la griglia dai bordi della finestra e la rende un po' più gradevole.

Definire due righe e due colonne, dividendo la griglia in quattro celle:

<Grid Margin="10">
    
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    
</Grid>

Selezionare la griglia nell'editor di codice XAML o nella finestra di progettazione XAML. La finestra di progettazione XAML mostra ogni riga e colonna:

Aggiungere il primo controllo

Ora che la griglia è configurata, è possibile iniziare ad aggiungere controlli. Per prima cosa, aggiungere il controllo etichetta.

Creare un nuovo elemento all'interno dell'elemento , dopo le definizioni di riga e colonna. Impostare il contenuto dell'elemento sul valore stringa
```
<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>

</Grid>
```
Definisce il contenuto . Alcuni controlli comprendono come gestire il contenuto, altri no. Il contenuto di un controllo viene associato alla proprietà. Se imposti il contenuto tramite la sintassi degli attributi XAML, usa questo formato: . Entrambi i modi esegono la stessa operazione, impostando il contenuto dell'etichetta per visualizzare il testo .

L'etichetta occupa metà della finestra, perché è stata posizionata automaticamente nella prima riga e colonna della griglia. Per la prima riga, non è necessario che lo spazio sia sufficiente perché si userà solo quella riga per l'etichetta.
Modificare l'attributo del primo da a .

Il valore ridimensiona automaticamente la riga della griglia in base alle dimensioni del suo contenuto, in questo caso il controllo dell'etichetta.
```
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>
```
Il designer ora mostra l'etichetta che occupa una piccola quantità dell'altezza disponibile. C'è più spazio disponibile per la riga successiva.

Posizionamento dei controlli

Parliamo del posizionamento dei controlli. L'etichetta creata nella sezione precedente viene inserita automaticamente nella riga 0 e nella colonna 0 della griglia. La numerazione delle righe e delle colonne inizia a 0 e incrementa di 1. Il controllo non conosce nulla sulla griglia e il controllo non definisce proprietà per controllarne la posizione all'interno della griglia.

Come si indica a un controllo di usare una riga o una colonna diversa quando il controllo non conosce la griglia? Proprietà allegate! La griglia sfrutta il sistema di proprietà fornito da macchine virtuali Windows.

Il controllo griglia definisce nuove proprietà che i controlli figlio possono associarsi ad esse. Le proprietà non esistono effettivamente nel controllo stesso, ma diventano disponibili per il controllo dopo l'aggiunta alla griglia.

La griglia definisce due proprietà per determinare la posizione di riga e colonna di un controllo figlio: e . Se si omettono queste proprietà dal controllo, i valori predefiniti sono 0. Il controllo viene quindi posizionato in riga e colonna della griglia. Provare a modificare la posizione del controllo impostando l'attributo su :

<Label Grid.Column="1">Names</Label>

Si noti che l'etichetta è stata spostata nella seconda colonna. È possibile usare le proprietà associate e per posizionare i controlli successivi che verranno creati. Per il momento, tuttavia, ripristinare l'etichetta nella colonna 0.

Creare la casella di riepilogo nome

Ora che la griglia è ridimensionata correttamente e l'etichetta creata, aggiungere un controllo casella di lista nella riga sotto l'etichetta.

Dichiarare il controllo sotto il controllo .
Impostare la proprietà su .
Impostare la proprietà su .

Una volta denominato un controllo, è possibile farvi riferimento nel code-behind. Assegnare il nome al controllo usando l'attributo .

Ecco l'aspetto del codice XAML:

<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>
    <ListBox Grid.Row="1" x:Name="lstNames" />

</Grid>

Aggiungere i controlli rimanenti

Aggiungere una casella di testo e un pulsante. L'utente usa questi controlli per immettere un nome da aggiungere alla casella di riepilogo. Anziché creare più righe e colonne nella griglia per disporre questi controlli, inserire questi controlli nel controllo layout.

Il pannello stack differisce dalla griglia in base alla modalità di selezione dei controlli. Quando si usano le proprietà associate e per indicare alla griglia dove si desiderano i controlli, lo stack panel funziona automaticamente. Dispone ciascuno dei suoi controlli figlio sequenzialmente. Posiziona ogni controllo uno dopo l'altro.

Specificare il controllo sotto supervisione.
Impostare la proprietà su .
Impostare la proprietà su .
Imposta su .
```
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Label>Names</Label>
<ListBox Grid.Row="1" x:Name="lstNames" />

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    
</StackPanel>
```
In precedenza è stato usato l'attributo nella griglia, ma è stato inserito solo un singolo valore, . Questo margine ha un valore di , che è molto diverso da . La proprietà margin è un tipo e può interpretare entrambi i valori. Uno spessore definisce lo spazio intorno a ogni lato di una cornice rettangolare, rispettivamente sinistra, superiore, destra, inferiore. Se il valore per il margine è un singolo valore, usa tale valore per tutti e quattro i lati.
All'interno del controllo, creare un controllo.
1. Impostare la proprietà su .
Infine, dopo il ",", ancora all'interno del ",", creare un controllo.
1. Impostare la proprietà su .
2. Imposta su .
3. Impostare il contenuto su .

Ecco l'aspetto del codice XAML:

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0">Add Name</Button>
</StackPanel>

Il layout per la finestra è completo. Tuttavia, l'app non ha alcuna logica per essere effettivamente funzionale. Successivamente, è necessario associare gli eventi di controllo al codice e ottenere l'app per eseguire effettivamente un'operazione.

Aggiungere il codice per l'evento Click

L'oggetto creato ha un evento generato dall'app quando l'utente preme il pulsante. Sottoscrivere questo evento e aggiungere codice per aggiungere un nome alla casella di riepilogo. Usare gli attributi XAML per sottoscrivere gli eventi, proprio come si usano per impostare le proprietà.

Individuare il controllo.

Impostare l'attributo su .

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0" Click="ButtonAddName_Click">Add Name</Button>
</StackPanel>

Generare il codice del gestore eventi. Fare clic con il pulsante destro del mouse su e selezionare Vai a definizione.

Questa azione genera un metodo nel code-behind che corrisponde al nome del gestore specificato.
```
private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{

}
```
```
Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)

End Sub
```

Aggiungere quindi il codice seguente per eseguire questi tre passaggi:

Assicurarsi che la casella di testo contenga un nome.
Verificare che il nome immesso nella casella di testo non esista già.
Aggiungere il nome alla casella di riepilogo.

private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{
    if (!string.IsNullOrWhiteSpace(txtName.Text) && !lstNames.Items.Contains(txtName.Text))
    {
        lstNames.Items.Add(txtName.Text);
        txtName.Clear();
    }
}

Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)
    If Not String.IsNullOrWhiteSpace(txtName.Text) And Not lstNames.Items.Contains(txtName.Text) Then
        lstNames.Items.Add(txtName.Text)
        txtName.Clear()
    End If
End Sub

Eseguire l'app

Dopo aver gestito l'evento, eseguire l'app. Viene visualizzata la finestra e è possibile immettere un nome nella casella di testo. Aggiungere il nome selezionando il pulsante .

Esecuzione di un'app macchine virtuali Windows per .NET in Visual Studio 2026.

Altre informazioni su Windows Presentation Foundation
panoramica del XAML

Commenti e suggerimenti

Questa pagina è stata utile?

Last updated on 2026-03-06