Question

I have two tab controls stacked (using dockpanel) in a way that the empty space overlaps of their Tabstrips overlaps. I have to let users to resize these two tabcontrols height, especially the bottom one if they need.. Is there any way i can hold the emptyspace next to TabHeaders and drag it to resize?

<DockPanel>
    <TabControl DockPanel.Dock="Bottom" Height="200" Margin="0,-20,0,0">
        <TabItem Header="tab 1"></TabItem>
        <TabItem Header="tab2"></TabItem>
    </TabControl>

    <TabControl TabStripPlacement="Bottom" FlowDirection="RightToLeft">
        <TabItem Header="Tab 3" FlowDirection="LeftToRight"></TabItem>
        <TabItem Header="Tab 4" FlowDirection="LeftToRight"></TabItem>
    </TabControl>
</DockPanel>

Any pointers would be greatly appreciated.

Answer 1

Found the answer.

    <osc:DockPanelSplitter DockPanel.Dock="Bottom" Margin="0,-20,0,0" Height="20" Panel.ZIndex="-1"/>

    <TabControl TabStripPlacement="Bottom" FlowDirection="RightToLeft">
        <TabItem Header="Tab 3" FlowDirection="LeftToRight"></TabItem>
        <TabItem Header="Tab 4" FlowDirection="LeftToRight"></TabItem>
    </TabControl>
</DockPanel>

Key is Panel.Zindex on DockPanelSplitter