How to size a navigation page

Question

Using the Silverlight Navigation Project template, I would like the content my Pages to be horizontally and virtically centered in the navigation frame, and not fill the whole space.

For example, consider this piece of XAML placed Home.xmal view. What this results in is a rounded corner beige background that fills the whole frame with "Some interesting content" properly in the center.

<navigation:Page x:Class="SilverlightApplication3.Home" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
    Title="Home"
    Style="{StaticResource PageStyle}">
    <Grid x:Name="LayoutRoot">
        <Border BorderThickness="5" CornerRadius="20" Background="Beige" Width="Auto" Height="Auto">
            <TextBlock Text="Some interesting content goes here" FontSize="20" 
                       FontFamily="Comic Sans MS" Foreground="Teal" 
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center" Margin="20"/>
        </Border>
    </Grid>
</navigation:Page>

What I was hoping for was that the text would be surrounded by the beige background 20 pixels from the content.

Now if I add to the this LayoutRoot Width="400" Height="100" then I get something that looks close however these numbers being fixed, will not be suitable as the content changes size.

How should I change the XAML of either the Home view or the MainPage frame to achieve the desired layout?

Answer 1

In the mainpage.xaml you can set the navigation frame to have its content centered (the default is stretch).

e.g.

 <navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}" 
                              Source="/Home" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed"
                              HorizontalContentAlignment="Center"
                              VerticalContentAlignment="Center">

This will show any content pages in the middle, whatever size they are. It is best to add min and max size limits to the child pages, to avoid things collapsing too small, but that is a design issue. It they can be larger than the parent frame you will need to add a scroll viewer around the navigation frame.