MAUI .Net 7 la gestione delle immagini con C#

Si riporta l'articolo scritto per il sito https://www.iprogrammatori.it/articoli/microsoft-net-framework/art_maui-dotnet-7-la-gestione-delle-immagini-con-cshar_1845.aspx

In questo articolo verrà illustrata la gestione delle immagini e come dotare le nostre applicazioni con l’utilizzo di file immagini per renderle più accattivanti e di facile utilizzo.

L’articolo riguarderà il linguaggio di programmazione C# e l’ultima versione del framework .Net 7 utilizzando MAUI per realizzare applicativi multipiattaforma, ossia su diversi ambienti (Windows forms e smartphone) e per vari utilizzi. L’ambiente di sviluppo utilizzato è Visual Studio 2022 community, ma vanno bene anche versioni successive.

Creazione del progetto

Si crea un nuovo progetto di tipo MAUI, selezionando come versione del Framework l’ultima versione, al momento in cui è pubblicato l’articolo la versione è la 7, e nella finestra successiva assegnare un nome e percorso di proprio interesse.

Una volta aperto il progetto, nel file XAML, dei vari controlli proposti lasciamo quello di tipo Image ed un controllo di tipo “Label”, in modo che non sono presenti altri controlli, tenendo conto di cancellare quella parte di codice “C#” che faceva riferimento ai controlli cancellati, permettendo di evitare errori durante la compilazione del progetto.

Si riporta il codice XAML, della parte contenitore dei controlli e con la modifica della label con del testo e della proprietà descrizione del controllo image con un testo modificato.

XAML

<ScrollView>

        <VerticalStackLayout

            Spacing="25"

            Padding="30,0"

            VerticalOptions="Center">

 

            <Image

                Source="dotnet_bot.png"

               

                SemanticProperties.Description="Immagine"

                HeightRequest="200"

                HorizontalOptions="Center" />

            <Label

                Text="Esempio immagine"

                SemanticProperties.HeadingLevel="Level2"

                SemanticProperties.Description="Esempio Immagine"

                FontSize="18"

                HorizontalOptions="Center" />

 

           

 

        </VerticalStackLayout>

    </ScrollView>

 

 

Stesura del codice

Dopo aver impostato il progetto, non resta che effettuare le prime modifiche.

La proprietà “Source” del controllo image permette di impostare il file immagine, che può essere un sito oppure un file fisico, proviamo ad inserire il logo del sito www.iprogrammatori.it che si trova in https://www.iprogrammatori.it/images/logo-iprogrammatori.png 

Di seguito il frammento di codice XAML con la proprietà source che punta al logo del sito iprogrammatori.

XAML

 

            <Image

                Source="https://www.iprogrammatori.it/images/logo-iprogrammatori.png"

               

                SemanticProperties.Description="Immagine"

                HeightRequest="200"

                HorizontalOptions="Center" />

Eseguiamo il codice appena modificato ed il risultato sarà come in figura 1.

Figura 1 – Il logo che viene visualizzato nello smartphone Android

Il prossimo esempio di codice sarà quello di utilizzare un file presente su pc, ed utilizzarlo come risorsa, possiamo salvare il logo del sito iprogrammatori utilizzato in precedenza oppure uno di proprio interesse.

Per utilizzare i file immagine nel proprio progetto “Maui” occorre aggiungere il file nella cartella “Images” situata nella cartella padre “Resources”, riferimenti che sono usati per la gestione delle risorse.

Dalla finestra “Esplora Risorse” facciamo click con il tasto destro sulla cartella “Images” e dal menu che viene aperto, selezioniamo “Aggiungi” e poi “Elemento Esistente…”., in questo modo verrà aperta una finestra nel quale selezionare il file che si vuole aggiungere, il tutto come mostrato in figura 2.

Figura 2 – Il file immagine aggiunto alla cartella “Images”.

Modifichiamo la proprietà “Source” del controllo “Image”, con il nome del file, il tutto come mostrato nel frammento di codice qui di seguito.

XAML

<Image

                Source="logo.png"

               

                SemanticProperties.Description="Immagine"

                HeightRequest="200"

                HorizontalOptions="Center" />

Automaticamente verrà caricato nel controllo l’immagine indicando solo il nome del file immagine.

Nel caso che invece si vuole applicare un effetto grafico all’immagine, per esempio la forma ovale, tramite le classi per la creazione di disegni geometriche possiamo applicare alcuni effetti.

