Cross between an Expander and a Tab

Question

On a page I have 3 expanders stacked vertically
User has no need to have more than one open at the same time

To save screen space I would like basically a tabbed expander
The expander would have the three headers in one expandar
I definitly want to keep the expander look as that is what users are current used to

It would look and behave exactly like a current expander
But instead of three header rows there would be one
The header clicked would dictate the content
So instead of three rows used by header - just one
So below the three headers and three expander arrows would all be on the top row
I would save two rows of screen real estate

enter image description here

This is what I am looking for: enter image description here
But the is not functional - I just hacked the borders.
The three just expand to their one column.
When expanded I want the expandar to have all three columns

Has anyone already done this?

Can you visualize this please? I am not sure if I understand. Are you looking for an accordion type of control? — Patrick Hofman, Dec 10 '14 at 14:11
lots of ways to do that ... my first approach would start with items control about a Enum (3 tabs) and enabling the content within the selected enum matches — kenny, Dec 10 '14 at 14:13
@PatrickHofman I added some text. I will try and mock up a visual. — paparazzo, Dec 10 '14 at 14:15
Why not using a tab control and changing it's appearance to look like an expander? — Patrick Hofman, Dec 10 '14 at 14:28
@Rachel I am not following. I unchecked my answer if you would kindly post an answer. — paparazzo, Feb 20 '15 at 18:20
@Blam Sure, I posted that along with the test sample I was messing with below — Rachel, Feb 20 '15 at 19:01

score 2 · Answer 1 · edited May 23 '17 at 11:43

Why not just use a TabControl with the TabItem headers templated to use Expanders? You'll get all the functionality of a TabControl, but with the Expander look/feel for the header items.

I did a quick test to ensure it would work, and the only changes would be to bind the Expander.IsExpanded to the reverse of TabItem.IsSelected, and set Expander.IsHitTestVisible = false to prevent it from stealing clicks from the TabItem.

<TabControl>
    <TabItem >
        <TabItem.Header>
            <Expander Header="One" IsHitTestVisible="False" 
                      IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" />
        </TabItem.Header>
        <Button Background="CornflowerBlue" />
    </TabItem>
    <TabItem>
        <TabItem.Header>
            <Expander Header="Two" IsHitTestVisible="False" 
                      IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" />
        </TabItem.Header>
        <Button Background="Plum" />
    </TabItem>
    <TabItem>
        <TabItem.Header>
            <Expander Header="Three" IsHitTestVisible="False" 
                      IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" />
        </TabItem.Header>
        <Button Background="Honeydew" />
    </TabItem>
</TabControl>

I know there's easy ways to make the TabControl stretch it's headers too if that were a requirement, like this solution.

Thanks but that does not meet the objective of save screen space. I need to be able to close them all like the mock up I have in purple. — paparazzo, Feb 20 '15 at 19:45
@Blam Ahh I see, I didn't realize that was part of the criteria. It wouldn't be too hard to write a click event so if the tabItem is clicked on when its already selected, set `SelectedIndex = -1`, and have a trigger or something alter `TabControl.Height` to be collapsed when no tab is selected. — Rachel, Feb 20 '15 at 19:52

score 1 · Answer 2 · answered Dec 10 '14 at 15:35

Hope this workaround help.this example is working for me.

