XAML, acronimo di eXtensible Application Markup Language, è un linguaggio di markup dichiarativo sviluppato da Microsoft per la definizione dell’interfaccia utente e degli oggetti in un’applicazione. Nato per essere utilizzato in Windows Presentation Foundation (WPF) e UWP (Universal Windows Platform), XAML è ora anche il linguaggio di riferimento per lo sviluppo di applicazioni multipiattaforma grazie a .NET MAUI (Multi-platform App UI), che permette di creare applicazioni per Windows, macOS, iOS e Android da un singolo progetto. Questo linguaggio offre una separazione chiara tra il design dell’interfaccia e la logica di business, migliorando la modularità e l’efficienza dello sviluppo.
Cos’è XAML?
XAML è basato su XML (eXtensible Markup Language) e serve a descrivere in modo dichiarativo la struttura dell’interfaccia utente e le proprietà degli oggetti. L’obiettivo è quello di creare layout visivi complessi e configurare elementi grafici come pulsanti, caselle di testo, immagini, senza dover scrivere codice imperativo. Grazie alla sua perfetta integrazione con C# e altri linguaggi .NET, XAML semplifica il legame tra la logica di business e l’interfaccia utente.
Dove si usa XAML?
XAML viene utilizzato in diversi framework di sviluppo Microsoft, come:
- WPF (Windows Presentation Foundation) per applicazioni desktop su Windows.
- UWP (Universal Windows Platform) per applicazioni che funzionano su dispositivi Windows, come PC, tablet e HoloLens.
- .NET MAUI per applicazioni multipiattaforma che funzionano su Windows, macOS, iOS e Android. Con .NET MAUI, è possibile gestire tutte queste piattaforme da un singolo progetto, utilizzando un’unica base di codice.
Dove si usa XAML?
Per semplificare il processo di migrazione, è possibile utilizzare .NET Upgrade Assistant, disponibile come estensione di Visual Studio in Windows e come strumento dell’interfaccia della riga di comando per Windows e Mac. Ecco come procedere:
- Requisiti di versione: Il progetto Xamarin.Forms deve utilizzare la versione 4.8 o successiva di Xamarin.Forms. Tuttavia, per ottenere risultati ottimali, è consigliabile utilizzare Xamarin.Forms 5.0 e .NET Standard 2.0 o versioni successive.
- Installazione dello strumento: .NET Upgrade Assistant può essere installato come estensione di Visual Studio o utilizzato tramite l’interfaccia della riga di comando.
- Esecuzione dello strumento: .NET Upgrade Assistant richiederà il tipo di aggiornamento da eseguire:
- Sul posto: aggiorna il progetto senza creare una copia.
- Side-by-side: copia il progetto e aggiorna la copia, lasciando il progetto originale intatto. Attualmente, questa opzione richiede la creazione di nuovi progetti per aggiornare ogni head del progetto, poiché l’aggiornamento di un progetto esistente potrebbe causare errori.
Componenti di Base
XAML fornisce un modo dichiarativo per definire oggetti visivi, eventi e proprietà dell’interfaccia utente. Ogni elemento XML in XAML rappresenta un oggetto nella struttura dell’applicazione e può essere manipolato attraverso il codice sottostante (tipicamente in C#).
a) Elementi
Gli elementi XAML descrivono componenti dell’interfaccia, come i bottoni, le etichette e i pannelli di layout. Ecco un esempio di un pulsante:
<Button Content="Cliccami" Width="100" Height="50" />
In questo caso, <Button> corrisponde a un oggetto della classe Button in C#. Le proprietà come Content, Width e Height ne determinano l’aspetto e il comportamento.
b) Proprietà
Le proprietà degli oggetti possono essere definite direttamente come attributi XML. Ad esempio, per impostare il testo di un’etichetta:
<TextBlock FontSize="16" Text="Benvenuto in XAML!" />
In questo esempio, FontSize e Text sono proprietà dell’oggetto TextBlock.
c) Eventi
Gli eventi in XAML sono collegati al codice C#. Ad esempio, per gestire un clic su un bottone, puoi definire l’evento Click:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="EnlighterJSRAW" data-enlighter-language="csharp">
private void Button_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Hai cliccato il bottone!");
}
</pre>
<p> </p>
</div>
</div>
Il codice che gestisce l’evento nel file C#:
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="EnlighterJSRAW" data-enlighter-language="csharp">
private void Button_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Hai cliccato il bottone!");
}
</pre>
<p> </p>
</div>
</div>
Binding dei Dati
Il data binding in XAML consente di collegare dinamicamente l’interfaccia utente ai dati, eliminando la necessità di aggiornare manualmente i controlli ogni volta che i dati cambiano. Ad esempio, puoi collegare una casella di testo a una proprietà Nome di un oggetto Persona:
<TextBox Text="{Binding Nome}" />
Il data binding è particolarmente utile quando si utilizza il pattern architetturale MVVM (Model-View-ViewModel), che separa la logica dell’applicazione dall’interfaccia utente, rendendo le applicazioni più modulari e manutenibili.
In .NET MAUI, il binding dei dati rimane un aspetto centrale per la gestione di interfacce utente dinamiche e reattive. Permette di gestire in modo efficiente aggiornamenti e sincronizzazioni tra la UI e il modello di dati su più piattaforme.
Stili e Template
XAML consente una profonda personalizzazione dell’interfaccia utente tramite stili e template, rendendo facile mantenere un design coerente e personalizzato senza ripetere codice.
a) Stili
Gli stili in XAML permettono di definire un insieme di proprietà che possono essere applicate a più controlli. Per esempio, puoi creare uno stile comune per tutti i pulsanti dell’applicazione:
<Style TargetType="Button">
<Setter Property="Background" Value="Blue"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="14"/>
</Style>
In questo modo, tutti i pulsanti avranno lo stesso aspetto senza dover ripetere il codice.
b) Control Templates
I Control Templates permettono di ridefinire completamente l’aspetto di un controllo senza modificarne il comportamento funzionale. Questo è utile quando si vuole personalizzare l’interfaccia grafica, garantendo al contempo la continuità del funzionamento del controllo.
XAML in .NET MAUI
Uno degli sviluppi più significativi di XAML negli ultimi anni è la sua integrazione in .NET MAUI. Questo framework unificato permette agli sviluppatori di creare applicazioni multipiattaforma utilizzando lo stesso progetto e condividendo la stessa base di codice. Con .NET MAUI, puoi costruire interfacce utente utilizzando XAML e, attraverso il data binding, applicare la logica in C# per creare esperienze native su Windows, macOS, Android e iOS.
Questa capacità di scrivere una singola applicazione che funziona su più piattaforme con la stessa base di codice è uno dei punti di forza di .NET MAUI, rendendolo la scelta ideale per gli sviluppatori che cercano soluzioni multipiattaforma ottimizzate e di alta qualità.
Vantaggi dell’Uso di XAML
- Separazione tra logica e presentazione: XAML permette di mantenere separati design e codice, migliorando la collaborazione tra sviluppatori e designer.
- Binding dinamico dei dati: Il potente sistema di data binding semplifica l’interazione dinamica tra i dati e l’interfaccia utente.
- Personalizzazione dell’interfaccia: Grazie a stili e template, è possibile personalizzare in profondità l’aspetto e il comportamento degli elementi visivi.
- Supporto multipiattaforma con .NET MAUI: L’integrazione di XAML con .NET MAUI consente di creare applicazioni per più piattaforme con un’unica base di codice, riducendo tempi e costi di sviluppo.
Conclusione
XAML è uno strumento potente e flessibile per la creazione di interfacce utente in applicazioni moderne. Con la sua perfetta integrazione in .NET MAUI, gli sviluppatori possono ora creare facilmente applicazioni native multipiattaforma mantenendo un approccio dichiarativo e modulare. La capacità di separare la logica dalla presentazione, combinata con il supporto per il data binding e la personalizzazione, rende XAML una scelta ideale per chi vuole costruire interfacce utente scalabili e ben strutturate.
Se hai domande o desideri una consulenza dedicata, contattaci!