WPF Orienting Expander Header

Question

I'm trying to Orient my head of an expandera and would like to have the expanding button on the right with a check box and text on the left. Currently I have this:

<Expander Margin="5" IsExpanded="False" FlowDirection="RightToLeft">
  <Expander.Header>
    <StackPanel Orientation="Horizontal" >
      <CheckBox IsChecked="{Binding Selected}" ></CheckBox>
      <TextBlock Text="{Binding FileName}" />
      <TextBlock Text="{Binding FileName}" />
    </StackPanel>
  </Expander.Header>

What I would like is this:

Every time I try to change the orientation, I seem to be moving the button with the text and checkbox.

After changing the orientation I tried something like this:

<ItemsControl x:Name="ISOs">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Expander Margin="5" IsExpanded="False" FlowDirection="RightToLeft">
                <Expander.Header>
                    <StackPanel Orientation="Horizontal" FlowDirection="LeftToRight" >

                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="15"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                        </Grid>

                        <CheckBox IsChecked="{Binding Selected}" Grid.Column="0" ></CheckBox>
                        <TextBlock Text="{Binding FileName}" Grid.Column="1" />
                    </StackPanel>
                </Expander.Header>

And that get's me this:

Now I just need to get the Horizontal alignment for the checkbox and text to be to the left hand side.

There will be other information in the bar, I just wanted to get the understanding first and add to it. But I updated my pictures for you. — Sari Rahal, Nov 02 '17 at 19:17
Possible duplicate of [Moving location of Expander expansion button wpf](https://stackoverflow.com/questions/3095544/moving-location-of-expander-expansion-button-wpf) — ASh, Nov 02 '17 at 19:27

jHilscher · Accepted Answer · 2017-11-02T19:59:57.617

A similar question has been asked here: How to put Expander ToggleButton on right

<Expander Margin="5" IsExpanded="False" FlowDirection="RightToLeft">
    <Expander.Header>
        <StackPanel
            Orientation="Horizontal"
            Width="{Binding RelativeSource={RelativeSource AncestorType=Expander}, Path=ActualWidth}" 
            Margin="-30,0,0,0"
            HorizontalAlignment="Left" FlowDirection="LeftToRight">
            <CheckBox IsChecked="True" ></CheckBox>
            <TextBlock Text="Text One" />
            <TextBlock Text="Text Two" />
        </StackPanel>
    </Expander.Header>
</Expander>

You have to "reset" the flowdirection inside the header. This will order the elements inside the StackPanel in the right order.

Unfortunately the StackPanel will be aligned to the right. And there is no clean way to left align it, other than setting it's with to the expander width: Width="{Binding RelativeSource={RelativeSource AncestorType=Expander}, Path=ActualWidth}"

The other (maybe cleaner) solution is to override the template of the HeaderTemplate

A quick test showed, that this does not help. The HeaderTemplate behaves more or less like the header content. This leaves you with overriding the whole control template, which is probably not feasible. But if you want to: MSDN has the control template on it's docs

@jHilscher Right, `HeaderTemplate` is a DataTemplate and gets you nowhere. I meant overriding the ControlTemplate for the header that's used by the Expander's style. That's doable (I tried it). But your method achieves the same results with a lot less effort. The control templates on MSDN btw are often simplified or obsolete -- you can Edit Template off the XAML designer context menu and get whatever your version of Windows uses currently. But then of course your application will use that forever -- another reason not to bother. — 15ee8f99-57ff-4f92-890c-b56153, Nov 02 '17 at 19:57

WPF Orienting Expander Header

1 Answers1