WynApse Home Page
Home    Blog    About    Contact       
Latest Article:


My Tags:
My Sponsors:






Lifetime Member:

Silverlight 2Plus Tutorials 003 - StackPanels/App Layout




Change of Mind

In my last posting, I mentioned that one response to me was to build a large application and detail it. I think I'm going to do that in conjunction with what I had originally planned. Well ok maybe not a 'large' application, but we'll see when we get there.

My reason for that is... and I may be wrong and end up changing my mind (again), but when I discuss the various controls, I'd like to do them something like I did the Reflection Builder ... with a bunch of sliders allowing you to play with the settings. The only problem is ... there are LOTS of settings. Well, I guess that's NOT a problem, but it is if I'm trying to display them!


The Application

So my thought is to incrementally build something like this:



The controls would be listed on the left in a scrollable list... I haven't thought much beyond that, so have not considered multiple control sets, for instance. Selecting one of the controls would then provide controls on the right-hand side to modify the look-and-feel of a sample display. A Tab Control would probably be necessary to give enough room on one page for all the possible things to change.

Each control would have to download a XAP for it's right-hand display because this would get too heavy pretty fast. As you can tell, there will be multiple concepts to cover if we get this all the way to completion.


Chicken and Egg

So I find myself in a classical chicken and egg situation... it's pretty well impossible for me to use something not built yet to (completely) dissuss the pieces I want to use, so we'll have to take it a piece at a time.

At least from the outset, this looks to me like a Horizontal StackPanel with 2 items inside: On the left, a ListBox (or is it a vertical StackPanel?), and on the right a Vertical StackPanel containing 2 items: a Border(?) on top containing the control to manipulate, and below is a TabControl of options.

For purposes of sizing out to browser width, a Grid is probably a better choices, but lets just consider this for now, because it's easier to explain.


StackPanel

I had originally thought I'd begin with the Border control, but since it looks like this little beauty has two or three StackPanels, I think I'll begin there.

If you're familiar with HTML (and who isn't?) you can think of a StackPanel as an HTML Table of one row or one column. It takes almost nothing to setup, the sizing works either as fixed or conforming to what is contained inside, and there's not a whole lot of properties associated with it beyond the normal ones.

Speaking of 'normal' properties, each Silverlight control has some common properties that will be obvious and probably don't need any discussion, such as Width and Height (and a lot more).

There are also some more complex properties that are not obvious to beginners, and I'll discuss those later. A few examples are Clip, Resources, and Style.

The one out of the ordinary property that the StackPanel has is Orientation. This is the property that is going to help us get the layout working the way we want. The default value is "Vertical", and the other choice is "Horizontal" (duh).

While not confined to the StackPanel, a couple other important properties we'll use are HorizontalAlignment and VerticalAlignment. Both of these default to "Stretch", but other options are "Left", "Center", and "Right".

One interesting note is that a StackPanel can have a Background, but has no Stroke. That means if you want a border around a StackPanel, you're going to have to use some other object to do it. And... if you find yourself beating up controls to get what you want, maybe you're not using the right one :)


The Layout

Taking what was previously discussed about the StackPanel and just writing out what we want without regard to xaml syntax, we can do a pseudo-xaml layout:

Outer StackPanel -- horizontal
   Left StackPanel -- vertical, width enough to hold control names with a suitable margin from the left, right, and top
   Right StackPanel -- vertical
      Top Element Canvas or Border to hold the control to display. Want this centered in the space
      Bottom Element a Tab control
   End of Right StackPanel
End of Outer StackPanel


In the real world, I would have drawn that out on paper, but after seeing my results drawing the overall idea image, I thought I'd stick with text for now :)

Building this in Visual Studio means opening a new project as detailed last time, and blowing away the default Grid in favor of an outer StackPanel. Once the grid is gone, you can go to the Toolbox and drag a StackPanel over to the xaml. Some of the controls need a namespace and if you try to build them by simply typing, intellisense will allow that to all look right, but the lack of the namespace will prevent it from working correctly. Until you get familiar with what needs a namespace, the simplest thing to do is to drag the control from the Toolbox.

Because I don't want to detail out a Tab Control yet, we're going to complete this exercise with placing TextBoxes inside each major section showing what will eventually be there.


Page.xaml and a working result

Here is the Page.xaml that I ended up with following the discussion above. After that is the Silverlight result for the page.


<UserControl x:Class="YouHadMeFromWPFE_003.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="500" Height="400">
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical"
Width="100"
Background="Red"
>
<TextBlock Text="Control"
Margin="10,5,5,5"
Foreground="White"/>
</StackPanel>
<StackPanel Orientation="Vertical">
<Border Height="100"
Width="400"
Background="Green" >
<TextBlock Text="Display"
Foreground="White"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<Border Height="300"
Background="Blue"
Width="400">
<TextBlock Text="Tab Control"
Margin="10,5,5,5"
Foreground="White"/>
</Border>
</StackPanel>
</StackPanel>
</UserControl>




Get Microsoft Silverlight


There's only a couple out-of-the-box things that I did with this. The first is the use of Margins. I'll talk a little more about Margins later, but when you use them the way I did in the xaml above, it looks like this: Margin="x,x,x,x" and the 4 numbers follow the border around clockwise from the left. I find it easy to remember that way: Margin="left, top, right, bottom". I didn't need a right and bottom for the instances I used, but put it there for completeness.

Another couple elements used wer the HorizontalAlignment and VerticalAlignment on the TextBlock listing "Display". I wanted that centered in the Border object because that's where we're going to have it when we're using it.


Closing/Resources

If you are reading along and for one reason or another don't have the SDK, here's a link to the CHM file for Silverlight 2.

Feel free to play around with the design and tell me what isn't working for you or what you think I should do differently. Next time I think I'll put in a Slider control since I plan on using them heavily going forward.

Until then,

Stay in the Light!

Copyright © 2006-2017, WynApse