WPdev for beginners

There are three Controls used for Layout in Silverlight. Grid, StackPanel and Canvas.

The Canvas Control:

Silverlight provides a Canvas element that can be used to group related content. The Canvas element  can have children nested inside of it. It’s typically used when children need to be positioned at exact x and y coordinates.

 The StackPanel Control:

The StackPanel control is a simple layout panel that arranges content into a single line that can be oriented horizontally or vertically (the default).The StackPanel control allows us to stack objects one on top of the other, or next to each other.

The Grid Control:

The Grid control allows rows and column information to be defined in one location using RowDefinition and ColumnDefinition tags.

To have a better idea about those controls I created a new project and dragged a canvas control to my main form:

If I look to my XAML code I can see that Margin shows me where that canvas control is positioned:

If I move that control, that number changes. What happens when I click on those arrows?

The position is still the same. It’s just interpreted differently:

By clicking on those arrows I’ve changed the HorizontalAlignment and the VerticalAlignment, and also the Margin changed.

Let’s assume I want to center my canvas control right in the middle of the content panel, I would go to the properties window and change both the VerticalAlignment and the HorizontalAlignment to “Stretch”. Next thing I am doing is setting all Margins to “0”. A Margin contains 4 numbers, separated by commas. And they represent the left side, the top, the right side and the bottom:

Replacing all Margins with “0” positions my canvas control in the middle:

Let’s move on and see how that is with a Grid Control. I am deleting that canvas control and drag a Grid Control to my main form:

My XAML code shows me there is a new Grid Control in my ContentPanel:

The intent of the Grid is to add a number of rows and columns and then position my controls in each of those cells that are created by the definition of those rows and columns.

So, let me just define two rows and two columns by adding a little bit of code. First I have to close out a Grid. I am removing the slash right after Width, and add one </ Grid>

Now I can add my code in between there:

I defined two rows, the first 80 pixel tall, the second 80 pixel plus what is left of that area. If I would just put an asterisk in there, it would fill the entire control. And I defined two columns of the size 100 plus and 100 pixel:

If I hover over my Grid Control in my main form I can add more rows and columns by just clicking. If I want to get rid of a row or a column I just select it and drag it away.

Rightclicking the mouse inside my Grid Control gives me more options. Or I can go to the properties window and there select the RowDefinition or the ColumnDefinition. That brings up the Collection Editor, where I can add more rows or columns and set their properties:

Anyway, why would I need to define rows and columns? For example I could want a button in the left down area:

The button control usually does not have a Grid.Row property or a GridColumn property. It only gets those properties when it sits inside a Grid. These properties are called “attached properties”.

The button sits in row 1 and in column 0.

Let’s have a look at the StackPanel control.

The StackPanel is pretty simple. All the controls that are contained within a StackPanel are displayed in a vertical stack.

For now I am dragging a StackPanel Control to my main form. Then I add some textBlocks to it by typing some code:

Notice that, just like before with the Grid control, I closed out </ StackPanel> in order to be able to add my code.

I have four textblocks stacked on each other.

Let’s move on and add a CanvasPage.xaml file to my project. I am dragging a canvas control to the jusr created page. Assume I need to position different controls in very specific places on screen. This is what the Canvas is for. Instead of using Margins to define the position of controls inside of a canvas, using attached properties the controls define the left and top properties relative to the upper left-hand corner of the canvas itself.

I’ve dragged two textblocks into my canvas control. Looking at my XAML code I notice that both textblocks have a “top” property and a “left” property:

If I move the canvas to reposition it, both the “top” properties and the “left” properties of the textblocks inside the canvas remain the same.

To be continued…