XBox Style Tab Controls in WPF

• Download source - 65.7 KB

Introduction

It has been long since I was thinking of putting this control on the net. I’ve named it as Funky Tab control. The control renders the Tab Header section on the left. The Header of the selected Tab Item moves upwards using Elastic In Out animation. The color also changes to red.

The content on the right also changes using a similar animation horizontally. The screen looks like:

Using the Control

The controls can be used the same way as tab controls.

1. Add the reference to the Funky Controls assembly.
2. Add a reference to your Window/Page/User Controls, like:

   xmlns:ft="clr-namespace:FunkyTabs;assembly=FunkyTabs"

3. Create a control like a tab control.

   <Grid x:Name=”LayoutRoot”>
       <ft:FunkyTabControl>
           <ft:FunkyTabItem x:Name=”T1″ IsSelected=”True” Header=”T1″ >
               <TextBlock FontFamily=”Arial” FontSize=”48″ VerticalAlignment=”Center”
                          HorizontalAlignment=”Center”>Tab 1</TextBlock>
           </ft:FunkyTabItem>
           <ft:FunkyTabItem x:Name=”T2″ Header=”T2″ >
               ….
           </ft:FunkyTabItem>
           <ft:FunkyTabItem x:Name=”T3″ Header=”T3″ >
               ….
           </ft:FunkyTabItem>
       </ft:FunkyTabControl>
   </Grid>

Here, you can download the latest version of the sample:

• http://cid-b3dbeec391c45395.skydrive.live.com/self.aspx/Public/Source%20Code/FunkyTabs.zip

Next in line should be Mac Style Dock skins for Menu controls in WPF…. Please feel free to share your thoughts on the blog.

Enjoy!!!