Frame to Page Navigation - wpf

Question

am trying to goto a page from main window by using I have put 4 rectangle around window for framing of main window .
But when I Navigate to page my bottom rectangle is getting shifted(as shown in picture. Its completely ok in main window.
my .xaml file for mainWindow is
<Window x:Class="Demo1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF Demo" Height="652" Width="924" WindowStyle="None" ShowInTaskbar="True" WindowStartupLocation="CenterScreen" Loaded="Window_Loaded"
>
<Border BorderBrush="Gray" BorderThickness="2" CornerRadius="15">
<DockPanel Width="899">
<Frame x:Name="_mainFrame" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Border BorderBrush="Black" Background="LightBlue" CornerRadius="13" BorderThickness="1" Height="462" HorizontalAlignment="Left" Name="border1" VerticalAlignment="Top" Width="732" Margin="90,80,15,15">
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="10" ShadowDepth="10" Direction="330" Opacity="0.6"></DropShadowEffect>
</Border.Effect>
<DockPanel AllowDrop="True" HorizontalAlignment="Stretch" MinWidth="700" MinHeight="400" Background="LightBlue" Height="440" Width="700">
<!--change here-->
<Button Content="Button" Height="40" Name="button1" Width="89" Click="button1_Click" />
</DockPanel>
</Border>
<!--Bottom polygon-->
<DockPanel Height="74" Width="888" Margin="-846,520,10,-10">
<Polygon Name="polygon11" Points="0,60,80,0,810,0,875,60" Fill="LightCyan" Height="58" Width="890" Canvas.Left="-9" Canvas.Top="12" />
</DockPanel>
<!--left side polygon-->
<Canvas Height="557" Name="canvas5" Width="72" Margin="-1030,0,700,0" >
<Polygon Points="0,-10,60,45,60,500,0,545" Fill="LightCyan" Height="582" Width="67" Canvas.Top="1" Canvas.Left="18" />
</Canvas>
<!--Top polygon-->
<Canvas Height="55" Name="canvas7" Width="857" Margin="-890,-555,0,0" >
<Polygon Points="0,0,65,55,800,55,849,0" Fill="LightCyan" Height="59" Width="870" Canvas.Top="13" Canvas.Left="8" />
</Canvas>
<!--Right side polygon-->
<Canvas Height="545" Name="canvas6" Width="72" Margin="-80,40,0,80">
<Polygon Points="0,60,55,0,55,565,0,515" Fill="LightCyan" Height="583" Width="60" Canvas.Top="-14" Canvas.Left="12" />
</Canvas>
</DockPanel>
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="15" ShadowDepth="15" Direction="330" Opacity="0.5"></DropShadowEffect>
</Border.Effect>
</Border>
xaml.cs file is
private void button1_Click(object sender, RoutedEventArgs e)
{
_mainFrame.Navigate(new message_box.Page1());
}
Page1 has this code
<Page x:Class="message_box.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"
mc:Ignorable="d"
d:DesignHeight="652" d:DesignWidth="924"
Title="Page1">
<Border BorderBrush="Gray" BorderThickness="2" CornerRadius="15">
<DockPanel Width="899">
<Frame x:Name="_mainFrame" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Border BorderBrush="Black" Background="LightBlue" CornerRadius="13" BorderThickness="1" Height="462" HorizontalAlignment="Left" Name="border1" VerticalAlignment="Top" Width="732" Margin="90,80,15,15">
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="10" ShadowDepth="10" Direction="330" Opacity="0.6"></DropShadowEffect>
</Border.Effect>
<DockPanel AllowDrop="True" HorizontalAlignment="Stretch" MinWidth="700" MinHeight="400" Background="LightBlue" Height="440" Width="700">
</DockPanel>
</Border>
</DockPanel>
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="15" ShadowDepth="15" Direction="330" Opacity="0.5"></DropShadowEffect>
</Border.Effect>
</Border>
</Page>

Answer 1

You should place your items in a Grid instead. I updated what you should try, but you will have to update your polygons
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Frame Grid.Column="1" Grid.Row="1"/>
<Grid Grid.ColumnSpan="3" Grid.Row="3">
<Polygon Points="0,60,80,0,810,0,875,60" Fill="LightCyan"/>
</Grid>
<Grid Grid.Column="0" Grid.RowSpan="3">
<Polygon Points="0,-10,60,45,60,500,0,545" Fill="LightCyan" />
</Grid>
<Canvas Grid.ColumnSpan="3" Grid.Row="0">
<Polygon Points="0,0,65,55,800,55,849,0" Fill="LightCyan" />
</Canvas>
<Canvas Grid.Column="2" Grid.RowSpan="3">
<Polygon Points="0,60,55,0,55,565,0,515" Fill="LightCyan"/>
</Canvas>
</Grid>