Question

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

我希望将网格放置在画布的中间，这意味着网格顶部和画布顶部之间的距离与网格底部和画布底部之间的距离相同。同样，网格左侧和画布左侧之间的距离应该与网格右侧和画布右侧之间的距离相同。

我该如何做，并确保不同手机上所有类型的屏幕分辨率的布局一致？

到目前为止，我有这个：

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

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

请帮助并指导我＆gt;。＆lt;

Answer 1

您有两个基本选项可以解决此问题，您可以使用具有大量边距的单个网格，因此网格不会触及屏幕边缘。或者你可以在网格中使用网格。当您希望控件具有固定位置时，无论屏幕大小如何，画布都只能用于图形工作。

对于您的情况，我在网格中使用网格。网格将其中的所有内容集中在一起，以便解决您的问题。但既然你说你想在边缘添加额外的信息，我会这样做：

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

将网格放入画布中

2 个答案: