C# wpf style中实现可定制的自定义标题栏

已于 2022-08-02 20:11:40 修改
阅读量5k 收藏 30
点赞数 4
分类专栏： # wpf 文章标签： wpf c# 开发语言 xaml 标题栏
于 2022-07-13 22:48:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013113678/article/details/125772769
版权

wpf自定义标题栏系列

第一章 自定义标题栏
第二章 添加窗口阴影
第三章 style中定义标题栏
第四章 style使用参数及模板定义标题栏（本章）

文章目录

前言

上一章我们实现了在style中自定义标题栏，解决了复用性的问题。但是在实际使用中，还是存在一些问题的，比如有些界面需要放几个菜单在标题栏或者不需要最大化按钮等，就会变得很不灵活。这时候就需要对style进行进一步拓展了。

一、如何实现

1、定义参数

参考《C# wpf style中使用参数的方法》我们需要定义一些参数用于可定制化修改。可以根据使用场景灵活定义参数，标题栏高度、背景色等。比如定义如下两个参数：

<!--最小化按钮可见性-->
<Visibility x:Key="MinimizeButtonVisibility"  >Visible</Visibility>
<!--最大化按钮可见性-->
<Visibility x:Key="MaximizeButtonVisibility"  >Visible</Visibility>
<!--标题栏模板-->
<ControlTemplate x:Key="WindowStyle_PART_Title" TargetType="ContentControl"/>

2、引用模板

在Wndow的style中的template中再次引用一个模板，模板名称是自定义的参数名，如下是WindowStyle_PART_Title

 <!--标题栏-->
<ContentControl VerticalAlignment="Top"  Template="{DynamicResource WindowStyle_PART_Title}">
  <Grid>
    <!--最小化按钮-->
    <Button Visibility="{DynamicResource MinimizeButtonVisibility}" />
    <!--最大化按钮-->
    <Button Visibility="{DynamicResource MaximizeButtonVisibility}" />
    <!--关闭按钮-->
    <Button />
  </Grid>
</ContentControl>

3、使用ContentPresenter

这里的并非上一章的代表客户区的ContentPresenter。而是代表标题栏的ContentPresenter。在style应用的窗口定义一个key为WindowStyle_PART_Title的模板,在模板中使用ContentPresenter就代表标题栏。

<ControlTemplate x:Key="WindowStyle_PART_Title" TargetType="ContentControl">
        <Grid >
            <!--此处代表style中的标题栏-->
            <ContentPresenter Content="{TemplateBinding Content}"></ContentPresenter>
            <TextBlock   Text="标题名称"  Foreground="#d8d8d8" FontSize="18"  HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
        </Grid>
</ControlTemplate>

4、添加拖动功能

拖动功能参考《C# wpf 附加属性实现任意控件（包括窗口）拖动》，在Window的style中添加：

<Setter Property="local:Move.IsDragMoveable" Value="True" />

5、添加拖动调整大小功能

拖动功能参考《C# wpf 附加属性实现任意控件拖动调整大小》，在Window的style中添加：

<Setter Property="local:Resize.IsResizeable" Value="True" />

二、完整代码

https://download.csdn.net/download/u013113678/86111797

三、使用示例

1、使用方法

（1）、应用style

在Wndow的resources中引用style文件，动态绑定style即可。

<Window  Style="{DynamicResource WindowStyle_Normal_Gray}"  />

（2）、设置参数

在Wndow的resources中参数定义

  <!--标题栏模板-->
  <ControlTemplate x:Key="WindowStyle_PART_Title" TargetType="ContentControl">
     <!--ContentPresenter 代表style中定义的关闭最大最小化按钮-->
     <ContentPresenter Content="{TemplateBinding Content}"></ContentPresenter>
  </ControlTemplate>
  <!--最小化按钮可见性-->
   <Visibility x:Key="MinimizeButtonVisibility"  >Collapsed</Visibility>
  <!--最大化按钮可见性-->
  <Visibility x:Key="MaximizeButtonVisibility"  >Collapsed</Visibility>

2、基础样式

<Window x:Class="WpfApp6.MainWindow"
        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"
        xmlns:local="clr-namespace:WpfApp6"        
        Style="{DynamicResource WindowStyle_Normal_Gray}"  
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="WindowStyles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <!--客户区-->
    <Border   CornerRadius="10"  Background="#1e1e1e">
    </Border>
</Window>

效果预览：
在这里插入图片描述

2.去除最大最小化按钮

<Window x:Class="WpfApp6.UrlWindow"
        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"
           xmlns:local="clr-namespace:WpfApp6"
        mc:Ignorable="d"
        Title="UrlWindow"  Width="500" Height="300"
         Style="{DynamicResource WindowStyle_Normal_Gray}"   
        WindowStartupLocation="CenterOwner"
        >
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/WindowStyles.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <!--最小化按钮可见性-->
            <Visibility x:Key="MinimizeButtonVisibility"  >Collapsed</Visibility>
            <!--最大化按钮可见性-->
            <Visibility x:Key="MaximizeButtonVisibility"  >Collapsed</Visibility>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
    <!--客户区内容略-->
    </Grid>
</Window>

效果预览（客户区内容未在xaml代码中展示）
在这里插入图片描述

3.添加标题按钮

<Window x:Class="WpfApp6.MainWindow"
        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"
        xmlns:local="clr-namespace:WpfApp6"        
        Style="{DynamicResource WindowStyle_Normal_Gray}"  
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="WindowStyles.xaml" />
            </ResourceDictionary.MergedDictionaries>
              <!--标题栏模板-->
            <ControlTemplate x:Key="WindowStyle_PART_Title" TargetType="ContentControl">
                <Border x:Name="bd_caption"  Height="50" Background="#333333"  CornerRadius="10,10,0,0"   >
                    <Grid >
                        <!--ContentPresenter 代表style中定义的关闭最大最小化按钮-->
                        <ContentPresenter Content="{TemplateBinding Content}"></ContentPresenter>
                        <StackPanel  Margin="10,0,0,0" Orientation="Horizontal">
                            <!--LOGO-->
                            <TextBlock  HorizontalAlignment="Left"  VerticalAlignment="Center"  Text="AC" FontWeight="Bold"  Foreground="#d8d8d8"  FontSize="18"   />
                            <!--按钮-->
                            <Button Margin="20,0,0,0"  HorizontalAlignment="Left"  Width="24" Height="24" Cursor="Hand"  Focusable="False"  Click="Button_Click">
                                <Button.Template>
                                    <ControlTemplate TargetType="Button" >
                                        <Image Source="link@1x.png"  Width="24" Height="24" />
                                    </ControlTemplate>
                                </Button.Template>
                            </Button>
                        </StackPanel>
                        <TextBlock   Text="自定义标题栏示例"  Foreground="#d8d8d8" FontSize="18"  HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                    </Grid>
                </Border>
            </ControlTemplate>
        </ResourceDictionary>
    </Window.Resources>
    <!--客户区-->
    <Border   CornerRadius="10"  Background="#1e1e1e">
    </Border>
</Window>

效果预览：
在这里插入图片描述
动态效果
在这里插入图片描述

总结

以上就是今天要讲的内容，本文介绍的是对自定义窗口无边框窗口的细化实现，达到了很好的界面效果以及灵活性同时功能也是完备的，最大化、最小化、关闭、拖动、拖动调整大小都在style实现了。使用的时候只需要灵活调整样式即可。

