WPF Tabcontrol with expander functionality for tabitems

Question

I'm very new to WPF but I'm trying to mix the functionality of both a tab control and expanders.

I want to be able to press each tab item which has an expander in the header, that will expand the content below. Almost like a normal tab, except that I should now be able to press that tab/expander and the tab control should be able to expand/collapse, to only show the tab headers.

I can't get my head around to get the expand/collapse functionality to work, and the Tab control will always stay open like a normal one without expanders.

At the moment my XAML looks like this:

<TabControl>
        <TabItem >
            <TabItem.Header>
                <Expander Header="One" IsHitTestVisible="False"  
                  IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" />
            </TabItem.Header>
            <TextBlock Background="Red"/>
        </TabItem>
        <TabItem>
            <TabItem.Header>
                <Expander Header="Two" IsHitTestVisible="False" 
                  IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" />
            </TabItem.Header>
            <TextBlock Background="Aqua" />
        </TabItem>
    </TabControl>

If I should go a completely another way to get the overall functionality, by all means, point me in that direction.

You will probably need a custom template for your TabControl and headers. Taking a look at the default templates and modifying accordingly is usually a good idea. — Joey
So if u change the tab u need to set IsExpanded= false am i right? — Avinash Reddy
@Avinash Reddy - Yeah. I should be able to expand/collapse the whole Tab Control and show the content of the specific Tab when expanded. So as an example: The Tab Control start out as collapsed and you are only able to see the 2 tab items with their name and the expander button. I press the first tab item (expander) and the whole Tab Control expands, showing whatever I choose to have in that tabs content area. From here I should be able to do 2 things. Press tab one again to collapse the whole Tab Control, or press Tab two and show the content in tab two. Hope that makes sense. — Gulerod

Avinash Reddy Avinash Reddy · Accepted Answer · 2019-06-17T11:15:24

This is the Simplest solution I can think of. and I'm still bit confused what u want

VM

 private bool myVar;

    public bool ShowItem
    {
        get { return myVar; }
        set { myVar = value; OnPropertyChanged("ShowItem"); }
    }


    private void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        ShowItem = true;
    }

    private void Expander_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        ShowItem = !ShowItem;
    }


     <TabControl SelectionChanged="TabControl_SelectionChanged">
                <TabItem   PreviewMouseLeftButtonDown="Expander_PreviewMouseLeftButtonUp" >
                        <TabItem.Header>
                        <Expander Header="One" IsHitTestVisible="False" 
                      IsExpanded="{Binding ShowItem}" />
                        </TabItem.Header>
                    <TextBlock Background="Red" >
                        <TextBlock.Style>
                            <Style TargetType="TextBlock">
                                <Setter Property="Visibility" Value="Collapsed"></Setter>
                                <Style.Triggers>

                                    <DataTrigger Binding="{Binding ShowItem}" Value="True">
                                        <Setter Property="Visibility" Value="Visible"></Setter>
                                    </DataTrigger>

                                </Style.Triggers>
                            </Style >
                        </TextBlock.Style>

                    </TextBlock>
                </TabItem>
                <TabItem  PreviewMouseLeftButtonDown="Expander_PreviewMouseLeftButtonUp">
                        <TabItem.Header>
                            <Expander Header="Two" IsHitTestVisible="False" 
                      IsExpanded="{Binding ShowItem}" />
                        </TabItem.Header>
                    <TextBlock Background="Aqua" >
                        <TextBlock.Style>
                            <Style TargetType="TextBlock">
                                <Setter Property="Visibility" Value="Collapsed"></Setter>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding ShowItem}" Value="True">
                                        <Setter Property="Visibility" Value="Visible"></Setter>
                                    </DataTrigger>

                                </Style.Triggers>
                            </Style >
                        </TextBlock.Style>
                    </TextBlock>
                </TabItem>
                </TabControl>

Instead of style, u can use converter also try this once and let me know if im missing anything

Based on Comment

 <TabItem>
                <TabItem.Header>
                    <StackPanel Background="Transparent" PreviewMouseLeftButtonDown="Expander_PreviewMouseLeftButtonUp">
                        <Expander Header="One" IsHitTestVisible="False" PreviewMouseLeftButtonDown="Expander_PreviewMouseLeftButtonUp" 
                  IsExpanded="{Binding ShowItem}" />
                    </StackPanel>
                </TabItem.Header>

WPF Tabcontrol with expander functionality for tabitems

1 Answers