将网格放入 Canvas

Question

我正在为 Windows Phone 8.1（非 SilverLight）创建一个应用程序。我想将网格 class 放在 canvas class 中，其中 XAML 如下所示：

我希望将网格定位在 Canvas 的中间，这意味着网格顶部与 canvas 顶部之间的距离与 canvas 底部之间的距离相同canvas 的网格和底部。同理，网格左边到canvas左边的距离应该和网格右边到canvas右边的距离一样。

我如何做到这一点并确保布局在不同 phones 的所有类型的屏幕分辨率上保持一致？

到目前为止，我有这个：

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

当我部署到我的 phone 时，这不是我想要的，我知道通过手动调整高度和宽度来解决问题并不是一个好的解决方案。我是这个领域的新手，如果我使用了错误的术语，我深表歉意。

请帮助和指导我 >.<

Answer 1

你有两个基本的选择来解决这个问题，你可以使用一个有很多边距的网格，这样网格就不会触及屏幕的边缘。或者您可以在网格中使用网格。 canvas 应该只用于图形工作，当您希望控件具有固定位置而不管屏幕大小时。

对于您的情况，我会在网格中使用网格。网格将其中的所有内容居中，这样就可以解决您的问题。但是既然你说你想在页边空白处添加额外的信息，我会做这样的事情：

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

这会给你一个像这样的结构：

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

以及在外部网格中添加更多控件的地方。

请注意，网格是一个相对昂贵的控件，因此当您可以放置另一个控件时尽量避免放置它，但是当它有用时这不应该阻止您。

Answer 2

我不知道您为什么要使用 canvas 来定位您的内容网格。如果 canvas 不是必需的，您可以使用以下代码实现布局。

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

将网格放入 Canvas

Putting a Grid inside a Canvas

xaml

windows-runtime

windows-phone-8.1