根据网格布局的椭圆位置

我在wp8.1应用程序(XAML/C#)中遇到了一些元素的定位问题。我已经读过了,为了创建灵活的布局,我应该使用网格控件。 好吧,这是页面元素中的XAML:

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

在XAML设计器中,我实际上看到了我想要的东西,如下所示:

下面是我的诺基亚Lumia 925的外观:

正如你所看到的,椭圆被切割了,我真的想不出如何将其放置在应有的位置,并实际出现在设计器视图中。 也许有人能帮我?

提前感谢!