Di seguito un frammento di codice che applica all’immagine utilizzata nei precedenti esempi, l’effetto ovale, il tutto per mostrare l’immagine come riportato in figura 3.

XAML

<Image  HorizontalOptions="Center"

                        VerticalOptions="Center"

                        Grid.Column="1"

                        WidthRequest="115"

                        HeightRequest="95"

                        Aspect="AspectFill"

                        Source="https://www.iprogrammatori.it/images/logo-iprogrammatori.png">

                <Image.Clip>

                    <EllipseGeometry

                                Center="60,60"

                                RadiusX="60"

                                RadiusY="60"/>

                </Image.Clip>

            </Image>

Figura 3 – L’immagine in forma ovale

Se invece dobbiamo visualizzare una griglia contenente delle immagini disposte in maniera orizzontale, tramite il controllo “collectionView” e tramite l’array di un oggetto di tipo Image, possiamo realizzare tale visualizzazione, il tutto come mostrato in figura 4.

Figura 4 – La visualizzazione in griglia di tre immagini.

Nel file XAML, sostituiamo il controllo “ScrollView” e tutto il suo contenuto, per inserire il seguente frammento codice.

XAML

<CollectionView ItemsSource="{Binding ImageList}"

                ItemsLayout="VerticalGrid, 3">

        <CollectionView.ItemTemplate>

            <DataTemplate>

                <Image Margin="100"

                       Source="{Binding Source}"

                       Aspect="AspectFill"

                       WidthRequest="100"

                      />

            </DataTemplate>

        </CollectionView.ItemTemplate>

    </CollectionView>

Di seguito si riporta tutto il file XAML del file Mainpage.XAML

XAML

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

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

             x:Class="MauiAppImage.MainPage">

    <CollectionView ItemsSource="{Binding ImageList}"

                ItemsLayout="VerticalGrid, 3">

        <CollectionView.ItemTemplate>

            <DataTemplate>

                <Image Margin="100"

                       Source="{Binding Source}"

                       Aspect="AspectFill"

                       WidthRequest="100"

                      />

            </DataTemplate>

        </CollectionView.ItemTemplate>

    </CollectionView>

 

 

</ContentPage>

In questo modo abbiamo applicato alla nostra pagina una griglia che visualizzerà a video un array di immagini.

Terminata questa stesura di codice, aggiungiamo nella cartella “Images” di “Resource” tre file, che avranno rispettivamente il nome file1.png, file2.png e file3.png.

Siamo giunti alla scrittura del codice, passiamo in visualizzazione codice, e nella dichiarazione di form o meglio di classe, prima del costruttore, aggiungiamo una proprietà di tipo pubblica di tipo lista Image, di seguito si riporta il frammento di codice delle suddette operazioni.

C#

public List<Image> ImageList { get; set; }

Continuando a scrivere, dobbiamo creare una funzione che aggiunge nell’oggetto lista di tipo Image i tre file precedentemente aggiunti nella cartella, il tutto lo faremo effettuando un ciclo ed utilizzando il metodo “FromFile” della classe “ImageSource”.

Si riporta di seguito la funzione con le suddette operazioni.

C#

private void GetImmagini()

    {

        var list = new List<Image>();

        for (int i = 1; i < 4; i++)

        {

            list.Add(new Image() { Source = ImageSource.FromFile("file"+i+".png") });

        }

        ImageList = list;

    }

Nel costruttore della classe, chiamiamo la funzione appena creata, in modo da caricare i file nella griglia ed inizializziamo anche il “BindingContext”, di seguito si riporta il codice C# delle suddette operazioni.

C#

public MainPage()

      {

            InitializeComponent();

        GetImmagini();

        BindingContext = this;

    }

A questo punto abbiamo completato la stesura del codice non resta che eseguire la nostra applicazione per vedere il risultato finale.

Vediamo come utilizzare un pulsante immagine che al click visualizzi un messaggio a video.

Passiamo in visualizzazione XAML, ed aggiungiamo un controllo ImageButton, tenendo conto di ripristinare il progetto iniziale, quello con i controlli “ScrollViewer” e “VerticalStackLayout”, di seguito il frammento di codice XAML.

XAML

