Silverlight utilizzo del controllo TabControl (VB.Net e C#)

Riporto l'articolo scritto per il sito http://www.iprogrammatori.it/articoli/programmazione/art_tutorial-silverlight-il-controllo-tabcon_1015.aspx

Introduzione

In questo articolo, vedremo l’utilizzo del controllo Tab, un controllo per molti aspetti identico a quello per le windows applicatin, un contenitore a linguetta, che permette di contenere al suo interno, altri controlli.
L’articolo, illustra le basi per personalizzare un controllo tabcontrol e inserire dei controlli, il tutto come illustrato in figura 1.

Figura 1

Dopo aver creato un progetto di Silverlight, nel linguaggio di proprio interesse, trasciniamo dalla barra degli strumenti, il controllo tabcontrol.
Il tag TabControl, al suo interno, ha un altro tab, e precisamente il tabItem, questo tag, permette la gestione della singola linguetta, nel quale possiamo aggiungere i vari controlli che vogliamo.
Per impostare il testo nel singolo tabulatore, possiamo utilizzare la proprietà header, la quale visualizza il testo della linguetta.
L’esempio di codice XAML qui di seguito, illustra tre diversi casi di utilizzo di un tab item, nel primo, un uso comune, nel secondo, la personalizzazione con l’impostazione della proprietà cursor in modo che il mouse cambia forma quando si avvicina in prossimità del testo della linguetta, ed il terzo elemento, con la personalizzazione dell’intestazione, con testo ed immagine, come visualizzato in figura 1.

Qui di seguito si riporta il codice XAML

<sdk:TabControl x:Name="tabControlEsempio" >

<sdk:TabItem Header="Primo Tab" >

<StackPanel Margin="2">

<TextBlock Text="Testo" >

</TextBlock>

<TextBlock Text="Testo 2" >

</TextBlock>

</StackPanel>

</sdk:TabItem>

<sdk:TabItem Header="Secondo Tab" Cursor="Hand" >

<StackPanel Margin="2">

<TextBlock Text="Testo 3" >

</TextBlock>

<TextBlock Text="Testo 4" >

</TextBlock>

</StackPanel>

</sdk:TabItem>

<sdk:TabItem >

<sdk:TabItem.Header>

<StackPanel >

<TextBlock Text="Terzo Tab">

</TextBlock>

<Image Height="16" Name="image1" Source="/SLTabControl;component/Images/Silverlight.jpg" Stretch="Fill" Width="16" />

</StackPanel>

</sdk:TabItem.Header>

</sdk:TabItem>

</sdk:TabControl>

Ma vediamo in dettaglio l’esempio di codice XAML appena riportato.
Il tag “TabControl” contiene al suo interno tanti TabItem, che riguardano le singole linguette.
Il primo TabItem, ha la proprietà header, impostata con del testo, in questo modo viene visualizzato il titolo della linguetta. Al suo interno ci sono tre controlli, uno stackpanel che contiene due textblock, che indicando il testo.
Il secondo TabItem, è lo stesso del precedente, ma con la differenza che ha la proprietà Cursor, impostata con Hand, in questo modo quando il mouse si avvicina alla seconda linguetta, il puntatore del mouse cambia forma.
Il terzo TabItem è diverso dai precedenti, infatti dopo il tag “TabItem”, c’è ne uno di tipo “TabItem.Header”
Che permette la personalizzazione dell’intestazione della linguetta. Infatti in questo esempio di codice, è stato aggiunto un controllo StackPanel, con al suo interno due controlli, un textblocik ed un controllo image, in questo modo, verrà visualizzato del testo e delle immagini.

Conclusioni
L’articolo ha voluto illustrare l’utilizzo di base del controllo TabControl, un controllo che può fornire interessanti soluzioni quando le informazioni in una pagina, non sono contenuti in essa.