Download Free Open-Source .NET MAUI Controls syncfusion

 

Per chi sviluppa applicazioni .Net con il Framework multi piattaforma MAUI, possono tornare utile i controlli gratuiti ed open source rilasciati da syncfusion.

Una serie di controlli grafici open source e gratuiti, per arricchire i propri progetti.

Qui Open-Source .NET MAUI Toolkit | Syncfusion® il sito, mentre qui GitHub - syncfusion/maui-toolkit: Syncfusion Toolkit for .NET MAUI offers high-quality UI controls to help you build rich, high-performance applications for iOS, Android, macOS, and Windows from a single codebase il sorgente di tali controlli. 

MAUI Utilizzo del controllo Switch con il linguaggio C# Toogle

 

In questo articolo vedremo come utilizzare il controllo "Switch", detto anche controllo "Toogle" in un progetto Windows Application, utilizzando il linguaggio di programmazione C# ed il Framework MAUI.

Utilizzeremo l'ambiente di sviluppo Visual Studio 2022 Community.

Creazione del progetto

Dopo aver creato il progetto o aperto uno nel quale fare i test, occorre aggiungere al progetto un controllo di tipo Label ed un controllo di tipo Switch, il tutto come mostrato nella figura precedente.

Di seguito si riporta il frammento di codice di XAML delle suddette operazioni.

XAML

<Label

     Text=""

     x:Name="lbltesto"  />

 

 <Switch

     x:Name="switchDati"   

     SemanticProperties.HeadingLevel="Level2"

               

     SemanticProperties.Description="Esempio di utilizzo Switch" />

Stesura del codice

Ora che abbiamo aggiunto i controlli, non resta che scoprire alcuni aspetti di questo controllo.

La prima operazione che facciamo è quella di gestire l'evento, in particolare quando il pallino si sposta da una parte. Il Toogle o Switch è un pulsante, dove il pallino posizionato nella parte destra è attivo (ok, o si) e nella parte sinistra è disattivato (non ok o no).

L'evento per gestire è denominato "Toggled", scriviamo nel tag XAML del controllo tale nome evento e poi tramite il segno "=" e l'autocomposizione facciamo definire l'evento. Il tutto sarà come il codice qui di seguito.

XAML

 <Switch

     x:Name="switchDati"  Toggled="OnSwitchToggled"

     SemanticProperties.HeadingLevel="Level2"

               

     SemanticProperties.Description="Esempio di utilizzo Switch" />

Posizioniamo il puntante sulla parola "OnSwitchToggled" e tramite il pulsante della tastiera "F7", passiamo in visualizza codice, in questo modo verrà creato l'evento nella parte codebind, ossia nel linguaggio di programmazione C#, di tale evento.

In questo evento dobbiamo impostare la proprietà "Text" del controllo Label" con del testo. 

Di seguito il frammento di codice delle suddette operazioni

C#

private void OnSwitchToggled(object sender, ToggledEventArgs e)

{

          

    lbltesto.Text = e.Value ? "Attivo" : "Spento";

}

Impostando la proprietà "IsToogle" a true, possiamo visualizzare il controllo impostato con il pallino a destra e non a sinistra come avviene di default, il tutto come mostrato nel frammento di codice qui di seguito.

XAML

<Switch

    IsToggled="True"

               

    x:Name="switchDati"  Toggled="OnSwitchToggled"

    SemanticProperties.HeadingLevel="Level2"

               

    SemanticProperties.Description="Esempio di utilizzo Switch" />

Nel caso che si vuole impostare il colore del controllo  e del pallino, tramite le proprietà rispettivamente "OnColor" e "ThumbColor" possiamo definire gli aspetti grafici.

Di seguito il frammento di codice per impostare il colore del controllo a verde chiaro ed il pallino a blu scuro.

XAML

  <Switch

      IsToggled="True"

      OnColor="YellowGreen"

      ThumbColor="DarkBlue"

               

                

      x:Name="switchDati"  Toggled="OnSwitchToggled"

      SemanticProperties.HeadingLevel="Level2"

               

      SemanticProperties.Description="Esempio di utilizzo Switch" />

Conclusioni

L'articolo ha fornito alcuni aspetti basilari del controllo Switch della tecnologia MAUI. Controllo che negli ultimi anni è sempre stato più utilizzato per indicare valori di tipo "acceso" o "Spento", come se fosse un interruttore o semaforo.

