Search code examples
c#wpfresizeexpandframeworkelement

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


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:

enter image description here

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

Solution

  • 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:

    enter image description here