SpanningStackPanel
March 12th, 200705/21/07 EDIT: Fil Fortes was kind enough to point out I’ve put up a non-bindable panel. If you want a good version of this panel you should check out: http://fortes.com/2007/05/07/uniformpanel/
I’m guessing the following scenario hasn’t only happened to me.
You know how a Grid and it’s children will automatically fill all available space?
How many times have you mistakenly attempted to ask StackPanel to do the same thing? For example: I want to have six buttons span the width of my window.
Doh! I’ve done this more times than I’d like to admit.
So your probably thinking to yourself, “So just put them in a Grid and create columns you fool! It’s easy!” And you’re right, that’s what I usually end up doing. But what if you’re dynamically adding/removing objects to your Grid? Then you have to create the rows/columns in code each time a child is added or removed. What a pain! Using a Grid’s Columns/Rows really falls apart if you need this layout to occur in an ItemsControl and your setting the ItemsControl.ItemsPanel property! Now you’re screwed and you’re going to have to write a custom control…like I did.
If you were able to follow the ramblings of that last paragraph then you’ve probably figured how I built SpanningStackPanel. All I did was inherit from Grid and then, depending on Orientation and FlowDirection, I add Columns/Rows when a UIElement is added/removed to the Children collection.
NOTE: I remember Kevin Moore once telling me it’s not worth the overhead of inheriting from anything other than Panel, but in this case I felt it was easier to let Grid do the work it was already programmed to do. This way I didn’t have to mess with any of that ArrangeOverride or MeasureOverride nonsense one usually has when building a custom panel.
There were a couple of things I did to make the panel mimic some of StackPanel’s behavior. Like I mentioned before I have Orientation and FlowDirection properties that control the layout as seen below.
And lastly, to mimic Grid’s behavior I don’t give a control more or less space if it has a hard set Width/Height property. The following screenshot shows the green button with it’s Width property set to 25px.
So that’s it! A panel that acts like a StackPanel while laying out like a Grid.
You can snag the source from here if you want to play around with it.
SpanningStackPanelExample Source
At some point I’ll probably come back to this control and change the way it determines if a control has a set height/width. I don’t like the way I currently implemented it but it works for now. Maybe I’ll come up with a better name then SpanningStackPanel too. SuperUltraliciousMaskedAvengerPanel…that has a nice ring to it.
March 12th, 2007 at 11:27 am
Hi Nick,
Maybe it’s a UniformStackPanel? Or maybe not, since you showed that are are exceptions to the uniformity. Maybe MostlyUniformStackPanel?
Tor.
March 13th, 2007 at 12:11 pm
[...] http://www.nickthuesen.com/?p=15 [...]
March 13th, 2007 at 1:15 pm
[...] 13, 2007 at 2:15 pm · Filed under WPF Nick Thuesen has just published a new custom WPF panel that functions like a stack panel but takes up the entire space provided to it. I love to see new [...]
March 13th, 2007 at 1:31 pm
Wow…that solves a problem I had with getting my PowerGrid to fill its parent. Great job!
March 13th, 2007 at 3:15 pm
Nick-
UniformGrid can do some of this…not the last bit though (keeping the size of the child if it is hard coded…)
March 13th, 2007 at 4:27 pm
I had looked into UniformGrid back when I first ran into a similar issue. And you’re right, it was the not having the row/column fit the width/height of the child that ultimately led me to this panel. I also didn’t like the idea having to writ Rows=1 or Columns=1 in code to switch orientation. Not that big of a deal…but it feels…dirty. Hee.
If I was smart, I’d add a NumRows/NumColumns to SwappingStackPanel…but this is all I needed it to do at the moment. Maybe in the future. (Plus it would suddenly mimic a control in Times Reader and then all my secrets would be naked for the world to oggle! OH THE THOUGHT OF IT!!)
January 15th, 2008 at 4:26 pm
Though you’ve probably thought of this, I’d call this a StretchingStackPanel. I’m pretty sure we’ve all tried to set a stack panel’s HorizontalAlignment to Stretch, only to be dissapointed when it didn’t work exactly like this nice panel =).
-tv
June 2nd, 2008 at 10:18 pm
[...] SpanningStackPanel [...]