I replace togglebutton in expander with Radiobutton .Radiobutton Groupname property allow only one option "checked" at time(having same group name).

  <Window.Resources>
    <Style x:Key="ExpanderStyle1" TargetType="{x:Type Expander}">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Expander}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="3" SnapsToDevicePixels="True">
                        <DockPanel>
                            <RadioButton GroupName="a" x:Name="HeaderSite" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" DockPanel.Dock="Top" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" MinWidth="0" MinHeight="0" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                                <RadioButton.FocusVisualStyle>
                                    <Style>
                                        <Setter Property="Control.Template">
                                            <Setter.Value>
                                                <ControlTemplate>
                                                    <Border>
                                                        <Rectangle Margin="0" SnapsToDevicePixels="True" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2"/>
                                                    </Border>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </RadioButton.FocusVisualStyle>
                                <RadioButton.Style>
                                    <Style TargetType="{x:Type RadioButton}">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="{x:Type RadioButton}">
                                                    <Border Padding="{TemplateBinding Padding}">
                                                        <Grid Background="Transparent" SnapsToDevicePixels="False">
                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="19"/>
                                                                <ColumnDefinition Width="*"/>
                                                            </Grid.ColumnDefinitions>
                                                            <Ellipse x:Name="circle" Fill="White" HorizontalAlignment="Center" Height="19" Stroke="#FF333333" VerticalAlignment="Center" Width="19"/>
                                                            <Path x:Name="arrow" Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="False" Stroke="#FF333333" StrokeThickness="2" VerticalAlignment="Center"/>
                                                            <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="Left" Margin="4,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center"/>
                                                        </Grid>
                                                    </Border>
                                                    <ControlTemplate.Triggers>
                                                        <Trigger Property="IsChecked" Value="True">
                                                            <Setter Property="Data" TargetName="arrow" Value="M1,4.5L4.5,1 8,4.5"/>
                                                        </Trigger>
                                                        <Trigger Property="IsMouseOver" Value="True">
                                                            <Setter Property="Stroke" TargetName="circle" Value="#FF5593FF"/>
                                                            <Setter Property="Fill" TargetName="circle" Value="#FFF3F9FF"/>
                                                            <Setter Property="Stroke" TargetName="arrow" Value="Black"/>
                                                        </Trigger>
                                                        <Trigger Property="IsPressed" Value="True">
                                                            <Setter Property="Stroke" TargetName="circle" Value="#FF3C77DD"/>
                                                            <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/>
                                                            <Setter Property="Fill" TargetName="circle" Value="#FFD9ECFF"/>
                                                            <Setter Property="Stroke" TargetName="arrow" Value="Black"/>
                                                        </Trigger>
                                                        <Trigger Property="IsEnabled" Value="False">
                                                            <Setter Property="Stroke" TargetName="circle" Value="#FFBCBCBC"/>
                                                            <Setter Property="Fill" TargetName="circle" Value="#FFE6E6E6"/>
                                                            <Setter Property="Stroke" TargetName="arrow" Value="#FF707070"/>
                                                        </Trigger>
                                                    </ControlTemplate.Triggers>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </RadioButton.Style>
                            </RadioButton>
                            <ContentPresenter x:Name="ExpandSite" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" DockPanel.Dock="Bottom" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </DockPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="True">
                            <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="ExpandDirection" Value="Right">
                            <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Right"/>
                            <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Left"/>
                            <Setter Property="Style" TargetName="HeaderSite">
                                <Setter.Value>
                                    <Style TargetType="{x:Type RadioButton}">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="{x:Type RadioButton}">
                                                    <Border Padding="{TemplateBinding Padding}">
                                                        <Grid Background="Transparent" SnapsToDevicePixels="False">
                                                            <Grid.RowDefinitions>
                                                                <RowDefinition Height="19"/>
                                                                <RowDefinition Height="*"/>
                                                            </Grid.RowDefinitions>
                                                            <Grid>
                                                                <Grid.LayoutTransform>
                                                                    <TransformGroup>
                                                                        <RotateTransform Angle="-90"/>
                                                                    </TransformGroup>
                                                                </Grid.LayoutTransform>
                                                                <Ellipse x:Name="circle" Fill="White" HorizontalAlignment="Center" Height="19" Stroke="#FF333333" VerticalAlignment="Center" Width="19"/>
                                                                <Path x:Name="arrow" Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="False" Stroke="#FF333333" StrokeThickness="2" VerticalAlignment="Center"/>
                                                            </Grid>
                                                            <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="Center" Margin="0,4,0,0" Grid.Row="1" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top"/>
                                                        </Grid>
                                                    </Border>
                                                    <ControlTemplate.Triggers>
                                                        <Trigger Property="IsChecked" Value="True">
                                                            <Setter Property="Data" TargetName="arrow" Value="M1,4.5L4.5,1 8,4.5"/>
                                                        </Trigger>
                                                        <Trigger Property="IsMouseOver" Value="True">
                                                            <Setter Property="Stroke" TargetName="circle" Value="#FF5593FF"/>
                                                            <Setter Property="Fill" TargetName="circle" Value="#FFF3F9FF"/>
                                                            <Setter Property="Stroke" TargetName="arrow" Value="Black"/>
                                                        </Trigger>
                                                        <Trigger Property="IsPressed" Value="True">
                                                            <Setter Property="Stroke" TargetName="circle" Value="#FF3C77DD"/>
                                                            <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/>
                                                            <Setter Property="Fill" TargetName="circle" Value="#FFD9ECFF"/>
                                                            <Setter Property="Stroke" TargetName="arrow" Value="Black"/>
                                                        </Trigger>
                                                        <Trigger Property="IsEnabled" Value="False">
                                                            <Setter Property="Stroke" TargetName="circle" Value="#FFBCBCBC"/>
                                                            <Setter Property="Fill" TargetName="circle" Value="#FFE6E6E6"/>
                                                            <Setter Property="Stroke" TargetName="arrow" Value="#FF707070"/>
                                                        </Trigger>
                                                    </ControlTemplate.Triggers>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="ExpandDirection" Value="Up">
                            <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top"/>
                            <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom"/>
                            <Setter Property="Style" TargetName="HeaderSite">
                                <Setter.Value>
                                    <Style TargetType="{x:Type RadioButton}">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="{x:Type RadioButton}">
                                                    <Border Padding="{TemplateBinding Padding}">
                                                        <Grid Background="Transparent" SnapsToDevicePixels="False">
                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="19"/>
                                                                <ColumnDefinition Width="*"/>
                                                            </Grid.ColumnDefinitions>
                                                            <Grid>
                                                                <Grid.LayoutTransform>
                                                                    <TransformGroup>
                                                                        <RotateTransform Angle="180"/>
                                                                    </TransformGroup>
                                                                </Grid.LayoutTransform>
                                                                <Ellipse x:Name="circle" Fill="White" HorizontalAlignment="Center" Height="19" Stroke="#FF333333" VerticalAlignment="Center" Width="19"/>
                                                                <Path x:Name="arrow" Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="False" Stroke="#FF333333" StrokeThickness="2" VerticalAlignment="Center"/>
                                                            </Grid>
                                                            <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="Left" Margin="4,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center"/>
                                                        </Grid>
                                                    </Border>
                                                    <ControlTemplate.Triggers>
                                                        <Trigger Property="IsChecked" Value="True">
                                                            <Setter Property="Data" TargetName="arrow" Value="M1,4.5L4.5,1 8,4.5"/>
                                                        </Trigger>
                                                        <Trigger Property="IsMouseOver" Value="True">
                                                            <Setter Property="Stroke" TargetName="circle" Value="#FF5593FF"/>
                                                            <Setter Property="Fill" TargetName="circle" Value="#FFF3F9FF"/>
                                                            <Setter Property="Stroke" TargetName="arrow" Value="Black"/>
                                                        </Trigger>
                                                        <Trigger Property="IsPressed" Value="True">
                                                            <Setter Property="Stroke" TargetName="circle" Value="#FF3C77DD"/>
                                                            <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/>
                                                            <Setter Property="Fill" TargetName="circle" Value="#FFD9ECFF"/>
                                                            <Setter Property="Stroke" TargetName="arrow" Value="Black"/>
                                                        </Trigger>
                                                        <Trigger Property="IsEnabled" Value="False">
                                                            <Setter Property="Stroke" TargetName="circle" Value="#FFBCBCBC"/>
                                                            <Setter Property="Fill" TargetName="circle" Value="#FFE6E6E6"/>
                                                            <Setter Property="Stroke" TargetName="arrow" Value="#FF707070"/>
                                                        </Trigger>
                                                    </ControlTemplate.Triggers>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="ExpandDirection" Value="Left">
                            <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Left"/>
                            <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Right"/>
                            <Setter Property="Style" TargetName="HeaderSite">
                                <Setter.Value>
                                    <Style TargetType="{x:Type RadioButton}">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="{x:Type RadioButton}">
                                                    <Border Padding="{TemplateBinding Padding}">
                                                        <Grid Background="Transparent" SnapsToDevicePixels="False">
                                                            <Grid.RowDefinitions>
                                                                <RowDefinition Height="19"/>
                                                                <RowDefinition Height="*"/>
                                                            </Grid.RowDefinitions>
                                                            <Grid>
                                                                <Grid.LayoutTransform>
                                                                    <TransformGroup>
                                                                        <RotateTransform Angle="90"/>
                                                                    </TransformGroup>
                                                                </Grid.LayoutTransform>
                                                                <Ellipse x:Name="circle" Fill="White" HorizontalAlignment="Center" Height="19" Stroke="#FF333333" VerticalAlignment="Center" Width="19"/>
                                                                <Path x:Name="arrow" Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="False" Stroke="#FF333333" StrokeThickness="2" VerticalAlignment="Center"/>
                                                            </Grid>
                                                            <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="Center" Margin="0,4,0,0" Grid.Row="1" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top"/>
                                                        </Grid>
                                                    </Border>
                                                    <ControlTemplate.Triggers>
                                                        <Trigger Property="IsChecked" Value="True">
                                                            <Setter Property="Data" TargetName="arrow" Value="M1,4.5L4.5,1 8,4.5"/>
                                                        </Trigger>
                                                        <Trigger Property="IsMouseOver" Value="True">
                                                            <Setter Property="Stroke" TargetName="circle" Value="#FF5593FF"/>
                                                            <Setter Property="Fill" TargetName="circle" Value="#FFF3F9FF"/>
                                                            <Setter Property="Stroke" TargetName="arrow" Value="Black"/>
                                                        </Trigger>
                                                        <Trigger Property="IsPressed" Value="True">
                                                            <Setter Property="Stroke" TargetName="circle" Value="#FF3C77DD"/>
                                                            <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/>
                                                            <Setter Property="Fill" TargetName="circle" Value="#FFD9ECFF"/>
                                                            <Setter Property="Stroke" TargetName="arrow" Value="Black"/>
                                                        </Trigger>
                                                        <Trigger Property="IsEnabled" Value="False">
                                                            <Setter Property="Stroke" TargetName="circle" Value="#FFBCBCBC"/>
                                                            <Setter Property="Fill" TargetName="circle" Value="#FFE6E6E6"/>
                                                            <Setter Property="Stroke" TargetName="arrow" Value="#FF707070"/>
                                                        </Trigger>
                                                    </ControlTemplate.Triggers>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<StackPanel>
    <Expander Header="hello" Style="{DynamicResource ExpanderStyle1}">
        <Expander.Content>
            <Grid Height="50" Background="Red"></Grid>
        </Expander.Content>
    </Expander>

    <Expander Header="hello" Style="{DynamicResource ExpanderStyle1}">
        <Expander.Content>
            <Grid Height="50" Background="Green"></Grid>
        </Expander.Content>
    </Expander>
    <Expander Header="hello" Style="{DynamicResource ExpanderStyle1}">
        <Expander.Content>
            <Grid Height="50" Background="Blue"></Grid>
        </Expander.Content>
    </Expander>

