CODEWITHSUNDEEP
xamlwindows-runtimewindows-phone-8.1
pomeloyou
pomeloyou

Reputation: 157

Putting a Grid inside a Canvas

I am creating an application for Windows Phone 8.1 (non-SilverLight). I want to put a grid class in a canvas class with XAML like below:

enter image description here

I wish to position the Grid in the middle of the Canvas that means that distance between the top of the grid and the top of the canvas is the same as that between the bottom of the grid and the bottom of the canvas. Similarly, the distance between the left of the grid and the left of the canvas should be the same as that between the right of the grid and the right of the canvas.

How do I do that and ensure that the layout is consistent on all types of screen resolution on different phones?

So far, I have this:

<Canvas Grid.Row="1" Grid.Column="1">
        <Grid Width="300" Height="200" Canvas.Left="40" Canvas.Top="40">

            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>



            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions >
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>


            </Grid.ColumnDefinitions>
       </Grid>
</Canvas>

It is not what I wanted when I deploy to my phone and I know fixing the problem by adjusting the height and width manually is not a good solution. I am a new in this area and sorry if I used the wrong terminologies.

Please help and guide me >.<

Upvotes: 3

Views: 3252

Answers (2)

Null Pointer
Null Pointer

Reputation: 9309

I don't know why you are using a canvas to position your content grid. You can achieve the layout using the below code if canvas is not mandatory.

<Grid Grid.Row="1" Grid.Column="1">
        <Grid Width="300" Height="200" HorizontalAllignment="Center" VerticalAllignment="Center">

            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>



            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions >
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>


            </Grid.ColumnDefinitions>
       </Grid>
</Grid>

Upvotes: 0

CKII
CKII

Reputation: 1486

You have two basic options to solve this, you can either use a single grid with a lot of margins, so the grid would not touch the edge of the screen. Or you can use a grid within a gird. A canvas should only be used for graphics work, when you want the controls to have a fixed position no matter the screen size.

For your case, I'd use a grid within a grid. A grid centers everything within it, so that solves your problem. But since you said you wanted to add extra info in the margins, I'd do something like this:

<Grid x:Name="Outer>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid x:Name="Inner" Grid.Column="1" Grid.Row="1"/>
</Grid>

That would give you a structure something like this:

Outer
-----------
| |     | |
-----------
| |     | |
| |inner| |
| |     | |
-----------
| |     | |
-----------

And a place to add more controls in the outer grid.

Note that a grid is a relatively expensive control, so try to avoid placing it when you can you another control, but that shouldn't deter you when it is useful.

Upvotes: 1

Related Questions