CODEWITHSUNDEEP
c#xamlresponsive-designwindows-phone-8.1ellipse
Hubert Solecki
Hubert Solecki

Reputation: 2761

Ellipse position according to grid layout

I'm facing some elements' positioning problem in my wp 8.1 app (XAML/C#). I've read that to create a flexible layout, I should use the grid control. Well, here is my XAML within the page element:

<Grid  Style="{StaticResource LayoutGridCreateProfilStyle}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Rectangle Grid.Row="0" Height="60" Fill="#F3A8E4F9" ></Rectangle>
    <Rectangle Grid.Row="1" Height="40" Fill="Gray"></Rectangle>
    <ListBox Grid.Row="2" Height="420" Background="Transparent"/>
    <Canvas Grid.Row="3">
        <Ellipse Height="100" Margin="0,0,0,0" Width="100" Fill="Black" Canvas.Left="152" Canvas.Top="10"></Ellipse>
    </Canvas>

</Grid>

In the XAML designer, I'm actually seeing what I want and it looks like below:

Designer Picture

And here is how it looks like on my Nokia Lumia 925:

Lumia 925 Picture

As you can see, the ellipse is cut and I really cannot figure out how to place it as it should be and actually appears in the designer view. Maybe somebody could help me with that ?

Thanks in advance !

Upvotes: 1

Views: 824

Answers (1)

Phil Wright
Phil Wright

Reputation: 22906

The problem is that you are running out of height to show all the elements of your grid. The first three rows take up an accumulated height of 540 pixels. If the run time height available if 640 then you only have 100 left over for the last row of your grid.

But your Ellipse is offset 10 pixels from the top of the Canvas and so it needs a total of 110 (10 offset + 100 pixel ellipse height) in order to show fully. If your last row has less than 110 pixels of space then it will be truncated, as indeed it seems to be.

Upvotes: 2

Related Questions