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:http://deghetto.wordpress.com/2011/02/05/libro-visual-basic-2010-spiegato-a-mia-nonna/
Un controllo di tipo Rectangle è un contenitore rettangolare con un bordo e con un'area interna dove possono essere disposti i controlli e che può essere variamente colorata con un gradiente o riempita con un'immagine (ved. figura seguente).
La definizione XAML predefinita è la seguente:
1: <Rectangle
2: Height="100"
3: HorizontalAlignment="Left"
4: Margin="10,10,0,0"
5: Name="Rectangle1"
6: Stroke="Black"
7: VerticalAlignment="Top"
8: Width="200" />
Vediamo ora un esempio di codice XAML con un gradiente ovale e alcune etichette:
1: <!-- Esempio: 27.11 -->
2: <Window x:Class="MainWindow"
3: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5: Title="MainWindow" Height="237" Width="362">
6: <Grid
7: Height="198"
8: Width="335">
9: <Rectangle
10: Height="182"
11: HorizontalAlignment="Left"
12: Margin="10,10,0,0"
13: Name="Rectangle1"
14: VerticalAlignment="Top"
15: Width="318"
16: OpacityMask="#FF00009D">
17: <Rectangle.Stroke>
18: <LinearGradientBrush
19: EndPoint="1,0.5"
20: StartPoint="0,0.5">
21: <GradientStop
22: Color="Black"
23: Offset="0.344" />
24: <GradientStop
25: Color="#FF902C2C"
26: Offset="0.754" />
27: </LinearGradientBrush>
28: </Rectangle.Stroke>
29: <Rectangle.Fill>
30: <RadialGradientBrush>
31: <GradientStop
32: Color="#AD000074"
33: Offset="0.828" />
34: <GradientStop
35: Color="White"
36: Offset="0" />
37: </RadialGradientBrush>
38: </Rectangle.Fill>
39: </Rectangle>
40: <Label
41: Content="Terra"
42: Height="28"
43: HorizontalAlignment="Left"
44: Margin="202,41,0,0"
45: Name="Label1"
46: VerticalAlignment="Top"
47: Foreground="#FFF5EFEF"
48: FontWeight="Bold"
49: FontSize="15" />
50: <Label
51: Content="Sole"
52: Height="36"
53: HorizontalAlignment="Left"
54: Margin="120,65,0,0"
55: Name="Label2"
56: VerticalAlignment="Top"
57: Foreground="#FF030300"
58: FontSize="18"
59: FontWeight="Bold" />
60: <Label
61: Content="Luna"
62: Height="28"
63: HorizontalAlignment="Left"
64: Margin="232,65,0,0"
65: Name="Label3"
66: VerticalAlignment="Top"
67: Foreground="#FFF5ECEC"
68: FontWeight="Bold"
69: FontSize="14" />
70: </Grid>
71: </Window>
In questo caso non abbiamo inserito del codice, in quanto gli eventi sono abbastanza simili a quelli del controllo Border che abbiamo già visto in precedenza, in questo stesso capitolo. La seguente figura mostra il risultato.
