Question

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

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

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

希望这有帮助。

如何在视图中放置网格

1 个答案: