How to Place a Grid in the View

Question

I'd like to get some advice/recommendations on placing a grid over a page's view. This is for a sample camera app, modeling off of http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh202956(v=vs.105).aspx . I have added a few modifications to the MainPage where I have a custom appbar implementation at the bottom, which is opaque and is over the VideoCanvas which takes up the entire screen. I'd like to add a button to toggle a grid on or off to better line up a new camera shot, but I'm not sure how to go about this. Should I create a user control and overlay the grid or do this in the MainPage, how best can I line this up to be uniform on all phone screen sizes, and any other thoughts would be greatly appreciated.

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

You could just draw it out and lay it over the view with a Visibility toggle, and if you wanted to get a little fancy place with things like StrokeDashArray etc to get a dotted line. You could also just draw your Grid and enable ShowGridLines="True" but that will give you blue/yellow dashed outlines unless you dig into it do something like this.

As a quick example;

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

Hope this helps.