CodeOfCC
关注
专栏目录
C# wpf 在style中自定义标题栏及无边框窗口
10-31
本资源实现了一种wpf在style中自定义标题栏无边框窗口的方法。style内部的实现其实没那么简单，尤其是实现按钮逻辑以及拖动逻辑，需要在style中关联cs代码，这就要求我们熟悉绑定技巧、附加属性还有ContentPresenter 。但是好处也是明显的，及时具有了通用性，无论是哪个窗体都可以使用。本资源是完整的源码，vs2019的项目可直接运行。原文链接：https://blog.csdn.net/u013113678/article/details/121058798
WPF 自定义标题
myangells的专栏
01-29 661
分两个区域，左侧为标题区，右侧为标题按钮区。
WPF 自定义顶部标题栏的实现方式
最新发布
wynneira的博客
08-16 841
原文中只是写了windows的title，我的话，日常使用过程中还需要个icon在里面，所以多加了个icon上去。感兴趣的朋友可以直接前往他的文章里看一下，讲的很细致，可以照着做一做。我应该是借鉴了很久了，但是一致都没有正经的整理过。，本文主要全是他的思路，哈哈哈。我这里就是简单的做个归纳总结，不讲原理，不讲思路。本文主要是为了贯彻落实拿来就用，能跑就行这两大政策方针，将政策落地。
WPF 使用 WindowChrome，在自定义窗口标题栏的同时最大程度保留原生窗口样式（类似 UWP/Chrome）...
weixin_30293079的博客
07-19 929
WPF 自定义窗口样式有多种方式，不过基本核心实现都是在修改 Win32 窗口样式。然而，Windows 上的应用就应该有 Windows 应用的样子嘛，在保证自定义的同时也能与其他窗口样式保持一致当然能最大程度保证 Windows 操作系统上的体验一致性。 本文将使用 WindowChrome 来自定义窗口样式，使其既保留原生窗口样式和交互习惯，又能够具备一定的自定义空间。...
WPF中自定义窗体标题栏
热门推荐
孙群
10-19 2万+
在WPF中自定义窗体标题栏，首先需要将窗体的WindowStyle属性设置为None，隐藏掉WPF窗体的自带标题栏。然后我们可以在窗体内部自定义一个标题栏，比如标题栏如下: 注意，我们给TitleBar添加了MouseMove事件，后台处理代码: private void TitleBar_MouseMove(object sender, Mouse
WPFUI控件库-自定义标题栏窗口
qq_27474555的博客
05-27 600
将窗体的标题栏改成自定义标题栏。2、自定义控件库UiLib。
WPF 窗口Title的自定义
m0_48915942的博客
10-17 2523
目录一、WindowChrome1. ResizeBorderThickness2. CaptionHeight3. CornerRadius4. GlassFrameThickness5. NonClientFrameEdges6. UseAeroCaptionButtons7. IsHitTestVisibleInChrome二、Adorner、Decorator 和 AdornerDecorator三、自由更改Title的显示，保留放大、缩小和关闭按钮。四、自由更改Title的显示，隐藏放大、缩小和关
C# wpf 自定义标题栏及无边框窗口
codeofcc的博客
10-29 1万+
我们日常开发的时候，经常会遇到需要自定义标题栏的UI设计，采用特定颜色的标题栏或者特定样式的按钮，这个时候就需要自定义标题栏了，wpf中自定义标题栏还是相对容易的。
纯XAML实现WPF窗口标题栏自定义
zrfzrf的博客
04-26 876
再把其命名空间引入: xmlns:b="http://schemas.microsoft.com/xaml/behaviors"同时最大化时标题栏显示区域高度减少h单位，使得与WindowChrome定义的CaptionHeight对齐。由于涉及到减法运算，XAML没有加减功能，用Grid自动布局的特性，设计一个运算器.可在最大化时四周增加h单位Margin，使显示内容不超出屏幕。2、自定义的最小化、最大化、关闭按钮功能如何用XAML实现。1、窗口最大化后，窗口边缘超出屏幕。1、窗口标题栏颜色可定义。
WPF 自定义标题栏
weixin_30740581的博客
04-25 1218
WPF 自定义标题栏 原文:WPF 自定义标题栏在做客户端应用程序时，往往觉得Windows自带的标题栏没有样式，不太好看，下面分享自自定义的一个Windows工具 效果图： <Style x:Key="Buttonclock" TargetType="{x:Type Button}"> &l...
WPF 自定义窗口风格，带TOOLBAR
03-12
WindowStyle="None" ResizeMode="NoResize" 当设置无标题栏，无拖动边框时还可以拉抻窗口大小，并自制标题栏部分。 重构tabControl的header部分，使用togglebutton代替且支持图标+文字显示
C# wpf style实现PART可替换控件
11-10
在style中定义了一些样式，比如容器的外部样式（比如自定义窗口标题栏，此时窗口是容器，标题栏是外部样式），使用时只能在容器内部放置控件，此时想要在容器的外部样式中添加控件是不行的。但有时候需要在不同的...
WPF基于dragablz自定义样式的可拖动TabControl
05-06
4. **可自定义新生成窗口的样式**：创建新窗口后，我们同样可以定制新窗口的样式，包括窗口大小、边框、标题栏等。这可以通过设置Window的Style属性，或者为Window定义一个新的Template来完成。同时，为了保持与主...
精美WPF左侧菜单栏
07-24
在实际开发中，为了使菜单栏看起来更加精美，我们可能会使用样式（Style）和模板（Template）来定制控件的外观。例如，可以定义一个自定义的`MenuItem`模板，包含动画效果，使得菜单项在展开或关闭时有平滑的过渡。...
WPF自定义嵌入弹框控件，支持内容标题自定义
acheng
07-10 812
最近为了实现WPF中弹框组件写了一个小例子： 组件要求： 1.自定义标题 2自定义标题颜色 3提供关闭按钮， 4.弹框内容可由调用方自行嵌入
WPF 修改标题栏背景色(标题栏的最小化、最大化、关闭需要调一下)
KING_QAQ的博客
09-06 3795
WPF 修改标题栏背景色(标题栏的最小化、最大化、关闭需要调一下)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CodeOfCC

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值