在画布中放置网格答案

【问题标题】：Putting a Grid inside a Canvas在画布中放置网格
【发布时间】：2016-01-31 23:06:35
【问题描述】：

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

我希望将 Grid 定位在 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>

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

请帮助和指导我>.

【问题讨论】：

您为什么要这样做？你想用它来完成什么？
@CKII 想要在网格和画布之间留出一些空间，这样当我触摸网格的边缘时，我就有空间来显示触摸点的左、右、上和下选项.实际上有没有更好的方法来做到这一点？请指教，谢谢:)

标签： xaml windows-runtime windows-phone-8.1

【解决方案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| |
| |     | |
-----------
| |     | |
-----------

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

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

【讨论】：

非常感谢您给我建议，甚至教我更多关于网格和画布的知识。我想我会听从您在网格中使用网格的建议。 :D

【解决方案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>

【讨论】：