#908 – Binding a TabControl to a List of Objects, part II

September 17, 2013 5 Comments

To bind a TabControl to a list of objects, you can set the ItemsSource of the TabControl to an ObservableCollection of the desired object type.  This will cause a new TabItem to be created for each element in the collection.

By default, both the header and the content of each TabItem is set to the result of invoking ToString on each item in the collection.  To set the Header of each tab, dictating what appears on the tab itself, you can set the ItemContainerStyle of the TabControl to a style element, where you set the HeaderTemplate, as shown below.

<TabControl Margin="5"
            ItemsSource="{Binding RomanDudes}">
    <TabControl.ItemContainerStyle>
        <Style TargetType="TabItem">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel>
                            <Image Source="{Binding Image}" Height="50"/>
                            <TextBlock Text="{Binding Name}" HorizontalAlignment="Center"/>
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.ItemContainerStyle>
</TabControl>

In the next post, we’ll set the content of each TabItem as well.
908-001

 

Note: For a cleaner way to do this, see: Use ItemTemplate to Control Content on Tabs

Advertisement

Filed under Controls Tagged with , , , ,

#899 – Displaying Multiple Controls on a TabControl’s Tabs

September 4, 2013 1 Comment

You can display simple text on the clickable tabs of a TabControl by setting the Header property of each TabItem to some text.  You can also set the Header to any single control, for example an Image control.

If you want to display something more complex than either some text or a single control, you can set the Header property to contain a layout panel that in turn contains other controls.

    <TabControl Margin="10">
        <TabItem>
            <TabItem.Header>
                <StackPanel>
                    <Image Source="Augustus.jpg" Height="60" Margin="5"/>
                    <TextBlock Text="Augustus" HorizontalAlignment="Center"/>
                </StackPanel>
            </TabItem.Header>
            <TextBlock Text="Augustus stuff goes here.." Margin="10"/>
        </TabItem>
        <TabItem>
            <TabItem.Header>
                <StackPanel>
                    <Image Source="Tiberius.jpg" Height="60" Margin="5"/>
                    <TextBlock Text="Tiberius" HorizontalAlignment="Center"/>
                </StackPanel>
            </TabItem.Header>
            <TextBlock Text="Tiberius stuff goes here.." Margin="10"/>
        </TabItem>
        <TabItem>
            <TabItem.Header>
                <StackPanel>
                    <Image Source="Caligula.jpeg" Height="60" Margin="5"/>
                    <TextBlock Text="Caligula" HorizontalAlignment="Center"/>
                </StackPanel>
            </TabItem.Header>
            <TextBlock Text="Caligula stuff goes here.." Margin="10"/>
        </TabItem>
    </TabControl>

899-001

Filed under Controls Tagged with , , , ,

#898 – Setting the Text that Appears on a TabItem

September 3, 2013 1 Comment

Each tab within a TabControl is represented by an instance of a TabItem.  If you want some text to be displayed on the clickable portion of a tab, you can specify the text that should appear by setting the Header property of the TabItem.

    <TabControl Margin="10" >
        <TabItem Header="Augustus">
            <StackPanel Orientation="Horizontal">
                <Image Source="Augustus.jpg" Height="100" Margin="5"/>
                <TextBlock Text="Augustus" VerticalAlignment="Center"/>
            </StackPanel>
        </TabItem>
        <TabItem Header="Tiberius">
            <StackPanel Orientation="Horizontal">
                <Image Source="Tiberius.jpg" Height="100" Margin="5"/>
                <TextBlock Text="Tiberius" VerticalAlignment="Center"/>
            </StackPanel>
        </TabItem>
    </TabControl>

898-001

Filed under Controls Tagged with , , , ,

#897 – Content on a TabItem Does Not Automatically Wrap

September 2, 2013 1 Comment

The individual tabs on a TabControl are each represented by a TabItem.  TabItem is a content control, which means that it contains a single element.  That element is typically a panel, which in turn contains child controls.

If the element that you set for the content of a TabItem is too wide to be completely displayed within the TabControl, it will not automatically wrap.  Below, a horizontally-oriented StackPanel is placed on the first tab and the content does not fit.

    <TabControl Margin="10">
        <TabItem Header="Emperors">
            <StackPanel Orientation="Horizontal">
                <Image Source="Augustus.jpg" Height="100" Margin="5"/>
                <Image Source="Tiberius.jpg" Height="100" Margin="5"/>
                <Image Source="Caligula.jpeg" Height="100" Margin="5"/>
                <Image Source="Claudius.jpg" Height="100" Margin="5"/>
                <Image Source="Nero.jpg" Height="100" Margin="5"/>
            </StackPanel>
        </TabItem>
    </TabControl>

897-001
If you want content on the tab to wrap, you need to use a panel that knows how to wrap its own content (e.g. a WrapPanel).

    <TabControl Margin="10">
        <TabItem Header="Emperors">
            <WrapPanel Orientation="Horizontal">
                <!-- ... -->

897-002

Filed under Controls Tagged with , , , ,

#896 – A TabControl Groups Content into a Series of Pages

August 30, 2013 3 Comments

You can use a TabControl to organize content in your application into a series of pages, allowing the user to click on the page that contains the content that they want to see.

The TabControl contains a series of TabItem elements representing each tab.  Each TabItem has a Header property defining text or content to appear on the clickable part of the tab.  Each TabItem also has a single child element, representing the content to be displayed when you are viewing the tab.  This will normally be a panel that contains other controls.

    <TabControl Margin="10">
        <TabItem Header="You">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Label Content="Name:"/>
                <TextBox Grid.Column="1" Width="120" Margin="5"
                         HorizontalAlignment="Left"/>
                <Label Grid.Row="1" Content="Age:"/>
                <TextBox Grid.Row="1" Grid.Column="1" Width="80" Margin="5"
                         HorizontalAlignment="Left"/>
            </Grid>
        </TabItem>

        <TabItem Header="Zappa">
            <StackPanel>
                <Image Source="Zappa.jpg" Height="80" Margin="5"/>
                <Label Content="Composer and musician"
                       HorizontalAlignment="Center"/>
            </StackPanel>
        </TabItem>
    </TabControl>

896-001
896-002

Filed under Controls Tagged with , , ,

#834 – Displaying Custom Content on a TabControl’s Tabs

June 4, 2013 2 Comments

When you use a TabControl in your application, each tab is represented by a TabItem.  The content of the TabItem is a single container and items placed within this container show up in the body of the TabControl when that tab is clicked.

When you set the Header property of a TabItem to some text, that text will be drawn on the tab.

    <TabControl Margin="5" >
        <TabItem Header="His">
            <StackPanel>
                <Label Content="His stuff goes here"/>
            </StackPanel>
        </TabItem>

        <TabItem Header="Hers">
            <StackPanel>
                <Label Content="Her stuff goes here"/>
            </StackPanel>
        </TabItem>
    </TabControl>

834-001
Because TabItem.Header is of type object, you can set the Header to anything that you like.  (E.g. a panel containing multiple items).

    <TabControl Margin="5" >
        <TabItem>
            <TabItem.Header>
                <Image Source="His.png" Height="50"/>
            </TabItem.Header>
            <StackPanel>
                <Label Content="His stuff goes here"/>
            </StackPanel>
        </TabItem>

        <TabItem>
            <TabItem.Header>
                <Image Source="Hers.png" Height="50"/>
            </TabItem.Header>
            <StackPanel>
                <Label Content="Her stuff goes here"/>
            </StackPanel>
        </TabItem>
    </TabControl>

834-002

Filed under Controls Tagged with , , , ,