WPF - Expand Window to the Left

Question

I have a WPF window with expandable panel (via Expander). The panel is on the left side of the window, and when expanded the window grows to fit the content.

By default, windows are anchored to the top-left, so my window grows to the right. I'd like the window to grow to the left.

I tried to do the following in the Window.SizeChanged event:

private void onWindowSizeChanged(object sender, SizeChangedEventArgs e)
{
    Left -= (e.NewSize.Width - e.PreviousSize.Width)
}

and it works, but the growth is jerky, and I'd like to find a smoother solution.

Answer 1

I managed to overcome this using a simple solution: Hide & Show.

Here's the code:

protected override void OnRenderSizeChanged(SizeChangeInfo sizeInfo)
{
    if (!sizeInfo.WidthChanged)
    {
        base.OnRenderSizeChanged(sizeInfo);
        return;
    }
    Hide();
    base.OnRenderSizeChanged(sizeInfo);
    Left -= (sizeInfo.NewSize.Width - sizeInfo.PreviousSize.Width);
    Show();
}

I replaced the event handler for Window.SizeChanged with this override of FrameworkElement.OnRenderSizeChanged.

Answer 2

I haven't tried to make a Window grow to the left like what you're requesting, but if all else fails, I would consider templating a button to look like the expander button. Then instead of trying to make your Window grow to the left, make a new Window grow to the left of your primary Window using Transforms.

UPDATE

Well, the poor rendering performance could be video card related, layout (overly complex) related, or both. I've got an idea that might do the trick for you. Jeff Prosise blogged about a magnifying glass in Silverlight that uses a WriteableBitmap to achieve the desired effect. I thought, "why not use a WriteableBitmap to create a screenshot of your layout to the right of the Expander, and cover up the other elements with it?". I think that if you do this and hide the underlying elements (so they don't get adjusted), rendering performance will be much improved.

I got Jeff's code to work in WPF with little modification.

http://www.wintellect.com/CS/blogs/jprosise/archive/2009/10/29/more-fun-with-silverlight-3-s-writeablebitmap.aspx

Answer 3

Solution 1

Try to use Window property: SizeToContent="width" this will scale your window to the size of your content and you can scale your content using animation and easing, this will make scaling of the window nice and smooth.

Solution 2

You could create a window which is bigger than it's content and make your background transparent. You still have to add background to some element.

Here is an example of how it may look like:

Answer 4

You may put your expander in a grid (where the column size can change) and then set the ExpandDirection property of your expander to left ?