Custom Title bar in all windows of WPF app

Question

I have custom title bar for all windows of my application. I want to create a template that I can use many times on different windows or on Message Box I am thinking what is the best practice to achieve this.

At the moment I have a title bar but it is hard coded in every window.

This is an example of one of the windows

<Window x:Class="MyApp.Configuration.Windows.NotMainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Title="Some text" 
        Height="113.868" Width="405.84" 
        Background="#FFE5E5E5"
        WindowStyle="None"
        >
    <WindowChrome.WindowChrome>
        <WindowChrome CaptionHeight="34" />
    </WindowChrome.WindowChrome>

    <Window.Resources>
        <ResourceDictionary Source="pack://application:,,,/somefolder.somefolder;component/Resources/TitleBarIconsStyle.xaml" />
    </Window.Resources>
    <Border x:Name="MainWindowBorder"  BorderThickness="0" >
        <Grid x:Name="parentContainer">

            <Grid.RowDefinitions>
                <RowDefinition Height ="Auto"/>
                <RowDefinition Height ="*"/>
            </Grid.RowDefinitions>

            <!--Window chrome-->
            <Grid Grid.Row="0" Height="30" Background="#585856">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
                    <!--App icon-->
                    <Image Source="/Resources/icon.png" Width="18" Margin="2" HorizontalAlignment="Left" VerticalAlignment="Center" />
                    <TextBlock FontFamily="Arial" Margin="4 3 0 0" Text="Some text"/>
                </StackPanel>

                <!--Caption buttons-->
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
                    <Button Style="{StaticResource MinimizeButtonStyle}" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Minimize"
                             Click="CommandBinding_Executed_Minimize"/>
                    <Button x:Name="RestoreButton" Visibility="Collapsed" Style="{StaticResource RestoreButtonStyle}" 
                            Click="CommandBinding_Executed_Restore" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Restore"/>
                    <Button x:Name="MaximizeButton" Visibility="Visible" Style="{StaticResource MaximizeButtonStyle}" 
                            Click="CommandBinding_Executed_Maximize" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Maximize" />
                    <Button x:Name="CloseButton" Style="{StaticResource CloseButtonStyle}" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
                            Click="CommandBinding_Executed_Close"/>
                </StackPanel>
            </Grid>
            <Grid Grid.Row="1">
                <TextBox x:Name="Input"/>
                <Button x:Name="OkButton" 
                Content="Ok"/>

            </Grid>
        </Grid>
    </Border>
</Window>

You might be able to extract it to a `Style`. For more detailed answers, we would need to see your implementation. — Klaus Gütter, Dec 05 '22 at 07:31
Depends on the details you require. Write, please, in more detail how exactly you are going to set the value and then adjust the title based on it. — EldHasp, Dec 05 '22 at 07:36
Have a look here on how to define a ControlTemplate for `Window`: https://stackoverflow.com/questions/420538/how-to-make-a-template-window-in-wpf — Klaus Gütter, Dec 05 '22 at 11:23

score 0 · Answer 1 · answered Dec 05 '22 at 07:46

Based on this MSDN document , you can not customize (like change colors and add your icons) windows title bar in WPF App.

the solution is create your custom title bar style and set WindowStyle="None" in <Window/> tag.

There one custom title bar in my WPF app :

<Grid FlowDirection="RightToLeft">
        <Grid.RowDefinitions>
            <RowDefinition Height="25*"/>
        </Grid.RowDefinitions>
        
        <StackPanel Margin="0 0 5 0" Orientation="Horizontal" Background="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" Grid.Row="0" Grid.Column="6" Grid.ColumnSpan="2" FlowDirection="LeftToRight">
            <Button x:Name="btnCloseApp" IsEnabled="True" Margin="0 0 4 0" ToolTip="Exit" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Height="25" Width="25" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="DodgerBlue" Click="btnCloseApp_Click">
                <materialDesign:PackIcon Kind="Shutdown" Height="20" Width="20"/>
            </Button>
            <Button x:Name="btnMinimizeApp" IsEnabled="True" ToolTip="Minimize" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Height="25" Width="25" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="DodgerBlue" Click="btnMiniApp_Click">
                <materialDesign:PackIcon Kind="WindowMinimize" Height="20" Width="20"/>
            </Button>
        </StackPanel>
</Grid>

and in picture :

Again don't forget to set WindowStyle="None"

this is how I did it but I want to create a template that I can use many times on different windows — Hub, Dec 05 '22 at 08:39

Custom Title bar in all windows of WPF app

1 Answers1