Una tecnologia che migliora di anno in anno e che offre al programmatore un valido strumento per la realizzazione di software multi piattaforma.

Un controllo che semplifica lo sviluppo software.

C# utilizzo del controllo Label con il Framework MAUI

Descrizione

In questo articolo vedremo come utilizzare il controllo label con il Framework MAUI.

Utilizzeremo l’ultima versione del Framework .Net,  al momento è la 9 e l’ultima versione dell’ambiente di Visual Studio 2022 Community.

Creazione del progetto.

Si crea un nuovo progetto .Net MAUI, selezionando l’ultima versione del Framework, che nel momento in cui sto scrivendo è la 9. 

Stesura del codice

Passiamo in visualizzazione codice in modo da scrivere il codice per il caricamento dinamico dei controlli a run time. Supponendo che il controllo “VerticalStackLayout” si chiama “contenuto”, si crea un controllo Label a run time che verrà aggiunto alla form tramite il metodo “Add”.

Si seguito si riporta il frammento di codice per la creazione di controlli aggiunti a run-time.

C#

private void CreaLabel()

{

    Label label = new Label

    {

        TextType = TextType.Html,

        Text = "<b>testo grassetto</b> <u> testo sottolineato</u> ",

        IsVisible = true,

        

    };

    label.HorizontalOptions = LayoutOptions.Center;

     

     contenitore.Add(label);

     (contenitore as IView).InvalidateArrange();

}

Ora non resta che invocare la funzione nel costruttore, di seguito si riporta il codice delle suddette operazioni.

C#

public MainPage()

{

   

    InitializeComponent();

    CreaLabel();

}

Il risultato di tale operazione sarà come mostrato in figura 1.  

Figura 1 – Il risultato della label con la formattazione html

Tramite codice XAML, possiamo impostare una formattazione del testo tipica di quella che si usa nel linguaggio HTML. Per impostare tale modalità, in XAML,, dobbiamo impostare la proprietà “TextType” con il valore HTML .

Di seguito si riporta un frammento di codice per visualizzare il testo formattato in sottolineato, tramite codice HTML, e di colore blu tramite la proprietà textcolor .

C#

 <Label TextType="Html"

   Text="    &lt;u&gt; testo sottolineato  &lt;/u&gt; " TextColor="DarkBlue"

        />

Il risultato sarà come quello riportato in figura 2.

Figura 2 – Il risultato del testo sottolineato

Il controllo Label, permette di avere il testo in colonnato, ossia il testo posizionato uno sopra all'altro.

Di seguito si riporta il frammento di codice delle suddette operazioni, per impostazione di tipo XAML.

XAML

 <Label>

     <Label.Text>

         Prima riga

         Seconda riga

     </Label.Text>

 </Label>

Altra formattazione che possiamo fare, utilizzando sempre lo stile HTML, è quello di applicare il grassetto con il tag “<B>”.

XAML

     <Label

         Text="Testo &lt;b&gt; grassetto  &lt;/b&gt;"

TextType="Html" />

Di seguito il risultato di tale formattazione.

Figura 3 – Formattazione grassetto

Conclusioni

L’articolo ha fornito una breve introduzione sull’uso del controllo Label con il Framework MAUI per la realizzazione di applicazioni multi piattaforma. Il controllo offre una vastità di utilizzi, dando la possibilità al programmatore di realizzare applicazioni anche con aspetti molto professionali con poche righe di codice.

MAUI aggiungere un controllo a run-time, in esecuzione di codice

Il frammento di codice qui di seguito, illustra una tecnica per aggiungere un controllo Label a runtime, ossia mentre viene avviato il progetto, con il Framework MAUI per la piattaforma MAC e Windows.

Supponiamo che il controllo "VerticalStackLayout", che contiene i vari controlli da visualizzare nella finestra si chiama "Contenitore", tramite il metodo "Add" aggiungiamo il controllo Label e con il metodo "InvalidateArrange", aggiorniamo la finestra.

C#

  Label label = new Label

  {

      TextType = TextType.Html,

      Text = "<b>testo grassetto</b> <u> testo sottolineato</u> ",

      IsVisible = true,

      

  };

  label.HorizontalOptions = LayoutOptions.Center;

   

   contenitore.Add(label);

   (contenitore as IView).InvalidateArrange();

Download Essential® UI Kit for .NET MAUI

 

Per tutti coloro che realizzano applicazioni tramite il Framework MAUI, possono trovare interessante gli esempi e modelli resi disponibili gratuitamente da SyncFusion, che aiutano a realizzare applicazioni multi piattaforma.

