WPF - Apresentando o controle TabControl

O controle TabControl da WPF é um painel que se parece com um conjunto de pastas de arquivos com abas rotuladas onde cada aba representa um conjunto de conteúdo distinto que é exibido no painel quando uma aba for selecionada. Essas abas são implementadas como objetos do tipo TabItem.

Temos então que dois elementos principais na construção do controle:

Onde o TabControl é o contêiner de um ou mais elementos TabItem.

Vamos abrir o Visual Basic 2010 Express Edition e criar um novo projeto do tipo WPF Application com o nome Wpf_TabControl;

Selecione o arquivo MainWindow.xaml e a partir da ToolBox arraste e solte o controle TabControl no descritor XAML;

Você verá o controle exibindo um TabItem;

A seguir clique com o botão direito do mouse sobre o controle e no menu suspenso clique em Add Tab;

Você verá uma nova TabItem ser inserida no controle;

Observe que na janela de código XAML temos o código gerado por esta operação;

De forma bem simples temos que um cada TabControl contém uma coleção de elementos TabItem;

<TabControl>
    <TabItem Header="Tab 1">Macoratti</TabItem>
    <TabItem Header="Tab 2">Miriam</TabItem>
</TabControl>

O TabItem possui dois atributos específicos :

  1. Header - é a valor string que é exibido no topo de cada aba
  2. IsSelected - é um valor booleano que especifica se a aba foi selecionada;(Somente uma aba pode ser selecionada por vez)

Vou mostrar um exemplo definindo um controle TabControl com 4 elementos TabItem. Da seguinte forma:

As imagens usadas estão na raiz do projeto e foram incluídas via menu Project -> Add Existing Item;

Então vamos definir no arquivo MainWindow.xaml o seguinte leiaute:

O código XAML gerado é o seguinte:

<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="398" Width="473">
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <StackPanel>
            <Border Background="#99FFFFFF" BorderBrush="#CCCCFF" BorderThickness="2" HorizontalAlignment="Left" Padding="20" Margin="20,10,0,0" Width="400">
                <TabControl Name="Tabs1" TabStripPlacement="Top" Background="LightGray" BorderBrush="Blue" Margin="10,10,0,5" Height="207" Width="348">
                    <TabItem Header="Nome" IsSelected="True" Background="Aquamarine">
                        <TextBlock Height="223" Width="338" Margin="0,10,120,0">
                    <Bold>José Carlos Macoratti - macoratti.net</Bold>
                        </TextBlock>
                    </TabItem>
                    <TabItem Header="Cantora" Background="Aquamarine">
                        <Image Source="JanisJoplin.jpg" Height="150" Width="200"/>
                    </TabItem>
                    <TabItem Header="Cantor" Background="Aquamarine">
                        <Image Source="johnLenon.jpg" Height="150" Width="200"/>
                    </TabItem>
                    <TabItem Header="Contato" Background="Aquamarine">
                        <Grid Height="115" Width="220">
                            <Grid.RowDefinitions>
                                <RowDefinition></RowDefinition>
                                <RowDefinition></RowDefinition>
                                <RowDefinition></RowDefinition>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="2*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Label HorizontalAlignment="Right" Margin="0,12,0,0" Width="42.033">
                                Nome:</Label>
                            <Label Grid.Row="1" HorizontalAlignment="Right" Margin="0,14,0,0" Width="40.097">Email:</Label>
                            <TextBox Name="Nome" Grid.Column="1" Margin="0,0,0,13" />
                            <TextBox Name="Email" Grid.Column="1" Grid.Row="1" Margin="0,14,0,0" />
                            <Button Grid.Column="1" Grid.Row="2" Width="75" HorizontalAlignment="Left" Name="TabButton" Click="TabButton_Click" Margin="0,6">OK</Button>
                        </Grid>
                    </TabItem>
                </TabControl>
            </Border>
        </StackPanel>
    </ScrollViewer>
</Window>

Executando o projeto e selecionando cada uma das abas iremos obter:

