XTab's Blog

Ged Mead's Blog at vbCity

This blog hosted by:
http://blogs.vbcity.com      
  Home :: Syndication  :: Login

DecJanuary 2008Feb
SMTWTFS
303112345
6789101112
13141516171819
20212223242526
272829303112
3456789

Archives

Topics

Ramblings

VB.NET

Monday, January 14, 2008 #

  I've noticed a couple of questions in the VB.NET forums recently where someone wants to change the BackColor of the Tab Header on TabPages. As far as I know, in VB2005 and earlier you have to either use OwnerDraw techniques or subclass your own version of a TabControl.

   In VB2008, WPF offers a much easier route. The equivalent element to a TabPage in Windows Forms is the TabItem in WPF. The WPF TabItem actually has its own Background and Foreground properties, each of which will be applied to the Header Tab.

Of course you can also set the Background color of the main TabItem page itself via panel type controls with their own Backgrounds set as required. The ListBox in the screenshot demonstrates this.

  The following sample is a very basic example of doing this.

Code Copy
   <TabControl Margin="8" Name="TabControl1">
      <TabItem  Header="Members" Background="LightGreen"
       Foreground
="Navy">

        <Grid>
          <ListBox Width="150" Background="LightGreen"
                   HorizontalAlignment="Left">
            <ListBoxItem>J Smith</ListBoxItem>
            <ListBoxItem>J Jones</ListBoxItem>
            <ListBoxItem>C B Travis</ListBoxItem>
            <ListBoxItem>L Fourleather</ListBoxItem>
          </ListBox>
        </Grid>
      </TabItem>

      <TabItem Background="Green" Header="Associates"
       Foreground
="Navy" >
      </TabItem>

      <TabItem Background="LightBlue">
                <TabItem.Header>
                    <StackPanel Orientation="Horizontal" >
                        <Image Width="20" Source="CLUB.BMP"/>
                        <TextBlock Text="   Sponsors" Foreground="Red"/>
                    </StackPanel>
                </TabItem.Header>

                <Grid>
                    <ListBox>
                        <ListBoxItem>J Smith</ListBoxItem>
                        <ListBoxItem>J Jones</ListBoxItem>
                        <ListBoxItem>C B Travis</ListBoxItem>
                        <ListBoxItem>L Fourleather</ListBoxItem>
                    </ListBox>
                </Grid>
            </TabItem>

    </TabControl>

  The result looks like this:

  One thing to note is that by default the Header will revert to a White background when it has focus (as shown in the above screenshot). A side effect of this is that you have to be aware that your Foreground will also need to be such that it is visible on both a white background as well as the one you set. To change this behaviour you will probably have to apply a Style or use a ControlTemplate. I haven't fully researched this yet, but plan to write a full article on TabControls and these little tips and tricks in the very near future. But in the meantime if all you need is a more colorful set of headers then WPF supplies the easy answer.

posted @ 2:27 PM | Feedback (3)