</StackPanel>

I tried it out and it does not accomplish what I want. It still uses three rows for three headers. I want the three header to share one row. — paparazzo, Dec 12 '14 at 15:51
@Blam you havent mentioned this before.otherwise i will not add this answer.this answer works for your previous requirement. — Heena, Dec 12 '14 at 16:42

score 0 · Answer 3 · answered Dec 12 '14 at 19:29

This is just a brute force solution. I does not wrap headers like a tab would. But for the 3 I need it works.

<Grid Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="3" x:Name="ExpTab">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>              
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>
    <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="6" Grid.RowSpan="2" BorderBrush="Orange" BorderThickness="4"/>
    <Button Grid.Row="0" Grid.Column="0" Content="^" Click="btnOne"
            Visibility="{Binding Path=VisBtnOne}"/>
    <TextBlock Grid.Row="0" Grid.Column="1" Text="One"
                Visibility="{Binding Path=VisBtnOne}"/>
    <Button Grid.Row="0" Grid.Column="2" Content="^" Click="btnTwo"
            Visibility="{Binding Path=VisBtnTwo}"/>
    <TextBlock Grid.Row="0" Grid.Column="3" Text="Two"
                Visibility="{Binding Path=VisBtnTwo}"/>
    <Button Grid.Row="0" Grid.Column="4" Content="^" Click="btnThree"
            Visibility="{Binding Path=VisBtnThree}"/>
    <TextBlock Grid.Row="0" Grid.Column="5" Text="Three"
                Visibility="{Binding Path=VisBtnThree}"/>

    <TextBlock Grid.Row="1" Grid.ColumnSpan="6" Text="One" Visibility="{Binding Path=VisOne}" MaxHeight="20"/>
    <TextBlock Grid.Row="1" Grid.ColumnSpan="6" Text="two" Visibility="{Binding Path=VisTwo}" MaxHeight="20"/>
    <TextBlock Grid.Row="1" Grid.ColumnSpan="6" Text="Three" Visibility="{Binding Path=VisThree}" MaxHeight="20"/>
