How to create a WPF TabControl with multiple headers per TabItem?

0
votes

Description:

Currently I'm in the process of creating a WPF application where the main content should be presented in a TabControl.

The TabControl exists of:

  • A TabItem that contains an external control which has multiple views, whereby each view should be visible as Header on the TabControl;
  • Multiple TabItems with our own content, each one with it's own header.

Styling of WPF controls is not the problem, but this case requires some special behaviour of the control itself. The problem is that the control should render multiple Headers per TabItem.

Questions:

  • What is the best control to use for such a scenario?
  • If using TabControl, what modifications should be made?

Thanks in advance.

Update #1

In response to vortex a prototype of such a control (as you can see, the external control is the Microsoft Office InfoPath FormControl):

   <TabControl x:Name="FormViewsTabControl">
      <TabItem>
         <TabItem.Headers>
            <TabItemHeader Text="View A" />
            <TabItemHeader Text="View B" />
         </TabItem.Headers>
         <TabItem.Content>
            <winforms:WindowsFormsHost x:Name="InfoPathFormsHost">
               <infopath:FormControl x:Name="InfoPathFormControl" />
            </winforms:WindowsFormsHost>
         </TabItem.Content>
      </TabItem>
      <TabItem Header="Letter">
         <local:CustomView />
      </TabItem>
   </TabControl>
3
c#.netwpfxamltabcontrol
Could you provide some prototype or sketch of such control? I can't imagine a tab item with multiple headers. – vortexwolf
@vorrtex please see the updated post with such a prototype. – Herman Cordes
Still don't get it. Do you want to place the view A below the view B? Or above? Or to the left? What if there are more views than two? – vortexwolf
@vorrtext, Aside, from left to right, just the same as the other TabItem Headers in the TabControl. If there are more than two, than they should be added to the right. – Herman Cordes
Ok, then the answer of @Amry must solve your needs. Except that you should change the open tag to <StackPanel Orientation="Horizontal">, and I would also set the HeaderTemplate property instead of the Header and use a DataTemplate. – vortexwolf

3 Answers

1
votes

If i understand it correctly then you would like to change the TabItems header depending on which view you select in your external control. If that's the case then you should try to expand your external control with a property which holds the actual header value and then bind this to the TabItmes header.

0
votes

You can have it so that the TabItem.Header contains a Panel element, which can contain multiple child elements. Example:

<TabItem>
  <TabItem.Header>
    <StackPanel>
      <TextBlock Text="View A" />
      <TextBlock Text="View B" />
    </StackPanel>
  </TabItem.Header>
  <TabItem.Content>
    <winforms:WindowsFormsHost x:Name="InfoPathFormsHost">
      <infopath:FormControl x:Name="InfoPathFormControl" />
    </winforms:WindowsFormsHost>
  </TabItem.Content>
</TabItem>
0
votes

We used the following link

[http://zamjad.wordpress.com/2011/09/21/using-contenttemplateselector/]

when we faced with these type of issue