Sviluppo della User Interface in .NET MAUI

User Interface in .Net Maui

INDICE

Cerca nel sito

Cerca inserendo le parole chiave di tuo interesse. Puoi cercare tra centinaia di articoli e decine di pagine informative sul mondo web e blockchain.

Come abbiamo visto nei precedenti articoli .NET MAUI (Multi-platform App UI) è il framework cross-platform di Microsoft che consente agli sviluppatori di creare applicazioni native per Android, iOS, macOS e Windows utilizzando un singolo codice base. Uno dei principali vantaggi di MAUI è la possibilità di sviluppare interfacce utente che si adattano alle diverse piattaforme, mantenendo un’esperienza utente coerente e nativa. In questo articolo ci concentreremo sullo sviluppo della User Interface in .NET MAUI, analizzando le sue caratteristiche principali e come utilizzarle al meglio.

Struttura di Base della User Interface in .NET MAU

La User Interface in .NET MAUI viene sviluppata principalmente utilizzando XAML (Extensible Application Markup Language), come abbiamo visto in un precedente articolo, un linguaggio di markup dichiarativo che consente di definire le interfacce utente in modo pulito e separato dal codice logico. È comunque possibile creare UI anche in puro C#, ma XAML è largamente preferito per via della sua leggibilità e del supporto per il binding dei dati.

Un esempio semplice di layout in XAML per una pagina MAUI potrebbe essere il seguente:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.MainPage">
    <VerticalStackLayout>
        <Label Text="Benvenuto in .NET MAUI!"
               FontSize="24"
               HorizontalOptions="Center" />
        <Button Text="Clicca qui"
                FontSize="18"
                HorizontalOptions="Center"
                Clicked="OnButtonClicked" />
    </VerticalStackLayout>
</ContentPage>

In questo esempio, la pagina contiene un layout impilato verticalmente (VerticalStackLayout) con una label e un pulsante. L’interazione dell’utente con il pulsante può essere gestita tramite eventi come Clicked, collegato a un handler di eventi nel codice C#.

Layout e Contenitori

.NET MAUI offre una serie di layout e contenitori per organizzare gli elementi della UI:

  • StackLayout: Dispone i controlli in una singola colonna o riga. È semplice da usare per layout verticali o orizzontali.
  • Grid: Permette di creare layout a griglia, suddividendo lo schermo in righe e colonne. È più complesso dello StackLayout ma offre maggiore flessibilità.
  • FlexLayout: Un layout flessibile che può disporre gli elementi in base alla loro dimensione e posizione, utile per interfacce più dinamiche.
  • AbsoluteLayout: Posiziona gli elementi in base a coordinate assolute, dando pieno controllo sulla posizione e le dimensioni dei controlli, ma sacrificando la responsività.
  • ContentView: Un contenitore che può contenere un singolo figlio e che spesso viene utilizzato per creare componenti riutilizzabili.

Controlli di Base

.NET MAUI fornisce una serie di controlli di base per costruire interfacce utente interattive:

  • Button: Un pulsante interattivo che risponde a eventi di clic.
  • Label: Utilizzato per visualizzare testo non modificabile.
  • Entry: Un campo di testo che permette l’inserimento di dati da parte dell’utente.
  • Editor: Simile a Entry, ma consente l’inserimento di testo su più righe.
  • Image: Utilizzato per visualizzare immagini, supportando diversi formati di file.

Ogni controllo è personalizzabile tramite proprietà come Text, FontSize, BackgroundColor, e molti altri. Inoltre, è possibile gestire eventi specifici associati ai controlli, come Clicked per i pulsanti o TextChanged per i campi di testo.

Responsive Design e Adaptive Layouts

Uno degli obiettivi chiave di .NET MAUI è creare interfacce che funzionino su schermi di dimensioni diverse, adattandosi in modo ottimale al contesto. Per garantire che la UI sia responsiva, .NET MAUI fornisce strumenti come:

  • VisualStateManager: Consente di definire stati visivi per i controlli, in modo che possano adattarsi a diverse condizioni, come la dimensione della finestra o lo stato dell’interazione.
  • OnPlatform e OnIdiom: Utilizzati per applicare differenti valori o layout in base alla piattaforma o al tipo di dispositivo (telefono, tablet, desktop).

Ad esempio, possiamo definire un layout che utilizza un numero diverso di colonne a seconda del dispositivo:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <OnIdiom x:TypeArguments="ColumnDefinitionCollection">
            <OnIdiom.Phone>
                <ColumnDefinition Width="*" />
            </OnIdiom.Phone>
            <OnIdiom.Desktop>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </OnIdiom.Desktop>
        </OnIdiom>
    </Grid.ColumnDefinitions>
</Grid>

Binding e MVVM (Model-View-ViewModel)

Il pattern MVVM è il paradigma architetturale utilizzato in .NET MAUI per separare la logica della UI dai dati e dalla logica di business. Questo pattern facilita il data binding, un meccanismo che permette di collegare le proprietà dei controlli alle proprietà del ViewModel. Questo approccio rende il codice più testabile e riutilizzabile.

Un esempio di data binding:

<Label Text="{Binding UserName}" />
<Entry Text="{Binding UserName}" />
<Button Text="Login" Command="{Binding LoginCommand}" />

In questo caso, il controllo Entry permette di modificare la proprietà UserName del ViewModel, e il Button esegue il comando LoginCommand quando viene cliccato.

Stili e Temi

Come in altri framework, anche in .NET MAUI è possibile applicare stili e temi per mantenere un aspetto coerente nell’applicazione. È possibile definire stili direttamente in XAML o in file separati e applicarli globalmente o a controlli specifici. Inoltre, .NET MAUI supporta temi scuri e chiari, che possono essere configurati in base alle impostazioni del sistema operativo.

Un esempio di stile:

<Style TargetType="Label">
    <Setter Property="TextColor" Value="Black" />
    <Setter Property="FontSize" Value="20" />
</Style>

Conclusione

Lo sviluppo della User Interface in .NET MAUI offre flessibilità e potenza grazie alla sua integrazione con XAML, al supporto per diverse piattaforme e all’adozione del pattern MVVM. La capacità di creare layout responsive e dinamici, unita alla possibilità di utilizzare binding e comandi, rende questo framework una scelta ideale per lo sviluppo di applicazioni moderne e performanti. Con la sua versatilità, .NET MAUI permette di ottimizzare l’esperienza utente senza dover riscrivere codice per ogni piattaforma, risparmiando tempo e risorse.

Se hai domande o desideri una consulenza dedicata, contattaci!

Servizi di sviluppo IT che forniamo sia ai clienti finali, sia alle altre aziende di sviluppo in subappalto in white label