Come riportato qui https://www.syncfusion.com/essential-maui-ui-kit è possibile scaricare alcuni esempi e modelli per la creazione di applicazioni MAUI. 

C# MAUI animazione di un immagine

Si riporta l'articolo scritto per il sito https://www.iprogrammatori.it/articoli/microsoft-net-framework/art_csharp-maui-animazione-di-un-immagine_1867.aspx 

In questo articolo vedremo come utilizzare alcune classi messe a disposizione del Framework MAUI per gestire le animazioni.

In particolare vedremo come spostare un’immagine dal lato sinistro al lato destro, e capovolgendola, il tutto con poche righe di codice, il tutto come mostrato nelle figure successive.

Figura 1 – L’immagine che si sposta nella form

Figura 2 – L’immagine che ruota 

Utilizzeremo la versione 7 del Framework ed il linguaggio di programmazione C#, ma il codice è utilizzabile anche con altre versioni del Framework.

Creazione del progetto

Si crea un nuovo progetto di tipo MAUI, indicando la versione 7 o altra del Framework, impostando un nome ed il percorso di dove si vuole salvare il progetto.

Una volta creato il progetto, apriamo il file XAML, che è la parte nel quale si trovano i controlli visibili, lasciamo come controllo quello immagine e la label, il resto viene tutto cancellato compresa la parte del codice al quale fa riferimento.

Per il controllo Label, impostiamo la proprietà “Name” con il valore “lblTesto” e la proprietà “Text” con il valore “Esempio Animazione” il tutto come mostrato nel frammento di codice qui di seguito.

XAML

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MauiGrafica.MainPage">

    <ScrollView >

        <VerticalStackLayout 

            

            Spacing="25"

            Padding="30,0"

            VerticalOptions="Center">

            <Image 

                Source="dotnet_bot.png"

                x:Name="imageLogo"

                SemanticProperties.Description="Logo Maui!"

                HeightRequest="200"

                HorizontalOptions="Center" />

            <Label

                x:Name="lblTesto"

                

                Text="Esempio Animazione"

                SemanticProperties.HeadingLevel="Level1"

                FontSize="32"

                HorizontalOptions="Center"  />

           

        

        </VerticalStackLayout>

    </ScrollView>

</ContentPage>

Stesura del codice

Terminata la creazione del progetto e l’impostazione dei controlli non resta che scrivere il codice. Passiamo in visualizzazione codice, nel file CS, e nell’evento del costruttore della classe, dopo “InitializeComponent” scriviamo il codice per l’animazione.

Utilizzeremo la classe “Animation” per eseguire i vari effetti, in particolare impostando alcune proprietà, daremo l’effetto di spostamento indicando dove spostarsi (Destra, sinistra, alto e basso) ed anche il tempo di ogni singola azione.

Ogni effetto sarà un oggetto della classe “Animation” che saranno aggiunti ad un oggetto master, che conterrà tutti i vari oggetti.

Di seguito il frammento completo delle suddette operazioni nel linguaggio C#.

C#

public MainPage()

        {

            InitializeComponent();

 

            var Animazione = new Animation();

           

            var SpostaSinistraAnimazione = new Animation(v => imageLogo.TranslationX = v, 0, 250);

            var TornaIndietroAnimazione = new Animation(v => imageLogo.TranslationX = v, 250, 200);

            var SpostaDestraAnimazione = new Animation(v => imageLogo.TranslationX = v, 500, 700);

 

            var ruotaAnimazione = new Animation(v => imageLogo.Rotation = v, 0, 360);

            var MuoviRotazioneAnimazione = new Animation(v => imageLogo.TranslationX = v, 200, 500);

            var AnimazioneAlta = new Animation(v => imageLogo.TranslationY = v, 0, -200);

            var AnimazioneBassa = new Animation(v => imageLogo.TranslationY = v, -200, 0);

 

            var RotazioneAnimazioneSu = new Animation(v => imageLogo.TranslationY = v, 0, -30);

            var RotazioneAnimazioneGiu = new Animation(v => imageLogo.TranslationY = v, -30, 0);

            var RotazioneAnimazioneSuSeconda = new Animation(v => imageLogo.TranslationY = v, 0, -30);

            var RotazioneAnimazioneGiuSeconda = new Animation(v => imageLogo.TranslationY = v, -30, 0);

            Animazione.Add(0, 0.15, SpostaSinistraAnimazione);

            Animazione.Add(0.25, 0.35, TornaIndietroAnimazione);

 

            Animazione.Add(0.35, 0.65, ruotaAnimazione);

            Animazione.Add(0.35, 0.65, MuoviRotazioneAnimazione);

            Animazione.Add(0.35, 0.5, AnimazioneAlta);

            Animazione.Add(0.5, 0.65, AnimazioneBassa);

 

            Animazione.Add(0.7, 0.75, RotazioneAnimazioneSu);

            Animazione.Add(0.75, 0.8, RotazioneAnimazioneGiu);

            Animazione.Add(0.8, 0.85, RotazioneAnimazioneSuSeconda);

            Animazione.Add(0.85, 0.9, RotazioneAnimazioneSuSeconda);

 

            Animazione.Add(0.9, 1, SpostaDestraAnimazione);

 

            Animazione.Commit(this, "Animazione", 10, 5000, null, null, repeat: () => true);

 

          

        }

