How to align WPF Expander control toggle button

Question

Hi I was wondering is it possible to align the toggle button on a WPF expander control to the far right side?

Answer 1

With WPF all things are possible. ;) Unfortunately not all things are simple. Your best bet here is to re-template the expander. Start out by copying the default Expander template, found here.

Next, find the Grid that contains 2 columns, one containing a ToggleButton and the other containing a ContentPresenter. Swap the columns so the toggle is in column 1. Then change the column definition sizes so the first column is star-sized, and the second is size 20. When finished, you should have a chunk in the template that looks like this:

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="20" />
  </Grid.ColumnDefinitions>
    <ToggleButton Grid.Column="1"
      IsChecked="{Binding Path=IsExpanded,Mode=TwoWay,
      RelativeSource={RelativeSource TemplatedParent}}"
      OverridesDefaultStyle="True" 
      Template="{StaticResource ExpanderToggleButton}" 
      Background="{StaticResource NormalBrush}" />
    <ContentPresenter Margin="4" 
      ContentSource="Header" 
      RecognizesAccessKey="True" />
</Grid>

Continue modifying the template until you get the look and feel that you need.

EDIT: The template provided on MSDN is a bare-bones version of the "real" expander template. If you want the stylized expander template, use Expression Blend and copy the existing control template off an Expander.