Expand Window to LEFT & RIGHT but keep the main content at the same position

Question

I have a window that expands to left and to the right.

Simplified example:

<Window x:Class="Application1.Windows.Test"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="MainWindow"
    SizeToContent="Width" Height="250">   
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />                <!--Expander LEFT-->
            <ColumnDefinition Width="25"/>
            <ColumnDefinition Width="175" />                <!--Red Content -->
            <ColumnDefinition Width="25"/>
            <ColumnDefinition Width="Auto"/>                <!--Expander RIGHT-->
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="25"/>
        </Grid.RowDefinitions>      
    <Expander Grid.Column="0"
              Grid.Row="0"
              Grid.RowSpan="3"
              Margin="5"
              ExpandDirection="Left">
        <Grid Width="200">                
        </Grid>
    </Expander>
    <Grid Grid.Column="2"                  
          Grid.RowSpan="3" 
          Background="Red"/>
        <Expander Grid.Column="4"
                  Grid.Row="0"
                  Grid.RowSpan="3"
                  Margin="5"
                  ExpandDirection="Right">
        <Grid Width="200">
        </Grid>
    </Expander>
    </Grid>

Here you can see what the problem is:

I've already had a look on WPF - Expand Window to the Left.

The solution kind of works but that is only solving half of the problem.

How to do that for Left AND Right ?

UPDATE

I do not want the Expander columns to be fixed. They should just show the minimal space needed for the expander

Felix D. · Accepted Answer · 2017-06-19T12:28:28.513

One approach that will work is this:

(But I'm somehow unsatisfied with this solution)

Create an Enum to store the last Action in:

public enum ExpandActions
{
    ExpandRight,
    ExpandLeft,
    CollapsRight,
    CollapseLeft
}

Then I added the handlers for Expand & Collapse to my Expanders in xaml.

At last override SizeChanged on the Window as in WPF - Expand Window to the Left.

We only want this behavior, when expanding to left - otherwise we would kill our 'expand-to-right' behavior.

protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
{
    if (!sizeInfo.WidthChanged)
    {
        base.OnRenderSizeChanged(sizeInfo);
        return;
    }

    Hide();
    base.OnRenderSizeChanged(sizeInfo);

    //Last action was on left expander
    if(_lastAction == ExpandActions.CollapseLeft || _lastAction == ExpandActions.ExpandLeft)
    {
        Left -= (sizeInfo.NewSize.Width - sizeInfo.PreviousSize.Width);
    }                    
    Show();
}

Good point about this is that expansion out of screen could be handled.

It works but I guess it's not the best solution.

The result is this:

It looks pretty neat to me, and should be a great solution. PS, I like your animation of demonstrating your problem :P — Tide Gu, Jun 19 '17 at 13:29

Expand Window to LEFT & RIGHT but keep the main content at the same position

1 Answers1