xaml - How to create a common WPF base window style?

Question

Is there any recommended way with WPF to create a common window style to be used across an application? I have several dialogs that appear in my app, and I would like them all to be styled the same (same window border, ok/cancel button position, etc) and simply have different 'content' in each, depending on the situation. So, one dialog might have a list box in it, one might have a textbox, and so on.

I understand how to make base .cs usercontrol files, but I can't for the life of me work out a good way to create a single window which can host different content when launched?

Cheers, rJ

Answer 1

One way to do it would be a new custom control, let's call it DialogShell:

namespace Test.Dialogs
{
    public class DialogShell : Window
    {
        static DialogShell()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(DialogShell), new FrameworkPropertyMetadata(typeof(DialogShell)));
        }
    }
}

This now needs a template which would normally be defined in Themes/Generic.xaml, there you can create the default structure and bind the Content:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Test.Dialogs">
    <Style TargetType="{x:Type local:DialogShell}" BasedOn="{StaticResource {x:Type Window}}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:DialogShell}">
                    <Grid Background="{TemplateBinding Background}">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <!-- This ContentPresenter automatically binds to the Content of the Window -->
                        <ContentPresenter />
                        <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="5" HorizontalAlignment="Right">
                            <Button Width="100" Content="OK" IsDefault="True" />
                            <Button Width="100" Content="Cancel" IsCancel="True" />
                        </StackPanel>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

This is just an example, you probably want to hook up those buttons with custom events and properties you need to define in the cs-file.

This shell then can be used like this:

<diag:DialogShell x:Class="Test.Dialogs.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:diag="clr-namespace:Test.Dialogs"
        Title="Window1" Height="300" Width="300">
    <Grid>
        <TextBlock Text="Lorem Ipsum" />
    </Grid>
</diag:DialogShell>

namespace Test.Dialogs
{
    public partial class Window1 : DialogShell
    {
        public Window1()
        {
            InitializeComponent();
        }
    }
}

---

Event wiring example (not sure if this is the "correct" approach though)

<Button Name="PART_OKButton" Width="100" Content="OK" IsDefault="True" />
<Button Name="PART_CancelButton" Width="100" Content="Cancel" IsCancel="True" />

namespace Test.Dialogs
{
    [TemplatePart(Name = "PART_OKButton", Type = typeof(Button))]
    [TemplatePart(Name = "PART_CancelButton", Type = typeof(Button))]
    public class DialogShell : Window
    {
        //...

        public DialogShell()
        {
            Loaded += (_, __) =>
                {
                    var okButton = (Button)Template.FindName("PART_OKButton", this);
                    var cancelButton = (Button)Template.FindName("PART_CancelButton", this);
                    okButton.Click += (s, e) => DialogResult = true;
                    cancelButton.Click += (s, e) => DialogResult = false;
                };
        }
    }
}