CODEWITHSUNDEEP
wpf
Sari Rahal
Sari Rahal

Reputation: 1955

WPF Orienting Expander Header

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>

enter image description here

What I would like is this:

enter image description here

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:

enter image description here

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

Upvotes: 0

Views: 489

Answers (1)

jHilscher
jHilscher

Reputation: 1868

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

Upvotes: 4

Related Questions