如何在 WPF 中自定义个性化的窗口标题栏

前言

在WPF应用程序开发中，原生的 Windows 标题栏往往无法满足 UI 设计需求。

例如：需要自定义样式、添加品牌元素、隐藏默认按钮等。WPF 提供了强大的自定义窗口样式能力，通过 WindowChrome 和 ControlTemplate，我们可以完全掌控窗口的外观和行为。

本文将详细介绍如何在 WPF 中实现一个自定义标题栏，并解决常见的交互问题（如拖动失效、最大化溢出）。

实现步骤

1、设置 WindowChrome 属性

首先，在 XAML 中设置 WindowChrome，用于控制窗口的非客户区行为：

<WindowChrome.WindowChrome>
    <WindowChrome 
        CaptionHeight="100" 
        UseAeroCaptionButtons="False" 
        GlassFrameThickness="0" />
</WindowChrome.WindowChrome>

CaptionHeight：指定自定义标题栏的高度。

UseAeroCaptionButtons：是否使用系统默认的标题栏按钮。

GlassFrameThickness：禁用玻璃边框效果，设置为 0。

⚠️ 注意：若 CaptionHeight 设置过小，可能导致鼠标点击标题栏时无法拖动窗口。

2、定义窗体模板（ControlTemplate）

接下来，我们需要重写 Window.Template，使用 ControlTemplate 来开发自定义布局，并使用 ContentPresenter 占位显示主内容区域。

<Window.Template>
    <ControlTemplate TargetType="{x:Type Window}">
        <AdornerDecorator>
            <Grid x:Name="grid">
                <Grid.RowDefinitions>
                    <RowDefinition Height="100" /> <!-- 标题栏 -->
                    <RowDefinition Height="*" />   <!-- 主内容 -->
                </Grid.RowDefinitions>

                <!-- 自定义标题栏 -->
                <Grid Grid.Row="0">
                    <StackPanel
                        HorizontalAlignment="Right"
                        Orientation="Horizontal"
                        WindowChrome.IsHitTestVisibleInChrome="True">
                        <Button
                            Command="{x:Static SystemCommands.MinimizeWindowCommand}"
                            Content="最小化" />
                        <Button
                            Command="{x:Static SystemCommands.RestoreWindowCommand}"
                            Content="最大化" />
                        <Button
                            Command="{x:Static SystemCommands.CloseWindowCommand}"
                            Content="关闭" />
                    </StackPanel>
                </Grid>

                <!-- 主内容区域 -->
                <ContentPresenter Grid.Row="1" />
            </Grid>
        </AdornerDecorator>

        <!-- 窗口最大化触发器 -->
        <ControlTemplate.Triggers>
            <Trigger Property="WindowState" Value="Maximized">
                <Setter TargetName="grid" Property="Margin" Value="8" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Template>

关键点说明

WindowChrome.IsHitTestVisibleInChrome="True"：允许标题栏中的控件响应用户交互。

SystemCommands.MinimizeWindowCommand/RestoreWindowCommand/CloseWindowCommand：绑定系统预定义命令，确保按钮具备原生功能。

ContentPresenter：用于占位显示窗口的主内容。

Trigger触发器：当窗口最大化时，添加 Margin 避免内容贴边。

3、解决最大化边界溢出问题

在窗口最大化状态下，由于系统默认边距被移除，可能会导致内容超出屏幕可视区域。

解决方法

可以通过代码动态计算最大化的 Margin 值，或者在 XAML 中使用硬编码方式处理：

<Trigger Property="WindowState" Value="Maximized">
    <Setter TargetName="grid" Property="Margin" Value="8" />
</Trigger>

更精确的做法是根据当前屏幕信息进行计算：

double leftMargin = (SystemParameters.MaximizedPrimaryScreenWidth - SystemParameters.WorkArea.Width) / 2;
double topMargin = (SystemParameters.MaximizedPrimaryScreenHeight - SystemParameters.WorkArea.Height) / 2;

将该值作为 Margin 应用于容器即可。

效果图

总结

通过 WindowChrome 和 ControlTemplate 的结合使用，我们可以在 WPF 中实现高度定制化的窗口标题栏，满足复杂的 UI 设计需求。关键点包括：

• 正确设置 CaptionHeight 以保证拖动功能正常；

• 使用 WindowChrome.IsHitTestVisibleInChrome="True" 启用标题栏内的交互控件；

• 利用 ControlTemplate 构建完整的界面结构；

• 处理最大化状态下的边界溢出问题。

如果大家希望开发一套统一风格的应用界面，或实现无边框、全屏、透明窗口等效果，自定义标题栏是一个非常值得掌握的技术点。

关键词：WPF、自定义标题栏、WindowChrome、ControlTemplate、UI设计、最大化适配、C#、.NET、样式美化

最后

如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。

也可以加入微信公众号 [DotNet技术匠] 社区，与其他热爱技术的同行一起交流心得，共同成长！

优秀是一种习惯，欢迎大家留言学习！

作者：逸羽澜心

出处：cnblogs.com/fengxinyuan/p/16587705.html

声明：网络内容，仅供学习，尊重版权，侵权速删，歉意致谢！