<ScrollView>

        <VerticalStackLayout

            Spacing="25"

            Padding="30,0"

            VerticalOptions="Center">

            <ImageButton Source="logo.png"

                 Margin="10,10,10,10"

                 BackgroundColor="AliceBlue "

                 WidthRequest="50"

                 HeightRequest="50"

                    HorizontalOptions="Center"

                    VerticalOptions="Center"

                         x:Name="ImbPulsante"

                         Clicked="ImbPulsante_Clicked"

                         />

        </VerticalStackLayout>

    </ScrollView>

Passiamo in visualizzazione codice per l’evento click del pulsante, e scriviamo il codice per visualizzare un messaggio a video, di seguito il frammento di codice delle suddette operazioni.

C#

private void ImbPulsante_Clicked(object sender, EventArgs e)

    {

        DisplayAlert("Esempio immagine", "click", "OK");

    }

Come si è visto dal precedente esempio di codice il controllo ImageButton, è dotato dell’evento “clicked”, ma nel caso che si vuole aggiungere un evento click, che sarà chiamato “Tapped”, occorre aggiungere la sotto proprietà “GestureRecognizers”, di seguito il frammento  di codice XAML per aggiungere l’evento click ad un controllo Image.

XAML

<Image Source="Logo.png"

                   x:Name="ImgPulsante"

                   BackgroundColor="Blue"

                 WidthRequest="400"

                 HeightRequest="100"

                    HorizontalOptions="Center"

                    VerticalOptions="Center" >

                <Image.GestureRecognizers>

                    <TapGestureRecognizer Tapped="ImgClick"/>

                </Image.GestureRecognizers>

            </Image>

Mentre qui di seguito il codice del linguaggio C# per l’evento click.

C#

private void ImgClick(object sender, TappedEventArgs e)

    {

        DisplayAlert("Esempio immagine", "click", "OK");

    }

 

Conclusioni

L’articolo ha fornito al lettore le informazioni basi ed indispensabili per avvicinarsi all’utilizzo delle immagini nelle proprie applicazioni di tipo MAUI, riportando alcuni esempi su vari ambiti. L’utilizzo delle immagini nelle moderne applicazioni è una scelta obbligatoria per renderle più amichevoli ma soprattutto accattivante e fornire all’utilizzatore la facilità di utilizzo.

Con il Framework MAUI .Net versione 7, la programmazione multipiattaforma è sempre più semplificata, anche se occorre spesso predisporre il progetto per il sistema operativo finale su cui dovrà essere eseguita l’applicazione.

Modifica punti per il programma Microsoft Rewards

 

Per chi utilizza il bellissimo programma Microsoft Rewards, che permette di avere buoni regali per diversi brand internazionali, quali Ikea, OVS, Mediaworld ed altri ancora, nel mese di dicembre sono stati modificati i punti.

In particolare nella sezione altre attività i punti non sono più da 10, ma da 1 o 2.

Un peccato, perchè la diminuzione dei punti, allunga il periodo per avere buoni su determinati prodotti.

Qui https://emanuelemattei.blogspot.com/2022/12/nuovi-regali-per-il-programma-microsoft.html avevo parlato del programma. 

.Net Windows Forms controllo Microsoft Edge WebView2

 

Nell'eventualità che sviluppate applicazioni che devono offrire funzionalità di navigazione internet, il controllo Microsoft Edge WebView2, qui https://learn.microsoft.com/it-it/microsoft-edge/webview2/?form=MA13LH la pagina introduttiva, permette di aggiungere alle proprie applicazioni .Net la possibilità di avere un controllo per la navigazione internet.

Qui https://learn.microsoft.com/it-it/microsoft-edge/webview2/get-started/get-started trovate alcuni esempi, mentre qui https://learn.microsoft.com/it-it/microsoft-edge/webview2/get-started/winforms esempio per Windows Forms con il linguaggio C#

Strumento online per la condivisione dei video

 

Il sito https://videocloak.com/ offre un servizio gratuito e senza registrazione e senza lasciare il proprio indirizzo email, per condividere i propri video.

Una volta caricato il proprio video, verrà fornito un link il quale sarà visibile online.

Il servizio è gratuito ed in lingua inglese.

Angular matsort not working with ngif

Quando si utilizza il framework Material di Angular, può capitare che nell'uso dell'ordinamento dei dati in un controllo Table, questo non funzioni se la tabella si trova dentro ad una direttiva *NgIf.

Per risolvere tale situazione occorre inizializzare l'oggetto di tipo MatSort con il puntamento alla funzione con il quale si utilizza l'ordinamento.

