WPF expander with header at the top

Question

I want to add an expander like the following:

HeaderExpander

|> {element1, element2, element3}

But it creates this(I want the expander button under the text):

XAML:

           <Expander Grid.Row="3"
                     Header="Wechselkonto: " 
                     ExpandDirection="Right"
                     FlowDirection="LeftToRight">
              <StackPanel
                          Grid.ColumnSpan="2"
                          Orientation="Horizontal">

               <!--some buttons-->
                .....

I found the default template but I don't find the proper way to change the style:

<Style x:Key="ExpanderRightHeaderStyleCustom" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Padding="{TemplateBinding Padding}">
                    <Grid Background="Red" SnapsToDevicePixels="False">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="19"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Button Grid.Row="0" />
                        <Grid Grid.Row="1">
                            <Grid.LayoutTransform>
                                <TransformGroup>
                                    <TransformGroup.Children>
                                        <TransformCollection>
                                            <RotateTransform Angle="-90"/>
                                        </TransformCollection>
                                    </TransformGroup.Children>
                                </TransformGroup>
                            </Grid.LayoutTransform>
                            <Ellipse Grid.Row="0"
                                     x:Name="circle" 
                                     HorizontalAlignment="Center" 
                                     Height="19" 
                                     Stroke="DarkGray" 
                                     VerticalAlignment="Center" 
                                     Width="19"/>
                            <Path Grid.Row="0"
                                  x:Name="arrow" 
                                  Data="M 1,1.5 L 4.5,5 L 8,1.5" 
                                  HorizontalAlignment="Center" 
                                  SnapsToDevicePixels="false" 
                                  Stroke="#666" 
                                  StrokeThickness="2" 
                                  VerticalAlignment="Center"/>
                        </Grid>
                        <ContentPresenter HorizontalAlignment="Left" 
                                          Margin="0,4,0,0" 
                                          Grid.Row="1" 
                                          RecognizesAccessKey="True" 
                                          SnapsToDevicePixels="True" 
                                          VerticalAlignment="Bottom"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="true">
                        <Setter Property="Data" TargetName="arrow" Value="M 1,4.5  L 4.5,1  L 8,4.5"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Stroke" TargetName="circle" Value="#FF3C7FB1"/>
                        <Setter Property="Stroke" TargetName="arrow" Value="#222"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="Stroke" TargetName="circle" Value="#FF526C7B"/>
                        <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/>
                        <Setter Property="Stroke" TargetName="arrow" Value="#FF003366"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

Ok, I found the solution:

Just editing the Grid.Row="1" of the Grid that contains the ellipse and Path elements and setting the Grid.Row="0" in the ContentPresenter element

<Style x:Key="ExpanderRightHeaderStyleCustom2" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Padding="{TemplateBinding Padding}">
                    <Grid Background="Transparent" SnapsToDevicePixels="False">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid Grid.Row="1">
                            <Grid.LayoutTransform>
                                <TransformGroup>
                                    <TransformGroup.Children>
                                        <TransformCollection>
                                            <RotateTransform Angle="-90"/>
                                        </TransformCollection>
                                    </TransformGroup.Children>
                                </TransformGroup>
                            </Grid.LayoutTransform>
                            <Ellipse x:Name="circle" 
                                     HorizontalAlignment="Center" 
                                     Height="19" 
                                     Stroke="DarkGray" 
                                     VerticalAlignment="Center" 
                                     Width="19"/>
                            <Path x:Name="arrow" 
                                  Data="M 1,1.5 L 4.5,5 L 8,1.5" 
                                  HorizontalAlignment="Center" 
                                  SnapsToDevicePixels="false" 
                                  Stroke="#666" 
                                  StrokeThickness="2" 
                                  VerticalAlignment="Center"/>
                        </Grid>
                        <ContentPresenter HorizontalAlignment="Center" 
                                          Margin="0,4,0,0" 
                                          Grid.Row="0" 
                                          RecognizesAccessKey="True" 
                                          SnapsToDevicePixels="True" 
                                          VerticalAlignment="Top"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="true">
                        <Setter Property="Data" TargetName="arrow" Value="M 1,4.5  L 4.5,1  L 8,4.5"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Stroke" TargetName="circle" Value="#FF3C7FB1"/>
                        <Setter Property="Stroke" TargetName="arrow" Value="#222"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="Stroke" TargetName="circle" Value="#FF526C7B"/>
                        <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/>
                        <Setter Property="Stroke" TargetName="arrow" Value="#FF003366"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

The Expander control template (available on MDSN here ) defines a grid with 2 rows. One for the expander button, the other for the content.

<RowDefinition Height="Auto" />
<RowDefinition x:Name="ContentRow" Height="0" />

You should be able to create a new style with a template where you swap these rows, both in the declaration and in the Grid.Row properties set on the two borders.