</Grid>


using System.ComponentModel;
using System.Diagnostics;

namespace TabExapandar2
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null)
            {
                Debug.WriteLine("PageSearch NotifyPropertyChanged " + info);
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }
        public MainWindow()
        {
            InitializeComponent();
        }
        private Visibility visOne = Visibility.Collapsed;
        private Visibility visTwo = Visibility.Collapsed;
        private Visibility visThree = Visibility.Collapsed;
        private Visibility visBtnOne = Visibility.Visible;
        private Visibility visBtnTwo = Visibility.Visible;
        private Visibility visBtnThree = Visibility.Visible;
        private void NotifyVis()
        {
            NotifyPropertyChanged("VisOne");
            NotifyPropertyChanged("VisTwo");
            NotifyPropertyChanged("VisThree");
            NotifyPropertyChanged("VisBtnOne");
            NotifyPropertyChanged("VisBtnTwo");
            NotifyPropertyChanged("VisBtnThree");
        }
        public Visibility VisOne
        {
            get { return visOne; }
            set 
            { 
                if (visOne == value) return;
                visOne = value;
                if (value == System.Windows.Visibility.Visible)
                {
                    //visOne = System.Windows.Visibility.Collapsed;
                    visTwo = System.Windows.Visibility.Collapsed;
                    visThree = System.Windows.Visibility.Collapsed;

                    visBtnOne = System.Windows.Visibility.Visible;
                    visBtnTwo = System.Windows.Visibility.Collapsed;
                    visBtnThree = System.Windows.Visibility.Collapsed;
                }
                else
                {
                    visBtnOne = System.Windows.Visibility.Visible;
                    visBtnTwo = System.Windows.Visibility.Visible;
                    visBtnThree = System.Windows.Visibility.Visible;
                }
                NotifyVis();
            }
        }
        public Visibility VisTwo
        {
            get { return visTwo; }
            set 
            { 
                if (visTwo == value) return;
                visTwo = value;
                if(value == System.Windows.Visibility.Visible)
                {
                    visOne = System.Windows.Visibility.Collapsed;
                    //visTwo = System.Windows.Visibility.Collapsed;
                    visThree = System.Windows.Visibility.Collapsed;

                    visBtnOne = System.Windows.Visibility.Collapsed;
                    visBtnTwo = System.Windows.Visibility.Visible;
                    visBtnThree = System.Windows.Visibility.Collapsed;
                }
                else
                {
                    visBtnOne = System.Windows.Visibility.Visible;
                    visBtnTwo = System.Windows.Visibility.Visible;
                    visBtnThree = System.Windows.Visibility.Visible;
                }
                NotifyVis();
            }
        }
        public Visibility VisThree
        {
            get { return visThree; }
            set 
            { 
                if (visThree == value) return;
                visThree = value;
                if(value == System.Windows.Visibility.Visible)
                {
                    visOne = System.Windows.Visibility.Collapsed;
                    visTwo = System.Windows.Visibility.Collapsed;
                    //visThree = System.Windows.Visibility.Collapsed;

                    visBtnOne = System.Windows.Visibility.Collapsed;
                    visBtnTwo = System.Windows.Visibility.Collapsed;
                    visBtnThree = System.Windows.Visibility.Visible;
                }
                else
                {
                    visBtnOne = System.Windows.Visibility.Visible;
                    visBtnTwo = System.Windows.Visibility.Visible;
                    visBtnThree = System.Windows.Visibility.Visible;
                }
                NotifyVis();
            }
        }
        public Visibility VisBtnOne
        {
            get { return visBtnOne; }
        }
        public Visibility VisBtnTwo
        {
            get { return visBtnTwo; }
        }
        public Visibility VisBtnThree
        {
            get { return visBtnThree; }
        }

        private void btnOne(object sender, RoutedEventArgs e)
        {
            if(VisOne == System.Windows.Visibility.Visible) 
                VisOne = System.Windows.Visibility.Collapsed;
            else 
                VisOne = System.Windows.Visibility.Visible;
        }

        private void btnTwo(object sender, RoutedEventArgs e)
        {
            if(VisTwo == System.Windows.Visibility.Visible) 
                VisTwo = System.Windows.Visibility.Collapsed;
            else 
                VisTwo = System.Windows.Visibility.Visible;
        }

        private void btnThree(object sender, RoutedEventArgs e)
        {
            if(VisThree == System.Windows.Visibility.Visible) 
                VisThree = System.Windows.Visibility.Collapsed;
            else 
                VisThree = System.Windows.Visibility.Visible;
        }
    }
}

Cross between an Expander and a Tab

3 Answers3