How to make a Template Window in WPF?

Question

So i am building an application that will have lots of windows, all with the same basic layout:

1. A main Window
2. A logo in the top corner
3. A title block
4. A status displayer down the bottom
5. An area for window specific controls.

At the moment i have to recreate this structure in every window. Ideally i want this layout to be coded in a single place, perhaps into a custom Window subclass for ease of use. Does anyone have any clues for how to get started, or previous experience with similar problems?

Answer 1

why exactly are you using "lots of windows?" Why not just a single window with a tab control? Or a single window with user controls?

Regardless, to answer your question, usercontrols are one way you want to get the functionality that you're describing as wanting.

Create a new Window class, and have it have a "Childrens" property which allows for an object to get embedded into the dock panel where you want the "window specific controls" to go.

As you launch new windows, instantiate the window type, and a user control with the specific controls, add the user control to the Children property of your window, and then show the window. You can even tie up event handlers, DataContexts and what not at this time.

Answer 2

If you're brave enough to take a big architectural shift you could consider CompositeWPF (previously codenamed Prism) from the Patterns & Practices guys at Microsoft.

Of interest to you would be the ability to define "regions" in a shell (i.e. window) and then using views to fill the regions. It uses the Model-View-Presenter pattern to allow independent development of "views" from the model than can be easily be relocated over time as the shell only defines regions and is not coupled directly to what is placed in to it. Principally this helps decouple the shell from the views and the views from each other and make it easier to unit-test ... blah, blah blah.

It is a big jump and something that will slow you down to begin with, although your situation is one of the types of applications that CompositeWPF is meant to address.

As part of CompositeWPF you will need to take on board various patterns that can confuse newcomers, e.g. The UnityContainer, inversion-of-control, MVP (or Model/view/view-model) and dependency injection.

I can remember when I first started with the sample apps being puzzled because it is not obvious how on earth the some of the views were even being created! The unity container will instantiate objects and call parameterised constructors magically.

CompositeWPF is an elegant solution to your question but not a simple or straightforward one. Having used CompositeWPF in my last project I intend to use it again for the next appropriate application.

Answer 3

The most simple approach is to create WPF a "Page" for the window specific controls and place a "Frame" in the main window. You can even create a nice navigation this way.

Answer 4

You can create a new ControlTemplate that targets a window to accomplish this as shown below.

<ControlTemplate x:Key="WindowControlTemplate1" TargetType="{x:Type Window}">
    <Border 
        Background="{TemplateBinding Background}" 
        BorderBrush="{TemplateBinding BorderBrush}" 
        BorderThickness="{TemplateBinding BorderThickness}"
        >
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="0.93*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.21*"/>
                <ColumnDefinition Width="0.79*"/>
            </Grid.ColumnDefinitions>

            <ContentPresenter 
                Grid.ColumnSpan="2" 
                Grid.Row="1" 
                Content="{TemplateBinding Content}" 
                ContentTemplate="{TemplateBinding ContentTemplate}"
                />
            <ResizeGrip 
                HorizontalAlignment="Right" 
                x:Name="WindowResizeGrip" 
                VerticalAlignment="Bottom" 
                IsTabStop="False" 
                Visibility="Collapsed" 
                Grid.Column="1" 
                Grid.Row="2"
                />
            <TextBlock Text="My Logo" />
            <TextBlock Grid.Column="1" Text="My Title"/>
            <StatusBar Height="20" Grid.ColumnSpan="2" Grid.Row="2"/>
        </Grid>
    </Border>

    <ControlTemplate.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="ResizeMode" Value="CanResizeWithGrip"/>
                <Condition Property="WindowState" Value="Normal"/>
            </MultiTrigger.Conditions>
            <Setter Property="Visibility" TargetName="WindowResizeGrip" Value="Visible"/>
        </MultiTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>