WPF – Il controllo Canvas

Questo testo fa parte del capitolo 27 del libro “Visual Basic 2010 spiegato a mia nonna” che sarà pubblicato fra poche settimane. Trovate l’esempio di codice tra gli esempi liberamente scaricabili al seguente indirizzo:https://deghetto.wordpress.com/2011/02/05/libro-visual-basic-2010-spiegato-a-mia-nonna/

In questo contesto, Canvas assume il significato di "tela": infatti il controllo rappresenta una sorta di tela dove si possono "dipingere" i controlli.

I controlli "figli" sono posizionati con riferimento alle coordinate del controllo Canvas che li contiene: un controllo posizionato nell’angolo superiore sinistro del Canvas, quindi, avrà le coordinate dell’angolo superiore sinistro uguali a (0, 0).

Nella figura potete vedere un controllo Canvas così come definito nel designer.

La definizione XAML predefinita è la seguente:

   1: <Canvas 

   2:   Height="100" 

   3:   HorizontalAlignment="Left" 

   4:   Margin="10,10,0,0" 

   5:   Name="Canvas1" 

   6:   VerticalAlignment="Top" 

   7:   Width="200" />

Per fare un esempio, proviamo a intercettare l’evento MouseEnter che rileva l’ingresso del mouse nell’area del Canvas. In realtà, come vedremo, l’evento viene intercettato solo quando il puntatore del mouse entra nell’area di un controllo e non all’interno di tutta l’area del Canvas.

Create una nuova applicazione WPF e inserite il seguente codice XAML:

   1: <!-- Esempio 27.17 -->

   2: <Window x:Class="MainWindow"

   3:     xmlns=

   4: "http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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

   6:     Title="MainWindow" Height="165" Width="410">

   7:     <Grid>

   8:     <Canvas 

   9:         Height="100" 

  10:         HorizontalAlignment="Left" 

  11:         Margin="10,10,0,0" 

  12:         Name="Canvas1" 

  13:         VerticalAlignment="Top" 

  14:         Width="362">

  15:       <TextBox 

  16:         Text="Questo è un controllo TextBox all'interno di un controllo Canvas" 

  17:         Height="28" 

  18:         Width="362" />

  19:     </Canvas>

  20:     </Grid>

  21: </Window>

Il codice Visual Basic, invece, è il seguente:

   1: ' Esempio: 27.17

   2: Class MainWindow 

   3:   Private Sub Canvas1_MouseEnter(

   4:       ByVal sender As Object,

   5:       ByVal e As System.Windows.Input.MouseEventArgs) _

   6:       Handles Canvas1.MouseEnter

   7:     MessageBox.Show(

   8:       "Sei entrato nel canvas! Esci subito!")

   9:   End Sub

  10: End Class

Potete vedere il risultato nella seguente figura.