« Back to blog

Silverlight for Dummies: StackPanel

This is going to be an absolute short post. I plan to couple this with the post on Grid to talk about something a little more complicated, however that would be in the next post, which hopefully will come tomorrow, depending upon how heavy my day. So the stack panel is another nice control which allows you to group controls and map them. However, this does not give you complete control over things as a Grid does. A stack panel is also essentially a container of a basic nature, which can Stack controls horizontally or vertically. Here is a little bit of an overview of the whole syntax: <StackPanel> Children </StackPanel> public class StackPanel : Panel, IScrollInfo // This is its basic definition in C#. <StackPanel x:Name="Layout" Background="Black"> <Button x:Name="Button1" Content="Click me!"></Button> <Button x:Name="Button2" Content="And me!" ></Button> </StackPanel> And this should result in the two buttons stacking one on top of the other i.e vertically. The stack pannel has a Orientation property which has a default Vertical property. If you want the buttons to stack up against each other, just set the Orientation to "Horizontal" and you will have it. <StackPanel x:Name="Layout" Background="Black" Orientation="Horizontal"> <Button x:Name="Button1" Content="Click me!"></Button> <Button x:Name="Button2" Content="And me!" ></Button> </StackPanel> Now there is one thing i would like to mention here about the stack panel which most blogs would not: You have to imagine the StackPanel as a one row(vertical orientation)/one column(horizontal orientation) table. What does this mean? Simple: in the vertical orientation the VerticalAlignment property of the children elements will not have any effect and the the same applies to the HorizontalAlignment when it is Oriented in the horizontal mode. So, the next obvious question is how will the width and height get decided in such an event? Simple agian, it takes the least space, i.e,  width or height required. So, if you have given the control a set width or height it will set it self to just about that, of course, if you have included the margins in the control then it will take that as well. So, whats the catch? In case, you have not assigned any width, or if your buttons do not have any labels of text, then the stackpanel will take the minimum required length i.e. squash the whole control to near zero pixel length and be done with it. There is no point giving the stack panel width or height. It will just increase the width and height of the stack panel. It will not increase the space for your control. Another thing to note is that the stack panel does not allow you to wrap the child controls once it runs out of space. I have tried it, without results. So in case you have managed it do let me know. The thing you can use instead it the WrapPanel which comes in the silverlight toolkit. So, here was a brief about the StackPanel. Hope it is useful. Tomorrow i might jump to slightly more fun stuff. Enjoy!