Ora non resta che eseguire la nostra applicazione per vedere i vari effetti.

Conclusioni

L’articolo ha voluto fornire una tecnica di animazione sulle immagini utilizzando alcune classi messe a disposizione dal Framework MAUI, numerose sono le tecniche e le classi messe a disposizione di questo Framework, che permettono di applicare effetti speciali nelle varie tipologie di applicazioni.

La tecnica applicata in questo articolo, ha voluto fornire al lettore una delle tante possibilità che si possono fare nello sviluppo multi piattaforma.

MAUI introduzione al controllo webView con .Net 8

Si riporta l'articolo scritto per il sito https://www.iprogrammatori.it/articoli/microsoft-net-framework/art_maui-introduzione-al-controllo-webview-con-dotnet-_1862.aspx

In questo articolo vedremo come utilizzare il controllo per la navigazione internet denominato webView. Un controllo molto conosciuto per chi in passato ha sviluppato applicazioni di tipo Windows Application e voleva dotare le winForm con la navigazione internet.

Il controllo permette di aprire siti indicando il riferimento web del sito che si vuole visualizzare.

In questo articolo, verrà realizzato una semplice applicazione multipiattaforma per visualizzare un sito e riportati alcune funzionalità o eventi del controllo per gestire il cambio del sito, tornare avanti o indietro.

Figura 1 – Il sito che viene aperto nel controllo WebView

Creazione del progetto

Si crea un nuovo progetto MAUI, con l’ultima versione del Framework, nel momento in cui stiamo scrivendo la versione è la 8.

La form che andremo a realizzare sarà composta da un controllo WebView, due pulsante per andare avanti ed indietro con i siti, una casella di testo dove digitare il sito da visitare ed un pulsante che permette di aprire il sito inserito nella casella di testo, il tutto come mostrato in figura 1.

Togliamo i controlli posizionato nel tag “ScrollView” che vengono inseriti inizialmente, per aggiungerli quelli precedentemente indicati.

Terminata la creazione del progetto aggiungere un controllo di tipo webView, impostando la proprietà “Name” con il valore “navigazione” la proprietà “Source” con il sito di iprogrammatori, , impostare la proprietà “WitdhRequest” con il valore “1000” e la proprietà “HeightRequest” con il valore “400”. 

Aggiungete due pulsanti, uno con la proprietà “Name” impostata su “Indietro” e l’altro con il valore “Avanti”, una casella di testo con la proprietà “Name” impostata su “IndirizzoWeb” ed infine un pulsante con la proprietà “Name” impostata su “Vai”.

Di seguito si riporta il frammento di codice della form XAML con i relativi controlli.

XAML

<ScrollView>

     <VerticalStackLayout

         Padding="30,0"

         Spacing="1">

 

         <Label

             Text="Mavigazione"

             Style="{StaticResource Headline}"

             SemanticProperties.HeadingLevel="Level1" />

           

          

         <FlexLayout Direction="Row" >

             <WebView Source="https://www.iprogrammatori.it" WidthRequest="1000" x:Name="navigazione"  HeightRequest="400"   />

             <Button Text="&lt;-" x:Name="Indietro  WidthRequest="100" HeightRequest="30"  />

                     <Button Text="-&gt;" x:Name="Avanti"   WidthRequest="100" HeightRequest="30"   />

         </FlexLayout>

         <FlexLayout Direction="Row" >

             <Editor x:Name="Indirizzoweb" WidthRequest="400"  />

             <Button Text="Vai" x:Name="Vai"     WidthRequest="100" HeightRequest="30"   />

         </FlexLayout>

 

 

     </VerticalStackLayout>

       

 </ScrollView>

 

