Combine expander and grid (switched right-to-left)

Question

I want to create a resizable expander control, as described in Combine expander and grid (resizable expander). This solution is working perfectly, but I need it flipped horizontally (an expander aligned to the right & expanding to the left).

In order to do this, I turned around everything I thought was needed, but I can't seem to get it to work: Only the column containing the GridSplitter resizes when dragging.

Here's what I tried in KAXAML:

<Expander Header="Test" ExpandDirection="Left" HorizontalAlignment="Right" Background="LightBlue">
  <Expander.Content>
    <Grid>  
      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="5" />
          <ColumnDefinition Width="Auto"/>
      </Grid.ColumnDefinitions>
      <GridSplitter  Width="5" ResizeBehavior="CurrentAndNext" ResizeDirection="Columns"/>
      <TextBlock Grid.Column="1" Text="Lorem ipsum dolor sit"/>
    </Grid>
</Expander.Content>

The ultimate goal is to make the expander's content resizable once expanded.

Any ideas?

score 0 · Accepted Answer · answered May 14 '18 at 09:32

I can make GridSplitter resize properly to the left, if I set Width="*" instead of Width="5".

<Expander Header="Test" ExpandDirection="Left" HorizontalAlignment="Right" Background="LightBlue">
  <Expander.Content>
    <Grid>  
      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="Auto"/>
      </Grid.ColumnDefinitions>
      <GridSplitter Width="5" ResizeBehavior="CurrentAndNext" ResizeDirection="Columns" />
      <TextBlock Grid.Column="1" Text="Lorem ipsum dolor sit"/>
    </Grid>
  </Expander.Content>
</Expander>

Combine expander and grid (switched right-to-left)

1 Answers1