Vantaggi offerti dall'uso del linguaggio XAML
XAML è un linguaggio di markup che può essere usato per creare l'interfaccia utente al posto del codice C#. Con XAML, è possibile separare il codice dell'interfaccia utente da quello del comportamento per rendere più semplice la gestione di entrambi.
In questa unità si confronterà l’uso di XAML con la definizione del layout dell'interfaccia utente usando il codice C#. Si apprenderanno anche alcuni dei vantaggi dell'uso di XAML come linguaggio di markup per definire l'interfaccia utente.
Che cos'è un linguaggio di markup?
Un linguaggio di markup è un linguaggio di programmazione che è possibile usare per introdurre diversi elementi in un documento. Per descrivere gli elementi vengono usati tag predefiniti. I tag hanno un significato specifico nel contesto del dominio in cui viene usato il documento.
È ad esempio possibile usare il linguaggio HTML (Hypertext Markup Language) per creare una pagina Web visualizzabile in un Web browser. Non è necessario comprendere tutti i tag usati nell'esempio seguente; ciò che è importante vedere è che questo codice descrive un documento con il testo "Hello World!" come contenuto.
<!DOCTYPE html>
<html>
<body>
<p>Hello <b>World</b>!</p>
</body>
</html>
Probabilmente si è già lavorato con un linguaggio di markup, creando ad esempio una pagina Web in HTML o modificando le definizioni di codice XML (Extensible Markup Language) in un file project.csproj di Visual Studio. Gli strumenti di compilazione Microsoft analizzano ed elaborano questo file.
I file che contengono linguaggio di markup vengono spesso elaborati e interpretati da altri strumenti software. Questo carattere interpretativo del markup corrisponde esattamente al modo in cui dovrebbe funzionare il linguaggio XAML. Sono tuttavia gli strumenti software che lo interpretano a consentire la generazione dell'interfaccia utente dell'app.
Che cos'è XAML?
XAML è un linguaggio di markup dichiarativo creato da Microsoft. Questo linguaggio è stato progettato per semplificare il processo di creazione dell'interfaccia utente nelle applicazioni.
I documenti XAML che vengono creati contengono elementi che descrivono in modo dichiarativo gli elementi dell'interfaccia utente dell'applicazione. Tenere presente che questi elementi della sintassi XAML rappresentano direttamente le istanze degli oggetti. Dopo aver definito un elemento in XAML, è possibile accedervi nei file code-behind e definire il comportamento usando codice C#.
Differenza tra XAML .NET MAUI e XAML Microsoft
XAML è basato sulla specifica Microsoft 2009 XAML, che definisce solo la sintassi del linguaggio. Come per Windows Presentation Foundation (WPF), Universal Windows Platform (UWP) e WinUI 3, che usano tutti il linguaggio XAML, gli elementi dichiarati nella sintassi XAML cambiano.
XAML è stato rilasciato per la prima volta nel 2006, con WPF. Se si è già usato XAML di Microsoft per un certo tempo, la sintassi XAML dovrebbe risultare familiare.
Ci sono alcune differenze chiave tra la versione .NET MAUI di XAML e XAML utilizzato da altri strumenti dell'interfaccia utente. La struttura e i concetti sono simili, ma alcuni nomi delle classi e delle proprietà sono diversi.
Creare un'interfaccia utente utilizzando XAML .NET MAUI
Il modo migliore per vedere in azione XAML consiste nell'esaminare un esempio di un tipo di pagina ContentPage esistente in codice C#. e confrontarlo con un'altra pagina in cui è presente la stessa interfaccia utente definita tramite XAML.
Si supponga che nell'app sia codificato l'oggetto ContentPage seguente:
namespace MauiCode;
public partial class MainPage : ContentPage
{
Button loginButton;
VerticalStackLayout layout;
public MainPage()
{
this.BackgroundColor = Color.FromArgb("512bdf");
layout = new VerticalStackLayout
{
Margin = new Thickness(15, 15, 15, 15),
Padding = new Thickness(30, 60, 30, 30),
Children =
{
new Label { Text = "Please log in", FontSize = 30, TextColor = Color.FromRgb(255, 255, 100) },
new Label { Text = "Username", TextColor = Color.FromRgb(255, 255, 255) },
new Entry (),
new Label { Text = "Password", TextColor = Color.FromRgb(255, 255, 255) },
new Entry { IsPassword = true }
}
};
loginButton = new Button { Text = "Login", BackgroundColor = Color.FromRgb(0, 148, 255) };
layout.Children.Add(loginButton);
Content = layout;
loginButton.Clicked += (sender, e) =>
{
Debug.WriteLine("Clicked !");
};
}
}
La pagina include un contenitore di layout, due etichette, due voci e un pulsante. Il codice gestisce inoltre l'evento Clicked relativo al pulsante. Vi sono solo alcune proprietà di progettazione impostate negli elementi della pagina. In fase di esecuzione, in un dispositivo Android la pagina ha questo aspetto:
Anche se la pagina ha una struttura semplice, include sia la logica del comportamento sia i dati relativi alla struttura nello stesso file.
Lo stesso layout di pagina definito con XAML è simile al seguente:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiXaml.Page1"
BackgroundColor="#512bdf">
<VerticalStackLayout Margin="15" Padding="30, 60, 30, 30">
<Label Text="Please log in" FontSize="30" TextColor="AntiqueWhite"/>
<Label Text="Username" TextColor="White" />
<Entry />
<Label Text="Password" TextColor="White" />
<Entry IsPassword="True" />
<Button Text="Log in" BackgroundColor="#0094FF" Clicked="LoginButton_Clicked" />
</VerticalStackLayout>
</ContentPage>
Il codice C# che inizializza la pagina e implementa il gestore dell'evento per l'evento Clicked del controllo LoginButton nel file code-behind è simile al seguente:
namespace MauiXaml;
public partial class Page1 : ContentPage, IPage
{
public Page1()
{
InitializeComponent();
}
void LoginButton_Clicked(object sender, EventArgs e)
{
Debug.WriteLine("Clicked !");
}
}
Nota
Il metodo InitializeComponent nel costruttore di pagina legge la descrizione XAML della pagina, carica i vari controlli in tale pagina e imposta le relative proprietà. Questo metodo viene chiamato solo se si definisce una pagina utilizzando il markup XAML. L'esempio precedente che mostra come creare l'interfaccia utente utilizzando il codice C# non richiama InitializeComponent.
Questa struttura prevede la separazione tra struttura grafica e comportamento. L'intera dichiarazione dell'interfaccia utente è contenuta in un singolo file di origine dedicato, separato dal comportamento dell'interfaccia utente. Inoltre, il markup XAML fornisce maggiore chiarezza agli sviluppatori che cercano di comprendere l'aspetto dell'applicazione.
Vantaggi offerti dall'uso del linguaggio XAML
L'uso di XAML consente di separare la logica di comportamento dalla progettazione dell'interfaccia utente. Questa separazione consente di creare ogni componente in modo indipendente, rendendo l'app più facile da gestire man mano che vengono aggiunte nuove funzionalità.
Questo approccio consente inoltre ai progettisti dell'interfaccia utente di lavorare sull'aggiornamento dell'aspetto dell'interfaccia utente usando gli strumenti di modifica XAML separatamente dagli sviluppatori che aggiornano la logica dell'interfaccia utente.