Come si è visto dal precedente codice impostando la proprietà “source” del controllo WeView, verrà aperto il sito non appena eseguiremo l’applicazione.

Stesura del codice

Ora scriviamo il codice per gestire la navigazione ed altre azioni da compiere.

All’evento click del pulsante con il nome “Vai”, scriveremo il codice che imposta il sito che sarà visualizzato nel controllo webView, utilizzando la proprietà Source.

Di seguito il frammento di codice delle suddette operazioni.

XAML

<Button Text="Vai" x:Name="Vai" Clicked="Vai_Clicked"   WidthRequest="100" HeightRequest="30"   />

C#

private void Vai_Clicked(object sender, EventArgs e)

 {

     if(Indirizzoweb.Text.Trim() != "") {

         navigazione.Source = "https://" + Indirizzoweb.Text.Replace("https://", "");

              

     }

           

 }

Ora non resta che testare il nostro applicativo per vedere il risultato atteso. Digitiamo nella casella di testo un sito per esempio “emanuelemattei.blogspot.com” e facciamo click sul pulsante “Vai”, vedremo aprirsi il nuovo sito.

Riprendiamo la stesura del codice, e nel pulsante denominato “Indietro” scrivere il codice che permette di aprire il sito precedentemente visto prima di aprirne uno. 

Tramite il metodo “GoBack”, verrà riaperto il sito che era visibile nel controllo WebView prima di aprirne uno nuovo.

Di seguito il frammento di codice delle suddette operazioni.

XAML

<Button Text="&lt;-" x:Name="Indietro" Clicked="Indietro_Clicked" WidthRequest="100" HeightRequest="30"  />

C#

private void Indietro_Clicked(object sender, EventArgs e)

{

    navigazione.GoBack();

}

Proviamo ad eseguire il codice, apriamo due siti tramite il pulsante “Vai” e dopo tale apertura facciamo click “Indietro”, in modo da vedere il sito precedente.

Terminate le varie prove, scriviamo il codice per il pulsante con il nome “Avanti”,  che permette di aprire il sito che si visto come prima di fare click sul pulsante “Indietro”. Tramite il metodo “GoForward” del controllo WebView, possiamo aprire il sito che si era visto prima di fare click sul pulsante “Indietro”.

Di seguito si riporta il frammento di codice delle suddette operazioni.

XAML

<Button Text="-&gt;" x:Name="Avanti" Clicked="Avanti_Clicked" WidthRequest="100" HeightRequest="30"   />

C#

private void Avanti_Clicked(object sender, EventArgs e)

 {

     navigazione.GoForward();

 }

Siamo giunti al termine della stesura del codice, non resta che scoprire due eventi del controllo WebView, riguardante la navigazione. In particolare l’evento di quando si sta cambiando sito “Navigating” o di quando si è terminato il caricamento di un nuovo sito (Navigated”.

Di seguito si riporta il frammento di codice delle suddette operazioni.

XAML

<WebView Source="https://www.iprogrammatori.it" WidthRequest="1000" x:Name="navigazione"  HeightRequest="400" Navigated="navigazione_Navigated" Navigating="navigazione_Navigating" />

               

C#

private void navigazione_Navigated(object sender, WebNavigatedEventArgs e)

{

    //Termine della navigazione

    string sito = e.Url;

    DisplayAlert("Risultato navigated", sito, "Chiudi");

}

 

private void navigazione_Navigating(object sender, WebNavigatingEventArgs e)

{

    //Appena passa ad un altro sito

    string sito = e.Url;

    DisplayAlert("Risultato navigated", sito, "Chiudi");

}

Conclusioni

L’articolo ha fornito al lettore alcuni concetti introduttivi di come dotare le applicazioni multipiattaforma realizzate con MAUI di un controllo per la navigazione internet. Per chi ha sviluppato in passato in ambito Windows Form, potrebbe trovare l’utilizzo del controllo WebView molto semplice e simile a quanto avrà sviluppato in tale ambito.

Il lettore in questi esempi basilari potrà dotare ed in maniera veloce e senza problemi l’utilizzo dei siti internet nei propri progetti.

MAUI è una tecnologia che offre al programmatore un valido strumento per la realizzazione delle applicazioni multipiattaforma, mettendo una serie di controlli e classi per uno sviluppo anche molto complesso.