WPF – Il controllo Rectangle

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/

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.

Annunci