WPF – Il controllo TabControl

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 TabControl permette di creare una o più schede, ognuna delle quali può contenere un diverso insieme di controlli. Ogni scheda è selezionabile dalla propria linguetta (“tab”) che sporge nella parte superiore del controllo (ved. figura seguente).

27.27

E’ quindi un controllo molto utile quando ha almeno due linguette e quindi almeno altrettante schede, per poter contenere più informazioni tra loro correlate in una stessa finestra.

Per modificare l’insieme delle schede potete agire sulla proprietà Items che aprirà una apposita finestra di dialogo oppure direttamente nel codice XAML.

Ogni scheda può contenere un unico controllo o un controllo contenitore di altri controlli (per esempio un controllo Grid).

La definizione XAML predefinita è la seguente:

   1:  <TabControl
   2:    Height="100"
   3:    HorizontalAlignment="Left"
   4:    Margin="10,10,0,0"
   5:    Name="TabControl1"
   6:    VerticalAlignment="Top"
   7:    Width="200">
   8:    <TabItem
   9:      Header="TabItem1"
  10:      Name="TabItem1">
  11:      <Grid />
  12:    </TabItem>
  13:  </TabControl>

 

Un esempio di utilizzo è quello che potete provare con il seguente codice XAML:

   1:  <!-- Esempio: 27.13 -->
   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="211" Width="344">
   7:      <Grid>
   8:      <TabControl
   9:        Height="150"
  10:        HorizontalAlignment="Left"
  11:        Margin="10,10,0,0"
  12:        Name="TabControl1"
  13:        VerticalAlignment="Top"
  14:        Width="300">
  15:        <TabItem
  16:          Header="Scheda n. 1"
  17:          Name="TabItem1">
  18:          <Grid>
  19:            <Grid
  20:              Height="100"
  21:              HorizontalAlignment="Left"
  22:              Margin="10,10,0,0"
  23:              Name="Grid1"
  24:              VerticalAlignment="Top"
  25:              Width="274">
  26:              <Button
  27:                Content="Button"
  28:                Height="23"
  29:                HorizontalAlignment="Left"
  30:                Margin="41,39,0,0"
  31:                Name="Button1"
  32:                VerticalAlignment="Top"
  33:                Width="75" />
  34:              <Button
  35:                Content="Button"
  36:                Height="23"
  37:                HorizontalAlignment="Left"
  38:                Margin="140,39,0,0"
  39:                Name="Button2"
  40:                VerticalAlignment="Top"
  41:                Width="75" />
  42:            </Grid>
  43:          </Grid>
  44:        </TabItem>
  45:        <TabItem
  46:          Header="Scheda n. 2">
  47:          <Grid
  48:            Height="100"
  49:            Name="Grid2"
  50:            Width="247">
  51:            <TextBox
  52:              Height="23"
  53:              HorizontalAlignment="Left"
  54:              Margin="90,20,0,0"
  55:              Name="TextBox1"
  56:              VerticalAlignment="Top"
  57:              Width="120" />
  58:            <TextBox
  59:              Height="23"
  60:              HorizontalAlignment="Left"
  61:              Margin="90,49,0,0"
  62:              Name="TextBox2"
  63:              VerticalAlignment="Top"
  64:              Width="120" />
  65:            <Label
  66:              Content="Label"
  67:              Height="28"
  68:              HorizontalAlignment="Left"
  69:              Margin="37,18,0,0"
  70:              Name="Label1"
  71:              VerticalAlignment="Top" />
  72:            <Label
  73:              Content="Label"
  74:              Height="28"
  75:              HorizontalAlignment="Left"
  76:              Margin="37,47,0,0"
  77:              Name="Label2"
  78:              VerticalAlignment="Top" />
  79:          </Grid>
  80:        </TabItem>
  81:        <TabItem
  82:          Header="Scheda n. 3">
  83:          <Grid
  84:            Height="100"
  85:            Name="Grid3"
  86:            Width="288">
  87:            <Grid.ColumnDefinitions>
  88:              <ColumnDefinition
  89:                Width="276*" />
  90:              <ColumnDefinition
  91:                Width="181*" />
  92:            </Grid.ColumnDefinitions>
  93:            <TextBlock
  94:              Height="74"
  95:              HorizontalAlignment="Left"
  96:              Margin="10,10,0,0"
  97:              Name="TextBlock1"
  98:              Text="TextBlock"
  99:              VerticalAlignment="Top"
 100:              Grid.ColumnSpan="2"
 101:              Width="258" />
 102:          </Grid>
 103:        </TabItem>
 104:      </TabControl>
 105:    </Grid>
 106:  </Window>

 

Nella seguente figura potete vedere l’esempio in fase di esecuzione.

27.28

Pubblicato il 5 marzo 2011 su Novità. Aggiungi ai preferiti il collegamento . Lascia un commento.

Lascia un commento

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...

%d blogger cliccano Mi Piace per questo: