Alex Rivera | Logout

WPF Expander Button Styled so it is inside Expander Header

Asked 2010-05-22T21:10:27.393
9

I am using the Expander control and have styled the header as shown in the picture below:

http://www.hughgrice.com/Expander.jpg

The problem I have is that I want the expander button to be contained within the header so that the line for the end of the header template aligns with the Expander content i.e. I ultimatly want to end up with something similar to the image below:

http://www.hughgrice.com/Expander.gif

Thanks in advance.

Edit
Report

1 Answer

6

You will need to edit the Expander's Template, not the HeaderTemplate. The HeaderTemplate doesn't contain the expand button, just the content inside of it.

The default control template looks something like this:

<ControlTemplate TargetType="{x:Type Expander}">
    <Border>
        <DockPanel>
            <ToggleButton x:Name="HeaderSite"
                          ContentTemplate="{TemplateBinding HeaderTemplate}"
                          Content="{TemplateBinding Header}"
                          DockPanel.Dock="Top"
                          IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
            <ContentPresenter x:Name="ExpandSite" />
        </DockPanel>
    </Border>
</ControlTemplate>

I took out most of the attributes but left in the important stuff. Basically, you will want to add your customizations around the ToggleButton. That is what contains the expand button and the header content.

If you have Expression Blend, it makes this process much easier because you can simply edit a copy of the original template. Visual Studio doesn't really have this ability yet.

answered 2010-05-22T22:22:13.583

Your Answer