WPF – Il controllo Border

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

Il controllo Border non fa altro che definire una cornice grafica in una determinata posizione, con una certa dimensione e con una eventuale rotazione (ved. figura seguente).

Nota – In fase di progettazione, molti controlli appena inseriti hanno un aspetto simile a quello mostrato in Figura 27.2: un rettangolo vuoto e poco più. Anche se molte figure hanno un contenuto simile, però, abbiamo voluto ugualmente inserirle per darvi un’idea di cosa dovete aspettarvi quando inserite un controllo. Naturalmente, dopo aver aggiunto altri elementi e personalizzato le proprietà, potrete vedere le differenze tra un controllo e l’altro. Queste differenze sono evidenziate, in ogni caso, dalle applicazioni di esempio che abbiamo creato appositamente e che sono illustrate in questo capitolo, con le immagini finali dell’applicazione in fase di esecuzione.

La definizione XAML predefinita è la seguente:

<Window x:Class=”MainWindow”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Title=”MainWindow” Height=”350″ Width=”525″>
<Grid>
<Border
BorderBrush=”Silver”
BorderThickness=”1″
Height=”100″
HorizontalAlignment=”Left”
Margin=”10,10,0,0″
Name=”Border1″
VerticalAlignment=”Top”
Width=”200″ />
</Grid>
</Window>

 

Nota – Il codice XAML prosegue in un’unica riga senza ritorni a capo, ma in questo testo abbiamo voluto evidenziare meglio le proprietà dei vari controlli, ritornando a capo per ogni proprietà inclusa nella definizione.

Il codice così formattato è compatibile con l’editor del codice, in quanto non vengono rilevati errori, così come siamo abituati a non ottenere errori in un codice XML o HTML. L’ordine delle proprietà può anche essere modificato, senza alcun effetto sulla corretta esecuzione del codice stesso.

Le proprietà disponibili non sono solo quelle indicate nel codice sopra riportato: queste proprietà sono solo quelle di default che appaiono inserendo un controllo con il doppio clic in una finestra WPF. Le altre proprietà sono disponibili nella finestra delle Proprietà e possono essere anche direttamente aggiunte al codice XAML.

Il controllo Border non intercetta un evento Click, ma è possibile simulare un clic sul controllo utilizzando, per esempio, l’evento MouseUp:

1. create un’applicazione WPF;

2. inserite un controllo Border;

3. aumentate lo spessore del bordo (proprietà BorderThickness);

4. aggiungete un controllo Label e modificate la proprietà Content, inserendo la stringa “Clicca sulla cornice!”.

Il codice XAML dovrebbe essere simile al seguente:

<!– Esempio: 27.02 –>

<Window x:Class=”Window1″
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Title=”MainWindow” Height=”155″ Width=”244″>
<Grid>
<Border
BorderBrush=”Silver”
BorderThickness=”10″
Height=”100″
HorizontalAlignment=”Left”
Margin=”10,10,0,0″
Name=”Border1″
VerticalAlignment=”Top”
Width=”200″>
<Label
Content=”Clicca sulla cornice!”
Height=”28″
Name=”Label1″
Width=”114″ />
</Border>
</Grid>
</Window>

 

5. modificate il codice Visual Basic come segue:

‘ Esempio: 27.02

Class Window1
Private Sub Border1_MouseUp(
ByVal sender As Object,
ByVal e As System.Windows.Input.MouseButtonEventArgs) _
Handles Border1.MouseUp
MessageBox.Show(“OK!”)
End Sub
End Class

 

Nota – L’evento MouseUp viene scatenato anche cliccando sulla Label, non solo sul bordo. Dato che la Label è nidificata nel controllo Border, infatti, l’evento viene scatenato anche in questo caso.