This is the fourth post in a series on building a Silverlight game. In the last post, we polished off our three stack panels and added some rectangles to the first stack panel.
The challenge we left off with is how to get the rectangles down to the bottom where they belong. Stack panels like to put their items at the top and then add subsequent items underneath, just like in HTML.
We can get around this by making our stack panel just tall enough to hold only the rectangles that are in it, and then forcing the entire stack panel down to the bottom. This is accomplished by wrapping our stack panel in a border and taking away its height.
A border is an interesting Silverlight control that can have only one child. It is best used for making borders of course, but it can also make a handy container. There are some nice benefits of having a container control that you know will only ever have one child.
To surround the panels with borders in Expression Blend, just right-click the panel and select “Group Into > Border”. Blend is even kind enough to move our height from the stack panel to the border. Repeat this for all of the panels. If you’re using Visual Studio, you can just skip ahead to the finished XAML below.
After surrounding the panels with borders, your object tree should look like this.
The next step is to get the panels to sit at the bottom of their panels. This is done by selecting all three panels at once in the object explorer and changing their vertical alignment property to “Bottom”
Now all of the panels are sitting snugly at the bottom of their borders. Remember that the empty space at the bottom is intentional. We’ll fill that up shortly.
Your finished XAML should look something a lot like this. We have three stack panels, each wrapped in a border. The first stack panel has three playable rectangles and a rectangle platform.
1: <Canvas x:Name="LayoutRoot" Width="800" Height="430">
2: <Border Height="380" Width="257" Canvas.Left="15">
3: <StackPanel x:Name="LeftPanel" Orientation="Vertical"
4: Canvas.ZIndex="1" VerticalAlignment="Bottom">
5: <Rectangle Height="50" Width="100" Fill="Orange" />
6: <Rectangle Height="50" Width="110" Fill="Blue" />
7: <Rectangle Height="50" Width="120" Fill="Green" />
8: <Rectangle Height="5" Width="120" Fill="Black" />
9: </StackPanel>
10: </Border>
11: <Border Height="380" Width="257" Canvas.Left="272">
12: <StackPanel x:Name="MiddlePanel" Orientation="Vertical"
13: Canvas.ZIndex="1" VerticalAlignment="Bottom"/>
14: </Border>
15: <Border Height="380" Width="257" Canvas.Left="529">
16: <StackPanel x:Name="RightPanel" Orientation="Vertical"
17: Canvas.ZIndex="1" VerticalAlignment="Bottom"/>
18: </Border>
19: </Canvas>
The last thing we need to do to finish our basic layout is to fill up the bottom area. For now, we’ll just use a boring gray rectangle. Later, we’ll use brushes to spice it up a bit.
1: <Rectangle x:Name="BottomRectangle" Height="50" Width="800"
2: Canvas.Top="380" Fill="Gray" />
After adding the bottom rectangle, our playing area looks like this.
And that’s it for basic layout. In the next post, we’ll start writing some C# to enable dragging and dropping the rectangles.