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: