如何在视图中放置网格答案

【问题标题】：How to Place a Grid in the View如何在视图中放置网格
【发布时间】：2014-01-20 12:36:09
【问题描述】：

我想获得一些关于在页面视图上放置网格的建议/建议。这是一个示例相机应用程序，以 http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh202956(v=vs.105).aspx 为模型。我在 MainPage 中添加了一些修改，底部有一个自定义 appbar 实现，它是不透明的，位于占据整个屏幕的 VideoCanvas 上方。我想添加一个按钮来打开或关闭网格以更好地排列新的相机镜头，但我不知道该怎么做。我应该创建一个用户控件并覆盖网格还是在 MainPage 中执行此操作，如何才能最好地将其排列为在所有手机屏幕尺寸上保持一致，并且任何其他想法将不胜感激。

主页

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/> 
            <RowDefinition Height="140"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>

            <ColumnDefinition Width=".5*"/>
            <ColumnDefinition Width=".5*"/>
            <ColumnDefinition Width=".4*"/>
        </Grid.ColumnDefinitions>

        <Canvas x:Name="VideoCanvas" Grid.RowSpan="2" Grid.ColumnSpan="3">
            <Canvas.Background>
                <VideoBrush x:Name="videoBrush"/>
            </Canvas.Background>
        </Canvas>

        ...

    </Grid>

【问题讨论】：

"为了更好地排列新的相机镜头" 您希望网格在 UI 方面与什么排列？网格将放置在哪里？
我只是想一个简单的 3x3 网格，两条水平线和垂直线来创建它，这样中间的矩形就在屏幕的中间。因为我有一个应用栏，所以我必须使它的网格不超过页面底部的 72 像素（纵向），所以我想使它的网格放置在应用栏上方（因为它是不透明的）。
好吧，您唯一需要担心的是 ApplicationBar 的纵向高度和横向模式的宽度固定为 72 像素。您需要将 3x3 Grid 的 Margin 绑定到 ViewModel 上的一个属性，并在页面OrientationChanged 上更改该值。 Chriss W. 展示了布局应该如何。您将放置包含 Canvas 的网格和您提到的另一个外部网格的子级的 3x3 网格。这样它应该在所有屏幕分辨率下跨越整个屏幕，因为外部屏幕尺寸不固定。

标签： c# xaml windows-phone-7 windows-phone-8 camera

【解决方案1】：

你可以把它画出来，然后用Visibility切换把它放在视图上，如果你想用StrokeDashArray之类的东西得到一个有点花哨的地方，就得到一条虚线。你也可以只画你的Grid并启用ShowGridLines="True"，但这会给你蓝色/黄色虚线轮廓，除非你深入研究它做类似this的事情。

举个简单的例子；

<Grid>
<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/> 
            <RowDefinition Height="140"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>

            <ColumnDefinition Width=".5*"/>
            <ColumnDefinition Width=".5*"/>
            <ColumnDefinition Width=".4*"/>
        </Grid.ColumnDefinitions>

            <Canvas x:Name="VideoCanvas" Grid.RowSpan="2" Grid.ColumnSpan="3">
                <Canvas.Background>
                    <VideoBrush x:Name="videoBrush"/>
                </Canvas.Background>
            </Canvas>

        </Grid>

<!-- Lay it over the existing stuff -->

<Grid Visibility="Visible">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="1"/>
                <RowDefinition/>
                <RowDefinition Height="1"/>
                <RowDefinition/>
                <RowDefinition Height="1"/>
                <RowDefinition/>
                <RowDefinition Height="1"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="1"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="1"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="1"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="1"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.Resources>
                <Style TargetType="Rectangle">
                    <Setter Property="Stroke" Value="Gray"/>
                    <Setter Property="StrokeThickness" Value="1"/>
                    <Setter Property="Opacity" Value=".5"/>
                </Style>
            </Grid.Resources>

            <Rectangle Grid.Column="1" Grid.RowSpan="9"/>
            <Rectangle Grid.Column="3" Grid.RowSpan="9"/>
            <Rectangle Grid.Column="5" Grid.RowSpan="9"/>
            <Rectangle Grid.Column="7" Grid.RowSpan="9"/>
            <Rectangle Grid.Row="1" Grid.ColumnSpan="9"/>
            <Rectangle Grid.Row="3" Grid.ColumnSpan="9"/>
            <Rectangle Grid.Row="5" Grid.ColumnSpan="9"/>
            <Rectangle Grid.Row="7" Grid.ColumnSpan="9"/>

        </Grid>


    </Grid>

希望这会有所帮助。

【讨论】：