Thursday, February 28, 2008

Using the Silverlight 2 Xaml StackPanel Element

The next advanced layout element in Xaml is the stack panel. The StackPanel lays out its children either horizontally or vertically without having to define the exact location in the visual tree in Xaml. Take the following listing example of a stack panel.

<StackPanel Width="200" Height="200" Orientation="Vertical" Background="Gray">
<Rectangle Width="50" Height="50" Fill="Green"></Rectangle>
<Rectangle Width="50" Height="50" Fill="Blue"></Rectangle>
</StackPanel>


We can see in this example that we set the size and orientation of the StackPanel. The StackPanel will then start at the root X, Y (0,0) position of its parent by default. Children are then rendered vertically in the panel. Now look at this example StackPanel:

<StackPanel Width="200" Height="200" Orientation="Horizontal" Canvas.Top="200" Background="Gray">
<Rectangle Width="50" Height="50" Fill="Green"></Rectangle>
<Rectangle Width="50" Height="50" Fill="Blue"></Rectangle>
</StackPanel>


In the example we see that the Orientation of the StackPanel is set to Horizontal so its children will be laid out accordingly. When we put both of these StackPanel into some Xaml this is what we get. We can see the first one rendered vertically and the second horizontally.



Using advanced layout, it is easier to create list box functionality or recordsets and using other structures like templates and the like you can pull records data bind and then use StackPanels too easily lay out all the items you need.

3 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. a silverlight tutorial without a reasonably interesting interactive example embedded = fail

    present something cool and then show how you did it

    ReplyDelete
  3. or you could get a life and be nice. if you have nothing positive to say don't say anything at all. not to mentioned that was years ago and your posting neg stuff? anyway here is an evolution of this panel here: http://www.hackingsilverlight.net/hsl.html

    ReplyDelete