Nel file TypeScript, scrivere il seguente frammento di codice:

private  sort: MatSort;

   @ViewChild(MatSort) set matSort(ms: MatSort) {

    this.sort = ms;

    this.NomeFunzione();

  }

Dove "this.NomeFunzione" è la funzione in cui viene utilizzato l'ordinamento.

Programma gratuito di gestione file multimediali mediamonkey

 

Un programma gratuito e molto ben fatto per la gestione dei file multimediali in particolari di file audio video.

Il software Media Monkey scaricabile qui https://www.mediamonkey.com/ , offre funzionalità e gestione dei file molto ben fatto.

Per il download e maggiori informazioni visitate il sito che è in lingua inglese.

Motore di ricerca Bing tema natalizio

 

In questi giorni il motore di ricerca Bing, visibile qui https://www.bing.com/?cc=it offre una funzionalità molto carina, quella di impostare il tema natalizio tramite i pulsanti situati nella parte inferiore.

E' possibile aggiungere, le luci, un camino, la musica, la neve, il ghiaccio oppure l'aurora boreale. Molto ben fatto e piacevole.

Download browser arc

 

Il browser Arc, è un nuovo programma gratuito alternativo a tanti browser per la navigazione internet.

Il software è di recente pubblicazione e permette una navigazione più anonima e veloce.

Al momento il software e sito sono in lingua inglese. Per maggiori informazioni e download visitate il seguente sito https://arc.net/

phishing email truffa

 

Il Phishing è un tecnica di truffare alcune persone con siti ed email che sembrano dei veri mittenti che invece non lo so. Una tecnica ingannevole attiva da diversi anni che truffa persone con informazioni false per estrapolare informazioni importanti, in particolare dati di accesso o informazioni bancarie.

Di seguito alcune immagine di un'email di tipo Phishing che sembra di Aruba.

Come facciamo a riconoscere un'email falsa.

La prima cosa da fare è quella di verificare la correttezza del mittente, ossia colui che ci scrive, come si vede nella figura di seguito, sembra che ci scrive aruba, e poi l'indirizzo email è tutt'altro.

Altra considerazione da effettuare è il link presente nel corpo dell'email. Se il mittente è identico ad un possibile indirizzo del mittente, di certo il link non lo sarà. 

Avvicinate il puntatore del mouse senza fare click sul link o la voce dove dice area riservata (come in questo caso) o altro collegamento con altra dicitura, per verificare in anteprima dove riporta.

Come si vede nella figura di seguito, posizionando il mouse sopra il collegamento (senza fare click ) presente nell'email, viene visualizzato un link che non è di certo quello di Aruba. 

Questi piccoli accorgimenti evitano problemi di truffa. Eliminate subito l'email.

Importante è non aprire file allegati e non fare click nei link forniti.

Programma gratuito per la gestione dei file musicali player audio music bee

 

Un software molto ben fatto che offre una grafica accattivante ma soprattutto interessanti funzionalità.

Parliamo del programma gratuito Music Bee, scaricabile qui https://www.getmusicbee.com/, per sistemi operativi Windows.

Download gioco gratuito Mighty Fight Federation

 

Altro nuovo gioco di combattimento da scaricare gratuitamente per sistemi operativi Windows, offerta da EpicGames.

Il gioco Mighty Fight Federaction, in lingua inglese è un gioco con una grafica molto interessante.

Fino al 7 dicembre 2023 il gioco si potrà scaricare gratuitamente dopo tale data il download sarà a pagamento.

Per maggiori informazioni e download visitate il seguente sito https://store.epicgames.com/it/p/mighty-fight-federation

.Net Gaming formazione ed articoli sulla creazione di video giochi

 

La creazione di video giochi con la tecnologia .Net in questi ultimi due anni si sta facendo sempre più interessante ed alla portata di ogni sviluppatore.

La creazione dei video giochi richiede però la conoscenza di questo tipo di progetti e componenti appositi, di seguito un elenco di siti per iniziare a scrivere codice in ambito .Net Gaming.

Qui https://devblogs.microsoft.com/dotnet/choose-a-net-game-engine/ un post con vari riferimenti sui vari componenti gratuiti, mentre qui https://devblogs.microsoft.com/dotnet/game-development-with-net/ altro post sullo sviluppo dei video giochi.

