WPF实现自定义窗体的示例代码
更新时间：2023年09月05日 09:18:11 作者：卓尔不设凡
.Net默认的窗体样式只有四种,而且都比较“丑”,但是很多时候,我们希望自定义窗体,比如,无边框,有阴影等,所以本文为大家介绍了WPF实现自定义窗体的方法,希望对大家有所帮助
.Net默认的窗体样式只有四种：None、SingleBorderWindow、ThreeDBorderWindow、ToolWindow，都比较“丑”。而很多时候，我们希望自定义窗体，比如，无边框，有阴影，或者有模糊效果等。
在WPF中，要实现自定义窗体比较简单，主要有两种方法：
1）使用WindowChrome；
2）使用WindowStyle = “None”。
一、使用WindowChrome
WindowChrome，可以翻译为：窗体装饰条，官方文档中的定义是：表示一个对象，它描述窗口非工作区区域的自定义。（官方链接：WindowChrome 类 (System.Windows.Shell) | Microsoft Learn）
在官方的解释中，窗口由两部分构成：客户区域，非客户区域。
图中，Client Area表示客户区域；其他的部分，统称为非客户区域。
那么WindowChrome的作用是，将客户区域扩展至整个窗体（遮住了非客户区），同时提供部分标准窗体的功能。如下所示：
<Window x:Class="ControlTest.WindowNone"
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:ControlTest"
mc:Ignorable="d"
Title="WindowNone" Height="450" Width="800">
<!-- WindowChrome将客户区域扩展至整个窗体，并遮住标题栏、按钮等-->
<WindowChrome.WindowChrome>
<WindowChrome />
</WindowChrome.WindowChrome>
<Grid>
<TabControl>
<TabItem Header="项目"/>
<TabItem Header="代码"/>
</TabControl>
</Grid>
</Window>
备注：这里的边框，是TabControl的边框，不是窗体的边框。
用上WindowChrome后，会惊奇的发现：在原标题栏的位置，可以用鼠标拖动了；在窗体的四周，可以调整窗体的大小了！Amazing！
但同时，又出现了一个新的问题：窗体中的所以内容，都不能交互（鼠标点击，用户输入）了。
这是为什么呢？可以这样理解。WindowChrome就像一个图层，它将窗体整个覆盖住了。因此窗体上的内容，自然就操作不了。那要如何才能点击呢？
这需要给交互控件，添加WindowChrome的附件属性：IsHitTestVisibleInChrome。如下所示。
<Grid>
<!-- 使用WindowChrome的附件属性 -->
<TabControl WindowChrome.IsHitTestVisibleInChrome="True">
<TabItem Header="项目"/>
<TabItem Header="代码"/>
</TabControl>
</Grid>如果你以为这样就万事大吉了，那只能说太天真了，微软的东西，哪有那么简单的呢？？哈哈~
如果真的按照这个代码，你会发现，又不能使用鼠标拖动窗体了。这是为什么呢？明明之前都可以，为何为控件添加了一个附加属性后，就不行了呢？
问题肯定出在WindowChrome上。那么我们再来看看WindowChrome：
图中有颜色的区域，实际上均为透明的，看不见的。此处附上颜色则是为了方便解释。
这个图就是WindowChrome的模型。其中Caption区域，表示标题栏，就是它，允许窗体被鼠标拖动。GlassFrameThickness就是Aero窗体的透明边框（Aero主体只在部分操作系统中支持）。ResizeBorderThickness就是调整窗体大小的边框的粗细，它提供了使用鼠标调整窗体大小的功能。而CornerRadius，则将窗体变成了圆角，它只有在GlassFrameThickness = 0 或者未启用Aero主体的窗口中才有效。。
再回到上面的问题，为什么添加了附加属性，就不能用鼠标拖动窗体了呢？
原因在于，TabControl进入了Caption区域。因为设置了附加属性（IsHitTestVisibleInChrome），表示鼠标可以“击穿”WindowChrome，那么自然就无法“点击”到Caption区域，自然就无法拖动窗体了。
那么如果解决这个问题呢？以及如何添加按钮呢？答案是手动添加标题栏。哈哈~ 如下代码所示：
Xaml代码：
<Window x:Class="ControlTest.WindowNone"
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:ControlTest"
mc:Ignorable="d"
Title="WindowNone" Height="450" Width="800">
<!-- WindowChrome将客户区域扩展至整个窗体，并遮住标题栏、按钮等 -->
<WindowChrome.WindowChrome> <!-- 设置了标题栏的高度 = 30，圆角 = 20 -->
<WindowChrome CaptionHeight="30" CornerRadius="20" GlassFrameThickness="0"/>
</WindowChrome.WindowChrome>
<Border BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Height="30" Background="YellowGreen">
<Grid>
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="Width" Value="30"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
</Style>
</Grid.Resources>
<StackPanel Orientation="Horizontal" WindowChrome.IsHitTestVisibleInChrome="True">
<Image />
<TextBlock VerticalAlignment="Center" Margin="3,0" Text="{Binding Title, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" WindowChrome.IsHitTestVisibleInChrome="True">
<Button Content="_" Click="Btn_Min"/>
<Button Content="Max" Click="Btn_Max"/>
<Button Content="X" Click="Btn_Close"/>
</StackPanel>
</Grid>
</Border>
<!-- 使用WindowChrome的附件属性 -->
<TabControl Grid.Row="1" WindowChrome.IsHitTestVisibleInChrome="True">
<TabItem Header="项目"/>
<TabItem Header="代码"/>
</TabControl>
</Grid>
</Border>
</Window>C# 代码：
public partial class WindowNone : Window
{
public WindowNone()
{
InitializeComponent();
}
// 最小化
private void Btn_Min(object sender, RoutedEventArgs e)
{
this.WindowState = WindowState.Minimized;
}
// 最大化、还原
private void Btn_Max(object sender, RoutedEventArgs e)
{
if(this.WindowState == WindowState.Normal)
{
this.WindowState = WindowState.Maximized;
}
else
{
this.WindowState = WindowState.Normal;
}
}
// 关闭窗体
private void Btn_Close(object sender, RoutedEventArgs e)
{
this.Close();
}
}
手动添加了标题栏之后，在标题栏上，你就可以放上任何你放的东西。。。。
二、使用WindowStyle = "None"
将窗体的WindowStyle属性设置为None后，窗体呈现这样：
<Window x:Class="ControlTest.NoneWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="NoneWindow" Height="450" Width="800"
WindowStyle="None">
<Grid>
<TabControl>
<TabItem Header="项目"/>
<TabItem Header="代码"/>
</TabControl>
</Grid>
</Window>
这里，你会发现，窗体可以通过鼠标调整大小，但是不能用鼠标拖动。那解决的办法是什么呢？同样是手动设置一个标题栏：
Xaml 代码：
<Window x:Class="ControlTest.NoneWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="NoneWindow" Height="450" Width="800"
WindowStyle="None" BorderThickness="0" BorderBrush="Transparent">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Height="30" Background="YellowGreen"
MouseDown="TitleMove">
<Grid>
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="Width" Value="30"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
</Style>
</Grid.Resources>
<StackPanel Orientation="Horizontal" WindowChrome.IsHitTestVisibleInChrome="True">
<Image />
<TextBlock VerticalAlignment="Center" Margin="3,0" Text="{Binding Title, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" WindowChrome.IsHitTestVisibleInChrome="True">
<Button Content="_" Click="Btn_Min"/>
<Button Content="Max" Click="Btn_Max"/>
<Button Content="X" Click="Btn_Close"/>
</StackPanel>
</Grid>
</Border>
<TabControl Grid.Row="1" Margin="10">
<TabItem Header="项目"/>
<TabItem Header="代码"/>
</TabControl>
</Grid>
</Window>C# 代码：
public partial class NoneWindow : Window
{
public NoneWindow()
{
InitializeComponent();
}
// 窗体移动
private void TitleMove(object sender, MouseButtonEventArgs e)
{
if (e.ChangedButton != MouseButton.Left) return; // 非左键点击，退出
if (e.ClickCount == 1)
{
this.DragMove(); // 拖动窗体
}
else
{
WindowMax(); // 双击时，最大化或者还原窗体
}
}
// 最小化
private void Btn_Min(object sender, RoutedEventArgs e)
{
this.WindowState = WindowState.Minimized;
}
// 关闭窗体
private void Btn_Close(object sender, RoutedEventArgs e)
{
this.Close();
}
// 最大化、还原
private void Btn_Max(object sender, RoutedEventArgs e)
{
WindowMax();
}
private void WindowMax()
{
if (this.WindowState == WindowState.Normal)
{
this.WindowState = WindowState.Maximized;
}
else
{
this.WindowState = WindowState.Normal;
}
}
}
这种方式下，会发现在窗体的“标题栏”上面，还有一点留白无法去除，同样窗体的边框也是无法去除的。
到此这篇关于WPF实现自定义窗体的示例代码的文章就介绍到这了,更多相关WPF自定义窗体内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了在.net应用程序中运行其它EXE文件的方法,涉及C#进程操作的相关技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了C#编程之事务用法,结合实例形式对比分析了C#中事务提交与回滚的具体实现技巧与相关注意事项,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
这篇文章主要介绍了将配置文件appsetting中的值转换为动态对象调用 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
这篇文章主要介绍了C#在Winform开发中使用Grid++报表，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了关于C#结构体的相关知识，以及使用方法，文中代码非常详细，帮助大家更好的参考和学习，感兴趣的朋友可以了解下2020-06-06
这篇文章主要为大家详细介绍了C#如何使用Winform编写一个通用图片预览器管理,包含滚轮放大缩小,剪切,下一页,方向变化等,需要的可以参考下2024-02-02
本文主要介绍了C#匿名函数和匿名方法的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
这篇文章主要介绍了c# 泛型类的功能，帮助大家更好的理解和学习c#,感兴趣的朋友可以了解下2020-10-10
这篇文章介绍了C#使用GUID(全局统一标识符)的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-04-04
这篇文章主要介绍了C#实现简易画图板的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
最新评论