如何创建一个包含所有扩展该页面的公共标题的基础页面？

Question

I'm very new to WPF application development.

I'm writing a simple WPF application in which I'll just have one window and pages will change on click buttons provided in UI.

Here how can have base page in which i'll add some header which is common for all pages i'm designing.

Is there anything like by extending that BasePage, all controls will come to this page?

For example, My app title should come in all page which I don't want to add in XAMLs of all pages.

Please let me know if my assumption itself is wrong.

Edited:

My BasePage:

public class BasePage : Page
{        
    public BasePage()
    {
    }
}

XAML of my HomePage:

<local:BasePage x:Class="CCS.ui.HomePage"
  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:My.ui"
  mc:Ignorable="d" 
  d:DesignHeight="300" d:DesignWidth="300"
  Title="HomePage">

<StackPanel>
    <WrapPanel  Name="root"></WrapPanel>
    <Button Name="Home" Content="Home"></Button>
    <Button Name="Home3" Content="Home2"></Button>
</StackPanel>

Here I'm not sure where to write controls of header which should be added to BasePage. Because if BasePage is created from XAML It is showing error like "Cannot use Pages generated from XAML".

Answer 1

There are several ways to do what you want. Here I put a small example: I created a Window with 3 main controls, Menu (for navigation), TextBox (Header) and a Grid (Host) When I click on the menu, I add a UserControl in the HostGrid.

MainWindow.xaml

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Menu>
        <MenuItem Header="Home" x:Name="Home" Click="MenuItem_Click"/>
        <MenuItem Header="Page 1" x:Name="Page1" Click="MenuItem_Click"/>
        <MenuItem Header="Page 2" x:Name="Page2" Click="MenuItem_Click"/>
    </Menu>
    <TextBlock Grid.Row="1" Text=" Header" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" Height="40"/>
    <Grid Grid.Row="2" x:Name="HostGrid"></Grid>
</Grid>

MainWindow.cs

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void MenuItem_Click(object sender, RoutedEventArgs e)
    {
        HostGrid.Children.Clear();
        switch(((MenuItem)e.OriginalSource).Name)
        {
            case "Home":
                HostGrid.Children.Add(new UserControlHome());
                break;
            case "Page1":
                HostGrid.Children.Add(new UserControl1());
                break;
            case "Page2":
                HostGrid.Children.Add(new UserControl2());
                break;
        }
    }
}

UserControlHome.xaml

<Grid Background="Crimson">
    <TextBlock Text="Home" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>

UserControl1.xaml

<Grid Background="Lavender">
    <TextBlock Text="Page 1" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>

UserControl2.xaml

<Grid Background="Ivory">
    <TextBlock Text="Page 2" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>