Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

WP7 Silverlight Layout Controls: Canvas Element

DZone's Guide to

WP7 Silverlight Layout Controls: Canvas Element

· Mobile Zone
Free Resource

Launching an app doesn’t need to be daunting. Whether you’re just getting started or need a refresher on mobile app testing best practices, this guide is your resource! Brought to you in partnership with Perfecto

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:

layout1

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

<Canvas Height="100"
        HorizontalAlignment="Left"
        Margin="108,86,0,0"
        Name="canvas1"
        VerticalAlignment="Top"
        Width="200" />

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

layout2

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

<Canvas Height="100"
        HorizontalAlignment="Right"
        Margin="0,0,148,421"
        Name="canvas1"
        VerticalAlignment="Bottom"
        Width="200" />

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:

layout3

Anyway, replacing all Margins with “0” positions my canvas control in the middle:

layout4

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:

layout5

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

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid Height="302"
          HorizontalAlignment="Left"
          Margin="67,156,0,0"
          Name="grid1"
          VerticalAlignment="Top"
          Width="314" />

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:

<Grid.RowDefinitions>
    <RowDefinition Height="80" />
    <RowDefinition Height="80*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="100*" />
    <ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>

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:

layout6

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:

layout7

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

<Button Width="100"
        Height="100"
        Content="Hi"
        Grid.Row="1"
        Grid.Column="0" />

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”.

layout8

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:

<StackPanel Height="168"
            HorizontalAlignment="Left"
            Margin="39,46,0,0"
            Name="stackPanel1"
            VerticalAlignment="Top"
            Width="378">
    <TextBlock Text="FirstOne" />
    <TextBlock Text="SecondOne" />
    <TextBlock Text="ThirdOne" />
    <TextBlock Text="FourthOne" />
 
</StackPanel>

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

b

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:

<TextBlock Canvas.Left="26"
           Canvas.Top="23"
           Height="30"
           Name="textBlock1"
           Text="TextBlock" />
<TextBlock Height="30"
           Name="textBlock2"
           Text="TextBlock"
           Canvas.Left="170"
           Canvas.Top="171" />

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.

Cd

 

To be continued…



Source:  http://andreahaubner.blog.com/2011/02/21/layout-controls-in-silverlight/

Keep up with the latest DevTest Jargon with the latest Mobile DevTest Dictionary. Brought to you in partnership with Perfecto.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}