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: http://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).

clip_image002

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

 

27.03

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.

About these ads

Pubblicato il 6 febbraio 2011 su Novità. Aggiungi ai preferiti il collegamento . Lascia un commento.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

Iscriviti

Ricevi al tuo indirizzo email tutti i nuovi post del sito.

Unisciti agli altri 844 follower

%d blogger cliccano Mi Piace per questo: