526互联

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

发布时间 2023-08-28 15:08:42作者: jack_Meng

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实现了。使用的时候只需要灵活调整样式即可。

 

【出处】：https://blog.csdn.net/u013113678/article/details/125772769