ItemsControl where entire item is expander for sub-items

Question

So it's kind of hard to describe the behavior I want, so I drew a nice picture with my amateur paint skills.

So basically I want the headings of the ItemsControl to operate like an expander, without the ugly expander icon that comes along (so just clicking anywhere in the box would expand to see the sub items). I already have the data-hierarchy in place, but I cannot for the life of me get the expander to behave as I want, anybody had any success overriding expander styles to accomplish something like this, or is there another control that can accomplish something like this easier? Here's some simple code, but has the ugly expander button, overriding the headertemplate and style of the expander has only made it look much worse.

<ItemsControl ItemsSource="{Binding Collection}" 
  HorizontalContentAlignment="Stretch">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Expander Header="Heading">
                <ItemsControl ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Expander Header="Sub-Heading">
                                <ListBox ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch"/>
                            </Expander>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Expander>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Answer 1

You just have to use a custom style for your expander if you don't like the built in style :)

Here is a start :

<Style x:Key="customExpander">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="Expander">
                    <DockPanel>
                        <ToggleButton DockPanel.Dock="Top"
                                      IsChecked="{Binding Path=IsExpanded,Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                      Background="{TemplateBinding Background}"
                                      Content="{TemplateBinding Header}"
                                      ContentTemplate="{TemplateBinding HeaderTemplate}"
                                      Foreground="{TemplateBinding Foreground}"
                                      FontFamily="{TemplateBinding FontFamily}"
                                      FontSize="{TemplateBinding FontSize}"
                                      FontStretch="{TemplateBinding FontStretch}"
                                      FontStyle="{TemplateBinding FontStyle}"
                                      FontWeight="{TemplateBinding FontWeight}"
                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                      Padding="{TemplateBinding Padding}"
                                      Name="HeaderSite"
                                      MinWidth="0"
                                      MinHeight="0"
                                      Margin="1,1,1,1">
                            <ToggleButton.Template>
                                <ControlTemplate TargetType="ToggleButton">
                                    <TextBlock Text="{TemplateBinding Content}" Background="{TemplateBinding Background}" />
                                </ControlTemplate>
                            </ToggleButton.Template>
                        </ToggleButton>

                        <ContentPresenter Content="{TemplateBinding Content}"
                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                  ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                  Name="ExpandSite" Margin="{TemplateBinding Padding}"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                  Visibility="Collapsed"
                                  Focusable="False"
                                  DockPanel.Dock="Bottom" />
                    </DockPanel>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="True">
                            <Setter TargetName="HeaderSite" Property="Background" Value="Gold" />
                            <Setter TargetName="ExpandSite" Property="Visibility" Value="Visible" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="TextElement.Foreground" Value="{DynamicResource DisabledTextBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

Then change your xaml to use this style :

<ItemsControl ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Expander Header="Heading" Style="{StaticResource customExpander}" Background="LightSteelBlue" >
                <ItemsControl ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Expander Header="Sub-Heading" Style="{StaticResource customExpander}" Background="LightSalmon">
                                <ListBox ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch"/>
                            </Expander>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Expander>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

EDIT The important part is the

<ControlTemplate TargetType="ToggleButton">
    <TextBlock Text="{TemplateBinding Content}" Background="{TemplateBinding Background}" />
</ControlTemplate> 

if you want to customize. This is a very raw solution so you have plenty of room to enhance it ;)