Podemos também facilmente alterar a disposição da exibição das abas usando a propriedade TabStripPlacement. Onde os valores possíveis são: Left, Top, Right , Bottom;

Abaixo vemos um exemplo:

TabStripPlacement = Bottom

TabStripPlacement = Right

O componente TabControl e os TabItem possuem diversos eventos.

A seguir temos um exemplo de utilização do evento SelectionChanged onde estamos exibindo o nome da aba selecionada:

  Private Sub Tabs1_SelectionChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.SelectionChangedEventArgs) Handles Tabs1.SelectionChanged
        Dim ti As TabItem
        ti = Tabs1.SelectedItem
        MessageBox.Show("Esta é a aba => " + ti.Header)
    End Sub

O código acima foi definido no arquivo code-behind MainWindow.xaml.vb.

Abaixo vemos o resultado exibido após selecionar uma aba:

Podemos também preencher um controle TabControl dinamicamente via código. Vamos ver como fazer isso...

Primeiro defina no código XAML o controle TabControl:

A seguir no arquivo code-behind MainWindow.xaml.vb definia o seguinte código:

Class MainWindow
    Sub New()

        ' This call is required by the designer.
        InitializeComponent()

        Dim ti1 As New TabItem
        ti1.Header = "Aba 1"
        ti1.Content = "Esta é o texto da Aba 1"
        controleTab.Items.Add(ti1)

        Dim ti2 As New TabItem
        ti2.Header = "Aba 2"
        ti2.Content = "Esta é o texto da Aba 2"
        controleTab.Items.Add(ti2)

        Dim ti3 As New TabItem
        ti3.Header = "Aba 3"
        ti3.Content = "Esta é o texto da Aba 3"
        controleTab.Items.Add(ti3)

    End Sub
End Class

Ao lado vemos as abas que foram criadas e o conteúdo de cada uma ser exibido conforme a seleção do usuário.

Os nomes das abas foram definidos via propriedade Header e o conteúdo através da propriedade Content.

Podemos também incluir imagens nos elementos TabItem conforme o exemplo abaixo:

<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="398" Width="473">
    <Grid Height="298" Width="430">
        <TabControl Margin="0,0,0,12">
            <TabItem>
                <TabItem.Header>
                    <StackPanel Orientation="Horizontal">
                        <Image Height="18" Source="queijo.gif" />
                        <TextBlock Text="Queijo" Margin="2,0,0,0" VerticalAlignment="Center" />
                    </StackPanel>
                </TabItem.Header>
            </TabItem>
            <TabItem>
                <TabItem.Header>
                    <StackPanel Orientation="Horizontal">
                        <Image Height="18" Source="sorvete.gif" />
                        <TextBlock Text="Sorvete" Margin="2,0,0,0" VerticalAlignment="Center" />
                    </StackPanel>
                </TabItem.Header>
            </TabItem>
            <TabItem>
                <TabItem.Header>
                    <StackPanel Orientation="Horizontal">
                        <Image Height="18" Source="pudim.gif" />
                        <TextBlock Text="Pudim" Margin="2,0,0,0" VerticalAlignment="Center" />
                    </StackPanel>
                </TabItem.Header>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

Podemos usar as diversas propriedades e eventos para configurarmos o controle TabControl e os TabItems de diversas formas possíveis. Fique a vontade para fazer isso conforme o seu interesse no controle.

Pegue o projeto completo aqui: Wpf_TabControl.zip 

Gálatas 4:3 Assim também nós, quando éramos meninos, estávamos reduzidos à servidão debaixo dos rudimentos do mundo;
Gálatas 4:4 mas, vindo a plenitude dos tempos, Deus enviou seu Filho, nascido de mulher, nascido debaixo de lei,
Gálatas 4:5 para resgatar os que estavam debaixo de lei, a fim de recebermos a adoção de filhos.
Gálatas 4:6 E, porque sois filhos, Deus enviou aos nossos corações o Espírito de seu Filho, que clama: Aba, Pai.

Referências:

José Carlos Macoratti