C# 如何在视图中放置栅格

我想得到一些关于在页面视图上放置网格的建议。这是一个示例相机应用程序，模拟了。我在主页上添加了一些修改，在主页底部有一个自定义appbar实现，它是不透明的，位于占据整个屏幕的

VideoCanvas

上。我想添加一个按钮来打开或关闭网格，以便更好地排列新的相机快照，但我不确定如何进行此操作。如果我创建一个用户控件并覆盖网格，或者在主页上这样做，我如何最好地将其排列成在所有手机屏幕大小上都是一致的，如果有任何其他想法，我将不胜感激

主页

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

...

您可以将其绘制出来，并使用

可见性

切换将其放置在视图上，如果您想使用

StrokeDashArray

等工具获得一条虚线。您也可以只绘制

网格

并启用

ShowGridLines=“True”

，但这将为您提供蓝色/黄色虚线轮廓，除非您深入其中并执行类似操作

举个简单的例子

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

---

希望这有帮助。

“为了更好地排列新的相机快照”，您希望网格在UI方面排列成什么样？网格是在哪里放置的？我想一个简单的3x3网格，两条横线和垂直线来创建它，这样中间矩形就在屏幕的中间。因为我有一个应用程序栏，所以我必须使网格不超过页面底部72像素（纵向），所以我想使网格位于应用程序栏上方（因为它是不透明的）。好的，您唯一需要担心的是应用程序条在纵向模式下的高度和横向模式下的宽度，固定为72像素。您需要将3x3网格的边距绑定到ViewModel上的属性，并在页面

OrientationChanged

上更改该值。Chriss W.展示了布局应该如何。您可以放置包含画布的网格和您提到的作为另一个外部网格的子网格的3x3网格。这样，它应该在所有屏幕分辨率上跨越整个屏幕，因为外部屏幕尺寸不是固定的。