如何在WPF的框架内制作可调整大小的页面？

Question

I want to make the page inside the frame to adjust it's size automatically whenever I resize the main window. First, I used only stack panels in designing the page, then I put them inside the cells of the grid but it didn't work.

Main window xmal:

<Window x:Class="WpfApplication3.MainWindow"
    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:local="clr-namespace:WpfApplication3"
    mc:Ignorable="d"
    Title="MainWindow" Height="600" Width="1200">
<Grid Name="gridUI">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="69*"/>
        <ColumnDefinition Width="207*"/>
        <ColumnDefinition Width="122*"/>
        <ColumnDefinition Width="85*"/>
        <ColumnDefinition Width="35*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="0.4*"/>
        <RowDefinition Height="0.4*"/>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="2*"/>
    </Grid.RowDefinitions>
    <Label Background="AliceBlue" FontSize="8" HorizontalAlignment="Left" Name="doc" Margin="0,0,0,26.333" Grid.RowSpan="2">Documents</Label>
    <StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="1" Margin="4.667,0.333,121.565,0.333" Grid.ColumnSpan="2">
        <Button Click="NewSample_Click">New Sample</Button>
        <Button Click="CreateReport_Click">Create Report</Button>
    </StackPanel>
    <Button Grid.Row="1" Grid.Column="4" Margin="0,0.333,-0.334,0.333">Settting</Button>
    <StackPanel Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Name="sp_doc" Margin="0,0.333,0.333,-0.333">
        <StackPanel Orientation="Horizontal" >
            <Button x:Name="sss" Click="sampleDropDown">s</Button>
            <Label FontSize="12" Name="sam">Samples</Label>

        </StackPanel>
        <StackPanel Orientation="Vertical" Name="sp_s">

        </StackPanel>
        <StackPanel Orientation="Horizontal" >
            <Button Click="reportDropDown">r</Button>
            <Label>Reports</Label>
        </StackPanel>
        <StackPanel Orientation="Vertical" Name="sp_r">

        </StackPanel>
    </StackPanel>
    <Frame x:Name="newSampleFrame" Grid.ColumnSpan="3" Content="" Grid.Column="1" HorizontalAlignment="center" Grid.Row="2" Grid.RowSpan="2" VerticalAlignment="center" Width="934" Height="456" NavigationUIVisibility="Hidden"/>
</Grid>

Page xmal :

<Page x:Class="WpfApplication3.Page1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  xmlns:local="clr-namespace:WpfApplication3"
  mc:Ignorable="d" 
  d:DesignHeight="456" d:DesignWidth="934"
  Title="Page1">

<Grid>
    <Grid.RowDefinitions>

        <RowDefinition Height="auto" />
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="5*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!--<Border BorderBrush="Black" BorderThickness="0.5" Margin="5">-->

    <StackPanel Margin="60" Grid.Row="0" Grid.Column="0" >
        <StackPanel Orientation="horizontal" Margin="5">
            <Label Margin="0,0,100,0">Length</Label>
            <TextBox Width ="200"></TextBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="5">
            <Label Margin="0,0,105,0">Width</Label>
          <TextBox Width="200"></TextBox>    
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="5">
            <Label Margin="0,0,99,0">Weight</Label>
            <TextBox Width="200"></TextBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="5">
            <Label Margin="0,0,116,0">Age</Label>
            <TextBox Width="200"></TextBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="5">
            <Label Margin="0,0,71,0">Casting Date</Label>
            <TextBox Width="200"></TextBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="5">
            <Label Margin="0,0,73,0">Testing Date</Label>
            <TextBox Width="200"></TextBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="5">
            <Label Margin="0,0,21,0">Concrete Temperature</Label>
            <TextBox Width="200"></TextBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="5">
            <Label Margin ="0,0,91,0">Field No.</Label>
            <TextBox Width="200"></TextBox>
        </StackPanel>
        </StackPanel>
    <StackPanel  Height="30"   Width="120" Grid.Row="1" Grid.Column="1"  Orientation="Horizontal" Margin="5">
            <Button Width="50" Margin="0,0,10,0">Save</Button>
            <Button Width="50">Cancel</Button>
        </StackPanel>

    <!--</Border>-->
</Grid>

Answer 1

For page "WpfApplication3.Page1" remove the

d:DesignHeight="456" d:DesignWidth="934"

and add Height="Auto" and Width="Auto". This will work

Answer 2

You could use a DockPanel as the outer contianer with LastChildFill set to full.

<DockPanel LastChildFill="True">

    <Button Content="LastChildFill=True"/>
</DockPanel>

You would replace Button with the control that you want to fill the panel. An added bonus is that you can set other controls to dock on the other sides

<DockPanel LastChildFill="True">
    <Button Content="Dock=Top" DockPanel.Dock="Top"/>
    <Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
    <Button Content="Dock=Left"/>
    <Button Content="Dock=Right" DockPanel.Dock="Right"/>
    <Button Content="LastChildFill=True"/>
</DockPanel>

I got those examples from here and there's more info: http://www.wpftutorial.net/DockPanel.html