How to create a base page that includes a common header for all pages extending that?

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".

Hi @Amine, Thanks for your reply. I tried like [this](http://stackoverflow.com/a/40868/651210). But that cannot fulfill my requirement. — pgollangi, May 03 '16 at 13:40
What you want to do is not complicated. But we are not here to do the work in your place. Make efforts, share your code and we will help you. — Amine, May 03 '16 at 13:47

score 2 · Answer 1 · answered May 03 '16 at 14:28

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>

Hi @Amine thanks for your quick reply. This will solve one of my problems. Let's say if have to create BaseFormPage which can be extended by any entity create form that requires some common actions like create, cancel etc., at the bottom of form page. How can i do this? — pgollangi, May 03 '16 at 15:06

How to create a base page that includes a common header for all pages extending that?

1 Answers1