C# .Net MAUI la gestione della posizione del mouse nelle immagini.

In questo articolo vedremo come gestire la posizione del mouse in un’immagine in un progetto di .Net 7 Framework MAUI per la multipiattaforma, con il linguaggio di programmazione C# ed ambiente di sviluppo Visual Studio 2022.
Il controllo Image, tramite i suoi eventi di mouse quale “PointerEntered” che viene scatenato quando il mouse entra nell’area dell’immagine, l’evento “PointerExited” quando il puntatore del mouse esce dall’area dell’immagine e l’evento “PointerMoved” quando si sposta all’interno dell’area dell’immagine, possiamo gestire la posizione ed altri aspetti che possono tornare utile nello sviluppo di applicazioni.
Questi eventi si possono gestire solo per ambiente “Ipad”, “Mac Catalyst” e “Windows Application” .
Il risultato sarà come mostrato in figura 1.

Figura 1 – Le coordinate del mouse nell’immagine.

Creazione del progetto

Si crea un nuovo progetto di tipo “App .Net MAUI” e nella finestra successiva si sceglie il nome ed il percorso dove creare il progetto, nella finestra successiva, selezionare la versione 7 del Framework, a questo punto si crea il progetto.
Tra i controlli creati di default che troviamo nel progetto, cambiamo nel controllo “Image” l’immagine, puntando al logo del sito “Iprogrammatori” tramite percorso web, il tutto come rappresentato dal codice XAML qui di seguito.

XAML
  <Image
               SemanticProperties.Description="logo"
               HeightRequest="200"
               HorizontalOptions="Center"
               Source="https://www.iprogrammatori.it/images/logo-iprogrammatori.png" 
                x:Name="ImgLogo"
               >

Sempre per il controllo Image, si aggiunge il sotto nodo “Image.GestureRecognizers” per la gestione degli eventi, mettendo per i vari eventi (mouse che entra nell’immagine, mouse che esce dell’area dell’immagine e mouse che si sposta all’interno dell’area dell’immagine) il gestore degli eventi per ognuno.
Di seguito si riporta il codice completo delle suddette operazioni e di tutto il controllo “Image”.

XAML
<Image
               SemanticProperties.Description="logo"
               HeightRequest="200"
               HorizontalOptions="Center"
               Source="https://www.iprogrammatori.it/images/logo-iprogrammatori.png" 
                x:Name="ImgLogo"
               >
               <Image.GestureRecognizers>
                   <PointerGestureRecognizer PointerEntered="PointerGestureRecognizer_PointerEntered"  PointerExited="PointerGestureRecognizer_PointerExited" PointerMoved="PointerGestureRecognizer_PointerMoved">
                   </PointerGestureRecognizer>
               </Image.GestureRecognizers>
           </Image>

Di seguito si riporta anche il tag name del controllo “Label” per visualizzare informazioni a video.
Di seguito il frammento di codice per il controllo “Label”

XAML
           <Label
               Text="Esempio di gestione mouse"
               SemanticProperties.HeadingLevel="Level1"
               FontSize="32"
               HorizontalOptions="Center"
               x:Name="lblDati"/>

Stesura del codice

Dopo aver impostato la parte dei controlli e grafica del nostro progetto, non resta che scrivere il codice nel linguaggio C# per gestire la posizione del mouse per ogni evento.
Per ogni evento, andremo a gestire la posizione del mouse all’interno dell’immagine, quando entra, si sposta all’interno dell’area immagine e quando esce fuori.
Di seguito il codice per i tre eventi delle suddette operazioni.

C#
private void PointerGestureRecognizer_PointerEntered(object sender, PointerEventArgs e)
   {
       lblDati.Text = "Entrato";
       Point? posizione = e.GetPosition(null);
       string descrizione = "Posizione: Asse X: " + posizione.Value.X.ToString() + " Asse Y: " + posizione.Value.Y.ToString();
       // Posizione relativa dell'immagine
       Point? posizioneRelativaImagine = e.GetPosition(ImgLogo);
       descrizione += "\r\t" + "Posizione Immagine: Asse X: " + posizioneRelativaImagine.Value.X.ToString() + " Asse Y: " + posizioneRelativaImagine.Value.Y.ToString();
       // Posizione relativa nella finestra
       Point? posizioneRelativaFinestra = e.GetPosition((View)sender);
       descrizione += "\r\t" + "Posizione nella finestra: Asse X" + posizioneRelativaFinestra.Value.X.ToString() + " Asse Y: " + posizioneRelativaFinestra.Value.Y.ToString();
       lblDati.Text = descrizione;
   }
   private void PointerGestureRecognizer_PointerExited(object sender, PointerEventArgs e)
   {
       lblDati.Text = "Uscito";
       Point? posizione = e.GetPosition(null);
       string descrizione = "Posizione: Asse X: " + posizione.Value.X.ToString() + " Asse Y: " + posizione.Value.Y.ToString();
       // Posizione relativa dell'immagine
       Point? posizioneRelativaImagine = e.GetPosition(ImgLogo);
       descrizione += "\r\t" + "Posizione Immagine: Asse X: " + posizioneRelativaImagine.Value.X.ToString() + " Asse Y: " + posizioneRelativaImagine.Value.Y.ToString();
       // Posizione relativa nella finestra
       Point? posizioneRelativaFinestra = e.GetPosition((View)sender);
       descrizione += "\r\t" + "Posizione nella finestra: Asse X" + posizioneRelativaFinestra.Value.X.ToString() + " Asse Y: " + posizioneRelativaFinestra.Value.Y.ToString();
       lblDati.Text = descrizione;
   }
   private void PointerGestureRecognizer_PointerMoved(object sender, PointerEventArgs e)
   {
       lblDati.Text = "Si sposta dentro";
       Point? posizione = e.GetPosition(null);
       string descrizione = "Posizione: Asse X: " + posizione.Value.X.ToString() + " Asse Y: " + posizione.Value.Y.ToString();
       // Posizione relativa dell'immagine
       Point? posizioneRelativaImagine = e.GetPosition(ImgLogo);
       descrizione += "\r\t" + "Posizione Immagine: Asse X: " + posizioneRelativaImagine.Value.X.ToString() + " Asse Y: " + posizioneRelativaImagine.Value.Y.ToString();
       // Posizione relativa nella finestra
       Point? posizioneRelativaFinestra = e.GetPosition((View)sender);
       descrizione += "\r\t" + "Posizione nella finestra: Asse X" + posizioneRelativaFinestra.Value.X.ToString() + " Asse Y: " + posizioneRelativaFinestra.Value.Y.ToString();
       lblDati.Text = descrizione;
   }

Terminata la stesura del codice, non resta che eseguire il progetto in ambiente “Windows” per verificare la correttezza di quanto scritto.

Conclusioni

Con la tecnologia MAUI e soprattutto le potenzialità offerte da .Net 7 lo sviluppo di applicazioni multipiattaforma diventa molto facile e per chi proviene dallo sviluppo web o windows application non troverà nessuna difficoltà nel creare applicazioni per altri ambiti.
La gestione delle immagini può tornare utile in quelle applicazioni che richiedono situazioni particolare come può essere un gioco oppure aspetti grafici da rendere più interattiva l’applicazione.