How does one use a WPF/SL Grid and GridSplitter as a bindable SplitContainer?

Question

Suppose you want to allow a user to re-size a WPF/SL Grid containing two columns. But you also want to allow the user to hide one column (a "panel") or the other column. When both columns (panels) are shown, the GridSplitter should be also be shown; otherwise not. You also want to use MVVM-style bindings without code-behind. And maybe you want to persist the settings between sessions. You have these properties in your view-model:

bool IsPanelOneVisible

bool IsPanelTwoVisible

GridLength SplitPosition

So how can I wire this up using only bindings?

Note that a grid column's width (set either via binding or to Auto) gets overridden when the user drags the GridSplitter.

None of the posts that I've perused (which also include a couple of SplitContainer implementations) address this scenario head on. One could wire this up using code-behind (in response to events) or additional properties on the view-model. But I was hoping for a more elegant solution.

Any ideas? Thanks!

Answer 1

We hit the same problem and the binding solutions were so messy we would up creating a user control to do all the above (splitter and toggle of panes on/off).

The problem is that the 1st column size changes from pixel sized (resizable by the splitter) to autosize and back again. The visibility of the splitter may also change depending on how you want it to function.

Once you create a user control to do the lot you will stop worrying about MVVM on the inside (code-behind is not evil for user controls, only at an application level) and only worry about exposing MVVM friendly properties like IsPanelOneVisible etc.