Qui https://dotnet.microsoft.com/apps/games?WT.mc_id=gamedev-blog-abhamed il nuovo portale per la creazione dei video giochi, mentre qui https://dotnet.microsoft.com/learn/games?WT.mc_id=gamedev-blog-abhamed l'area formativa, qui https://dotnet.microsoft.com/learn/games/unity-tutorial/intro?WT.mc_id=gamedev-blog-abhamed l'area formativa Unity.

Che dire, buona programmazione e buon divertimento.

download gioco Jitsu Squad

 

Fino al 7 dicembre 2023 si potrà scaricare il gioco gratuito di combattimento Jitsu Squad, per un pubblico adulto.

Il gioco è in lingua inglese e per sistemi operativi Windows.

Per maggiori informazioni e download visitare il seguente sito https://store.epicgames.com/it/p/jitsu-squad-af3f2f

Programmi gratuiti per la creazione di video giochi

Di seguito si riporta una lista dei programmi gratuiti per la creazione di video giochi.

https://gdevelop.io/it-it 

https://ctjs.rocks/it/

https://microstudio.dev/it/

https://flowlab.io/

https://www.renpy.org/

https://www.adventuregamestudio.co.uk/

https://goxel.xyz/

https://www.nunustudio.org/ 

https://www.ambiera.com/coppercube/

https://make.gamefroot.com/

https://signup.buildbox.com/

https://rpg-paper-maker.com/

https://haxeflixel.com/

LDtk – 2D level editor

Fyrox - A feature-rich game engine built in Rust

Programmi gratuiti per Windows

Di seguito si riportano una serie di programmi gratuiti da installare ed utilizzare sul sistema operativo Windows.

Quando si acquista un nuovo pc, è necessario installare alcuni programmi di utilità quotidiana, ma che a volte non troviamo, di seguito una serie di programmi divisi per categorie:

Lettore file pdf (Adobe):

Sono programmi per aprire i file di sola lettura di Adobe, quelli con estensione "pdf".

Di seguito la lista:

 

Adobe: Programma gratuito per la lettura e compilazione dei moduli dei file Pdf. Download qui https://get.adobe.com/it/reader/

Office Automation: 

Sono programmi che offrono la possibilità di una gestire vari tipologie di file quali video scrittura per la stesura delle lettere, foglio di calcolo per operazioni di contabilità e matematici, presentazioni e tanto altro.

Di seguito la lista dei programmi gratuiti da installare uno tra quelli presenti:

Onlyoffice: https://www.onlyoffice.com/it/download-desktop.aspx?from=home-use 

Libre Office: https://it.libreoffice.org/ 

Sono entrambi molto validi, anche se OnlyOffice offre qualcosa in più.

Office online: Suite di Microsoft, gratuita se utilizzata con un account gratuito Microsoft quale indirizzo email outlook o altri. www.outlook.it per accedere.

Navigazione internet browser:

Programmi che permettono di navigare in internet, ossia aprire i vari siti.

Da installare uno o più di uno dall'elenco qui di seguito:

Browser Chrome:  https://www.google.com/intl/it_it/chrome/ 

Grafica:

Programmi per la modifica di immagini o creazione di immagini.

Da installare uno o più dall'elenco qui di seguito in base alle proprie esigenze.

Paint.Net: programma di grafica: Un programma gratuito con codice sorgente, per realizzare immagini anche professionali https://www.getpaint.net/index.html 

Teleassistenza:

Programmi che permettono di collegarsi ad altro pc, per offrire assistenza o prendere il controllo da remoto, permette di vedere cosa accade in un altro pc che è collegato.

Da installare uno dall'elenco qui di seguito.

TeamViewer:  https://www.teamviewer.com/it/

Supremo: https://www.supremocontrol.com/it/

Opzionali.

VPN:

Sono programmi che permettono di avere più sicurezza su internet, e sono utili per nascondere il proprio indirizzo ip.

Avira VPN https://www.avira.com/it/free-vpn

Sicurezza del pc:

Programmi che permettono di proteggere il proprio pc.

Avira free Security https://www.avira.com/it/free-security

Pulizia Adware

AdwCleaner - Strumento gratuito di pulizia e rimozione adware | Malwarebytes

Protezione Malware

Software anti malware e antivirus gratis per pc windows e sicurezza pc| IObit Malware Fighter | IObit

Video Editing

Vimix

https://brunoherbelin.github.io/vimix/

Audio Editing

Ardour

https://ardour.org/