Muti page application with wpf

References:

https://www.mesta-automation.com/create-a-multi-page-application-with-wpf-hmi-like/

Related  github  link is below:

https://github.com/LeoMingGit/WPF_UI_Design/tree/master/HmiExample

Menu.xaml

<UserControl x:Class="HmiExample.Pages.Menu"
             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="43" d:DesignWidth="410">
    <UserControl.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF525252" Offset="0" />
            <GradientStop Color="#FF585858" Offset="1" />
            <GradientStop Color="#FFA0A0A0" Offset="0.279" />
            <GradientStop Color="#FFA0A0A0" Offset="0.674" />
        </LinearGradientBrush>
    </UserControl.Background>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="5"/>
            <RowDefinition Height="35"/>
            <RowDefinition Height="5"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="130"/>
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="130"/>
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="130"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Button Content="Goto Page 1" Grid.Row="1" Grid.Column="1" Click="btnGotoPage1_Click" />
        <Button Content="Goto Page 2"  Grid.Row="1" Grid.Column="3" Click="btnGotoPage2_Click" />
    </Grid>
</UserControl>

Page1

<UserControl x:Class="HmiExample.Pages.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:pages="clr-namespace:HmiExample.Pages"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300" Unloaded="UserControl_Unloaded">
    <UserControl.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF97BEBD" Offset="0" />
            <GradientStop Color="White" Offset="1" />
        </LinearGradientBrush>
    </UserControl.Background>
    <Grid>        
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <pages:Menu Grid.Row="0" Loaded="Menu_Loaded"/>
        <Label Content="Hello i'm page 1" FontSize="25" FontWeight="Bold"  Grid.Row="1" Height="46" HorizontalAlignment="Left" Name="label1" VerticalAlignment="Top" Width="231" />
        <TextBlock Grid.Row="1" Height="24" HorizontalAlignment="Left" Margin="102,69,0,0" Name="txtCount" Text="Count" VerticalAlignment="Top" Width="77" />
        <TextBlock Height="24" HorizontalAlignment="Left" Margin="12,69,0,0" Text="Counter:" VerticalAlignment="Top" Width="77" Grid.Row="1" />
        
    </Grid>  
</UserControl>

Page2:

<UserControl x:Class="HmiExample.Pages.Page2"
             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:pages="clr-namespace:HmiExample.Pages"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300" Unloaded="UserControl_Unloaded">
    <UserControl.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF97A6BE" Offset="0" />
            <GradientStop Color="White" Offset="1" />
        </LinearGradientBrush>
    </UserControl.Background>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <pages:Menu Grid.Row="0"/>
        <Label Content="Hello i'm page 2" FontSize="25" FontWeight="Bold"  Grid.Row="1" Height="42" HorizontalAlignment="Left"  Name="label1" VerticalAlignment="Top" Width="231" />
        <TextBlock Grid.Row="1" Height="24" HorizontalAlignment="Left" Margin="102,69,0,0" Name="txtCount" Text="Count" VerticalAlignment="Top" Width="77" />
        <TextBlock Height="24" HorizontalAlignment="Left" Margin="12,69,0,0" Text="Counter:" VerticalAlignment="Top" Width="77" Grid.Row="1" />        
    </Grid>
</UserControl>

 

Output: