Development Tip – Tab Control

I’m trying to replicate a tab control in the Windows 8 //BUILD release. I’m not talking about your traditional tab control with grey tabs and a static appearance; rather something that we’ve seen throughout the demos at //BUILD; a set of clean links at the top of the app that flip to different sections of the app. Something… Metro-ish:

Zune's tabs

For now, I’m baking my own very simple analog. The setup is like this: The links are a set of items in a ListView control, and the tab content is a set of FlipViewItems within a FlipView control. The list’s SelectedIndex is [two-way] bound to the FlipView’s SelectedIndex, so they work in sync.

<ListView x:Name="lstTabs" SelectionMode="Single"
  SelectedIndex="{Binding SelectedIndex, ElementName=TabFlipView, Mode=TwoWay}">
            <StackPanel Orientation="Horizontal"/>

<FlipView x:Name="TabFlipView">
      <TextBlock>Settings go here</TextBlock>
      <TextBlock>Favourites go here</TextBlock>

As you can see, it’s not perfect. At the very least, you would want to create a different style for the listbox so that the selected item looks a little different. However, it’s really easy to get going with, and will do for now. One nice thing is that the FlipView control gives you free animations, so it looks fluid.

Another twist on this is instead of using a FlipView, you can create a Frame control, and then on the ListView’s selection change event you can load different pages into the frame depending on what’s selected.


Comments (6)

  1. sprender says:

    Here's a NuGet Package which will restyle a WPF Window to look Metro

  2. Param says:

    Is there a way to simulate the tabcontrol using html and javascript in windows store app ?

  3. Hi,

    I have tried your code but it does not work, could you provide a complete sample?

  4. AviP says:

    @vangeloni1, that wasn't supposed to be a fully working sample – just an example of what you might be able to do. You're going to have to tweak it to work with your application.

  5. Hi,

    thanks, in any case applying any little changes it works fine.

    How do we remove any FlipViewItem on runtime, because in tab contex each flipview item could be different?

    So we could think do add all possible items (tabs) and remove on runtime those ones are not necessary.

    and also how perform the databinding inside each item, or for example how make each flipview item like a page?


  6. AviP says:

    You can remove/add items to the flipbook through code as you could for anything else… But I wouldn't expect it to change at runtime because it's the set of tabs in your UI. Maybe you'd show/hide some tabs, rather than add/remove?

    As for the databinding – same as anywhere else. A FlipViewItem is just a container into which you can place anything.