Continuing the series on visual grouping controls in WPF, the Tab control is a common UI element that has been around for some time. It makes a convenient way to organize your window when there is more than could realistically fit and still be comprehensible.
In WPF, Tabs are very easy to implement. Create a new WPF Window, remove the default Grid tags, and add the following XAML:
<TabControl>
<TabItem Header=“Tab 1“>Here’s Tab 1</TabItem>
<TabItem Header=“2nd Tab“>A second Tab</TabItem>
</TabControl>
Run the app, and you’ll see the two tabs on a window:
Image may be NSFW.
Clik here to view.
The TabItem, just like most controls, can hold a container control that can hold much more, thus making the tab really useful. In this example, let’s add a third tab item, with a grid. We’ll put in a few text boxes and a button.
<TabControl Name=“tabMyTabs“ >
<TabItem Header=“Tab 1“>Here’s Tab 1</TabItem>
<TabItem Header=“2nd Tab“>A second Tab</TabItem>
<TabItem Header=“Cool Tab“>
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=“*“></ColumnDefinition>
<ColumnDefinition Width=“2*“></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column=“0“ Grid.Row=“0“
HorizontalAlignment=“Right“>
First Name:
</Label>
<Label Grid.Column=“0“ Grid.Row=“1“
HorizontalAlignment=“Right“>
Last Name:
</Label>
<TextBox Name=“FirstName“
Grid.Column=“1“
Grid.Row=“0“ />
<TextBox Name=“LastName“
Grid.Column=“1“
Grid.Row=“1“ />
<Button Grid.Column=“1“
Grid.Row=“2“
Height=“23“ Width=“75“
HorizontalAlignment=“Left“
Name=“CoolTabButton“
Click=“CoolTabButton_Click“
VerticalAlignment=“Top“>
OK
</Button>
</Grid>
</TabItem>
</TabControl>
Using techniques already described in my post on Grids (http://arcanecode.wordpress.com/2007/08/28/grid-yourself-its-wpf/ , in case you missed it) I was able to create a tab with some useful content. Running it, you can see the results for yourself:
Image may be NSFW.
Clik here to view.
It’s also possible to determine the current tab via code. Let’s wire up a click event to that OK button you see. This requires we name the tab (I called it tabMyTabs), and the button, and add a Click=”CoolTabButton_Click” to the button declaration. Now all we have to do is add a little code:
private void CoolTabButton_Click(object sender, RoutedEventArgs e)
{
TabItem ti = tabMyTabs.SelectedItem as TabItem;
MessageBox.Show(“Tab Index=” + ti.Header);
}
Running and clicking on the OK button will result in a message box with the words “Tab Index=Cool Tab”
Granted my design won’t win any awards, but it gives you the general idea of how to use a tab control in WPF.
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
