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.

Lenient

I'm playing with your current solution, and it also seems to have problems. If you resize with the window's grip (i.e. not using the Expander), then the resizing is really choppy. On my end, the act of resizing the window also breaks your window resizing code and it will no longer expand to the left. – Differentiable

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.

Lenient

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

Differentiable

I failed to understand your suggestion. Can you please elaborate? – Lenient

@Omer well, if I am understanding your situation correctly, you have an expander that opens to the left. But when you do this, the window resizes to the right and the entire contents shift around, which I assume is looking a little choppy for you. If you keep the entire window intact, it never needs to resize its children. You could fake this effect by using a button that looks like an expander, but when you click it, the handler could create a completely separate window to the left of the main window, which would avoid the whole resizing problem. And you can make it animated. – Differentiable

Ok, I get it - but this is a hack with a side-effect: the end result will not look like a single window (with a single title bar). I am looking for a solution that will give me a single window. – Lenient

re WritableBitmap: I'll give it a try next week when I'm back at work. If it does the job I'll happily grant you the bounty. – Lenient

The link is down :( – Ogdon

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:

Sorkin

Solution 1 will still cause the window to resize to the left, no? And Solution 2 is nice but I won't be able to use a regular window with title bar. I'll have to mimic that myself. – Lenient

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 ?

Cotquean

I want the Window to grow to the left. The expander is growing to the left just fine, but the windows is resized to fit the content to the right (so everything moves). – Lenient