WPF制作无边框窗体、圆角窗体、支持改变大小、拖动分屏等（一）

最新推荐文章于 2024-08-04 03:05:58 发布
最新推荐文章于 2024-08-04 03:05:58 发布
阅读量3.7k 收藏 16
点赞数 4
分类专栏： WPF 文章标签： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40374647/article/details/114111789
版权

目录

概述

Windows Presentation Foundation (WPF) 是一个可创建桌面客户端应用程序的 UI 框架。 WPF 开发平台支持广泛的应用开发功能，包括应用模型、资源、控件、图形、布局、数据绑定、文档和安全性。 此框架是 .NET Framework 的一部分，因此，在未来如果想快速的开发桌面软件，WPF腚是你的不二选择。

需求说明

WPF既然是桌面软件UI，那一定绕不开桌面软件的多元化（chan pin jing li de chou pi）显示方式，最常见的就是无边框窗体、圆角窗体、窗体阴影等，同时还需要支持改变窗口大小、响应拖动分屏等。本文也会从这几个需求入手，打造一个让各位猿友满意的窗体。

开整（分割线搞个仪式）

制作无边框窗体

思路： 无边框窗体比较好办，思路就是设置窗体属性WindowStyle为None，这时无边框窗体就创建好了，而且支持改变尺寸，但是为了普适性，需要对窗体进行装饰，比如：窗体拖动、拖动分屏、窗体功能按钮、窗体是否支持改变大小等，这些都需要代码参与。

窗体拖动、拖动分屏

拖动操作一般是在窗体头操作的，所以需要对窗体进行Grid分行。然后在title的Grid里注册鼠标移动事件，然后在后台控制窗体拖动（title的Grid背景色必须赋值，哪怕是透明色，不然不会命中测试）。实际上在调用DragMove方法时，窗体就已经支持了左右分屏以及全屏，但是问题就是：全屏是满屏，把任务栏也遮住了，其次满屏后不能再拖动为正常尺寸。

<Window x:Class="WpfApp1.Window1"
        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:WpfApp1"
        mc:Ignorable="d"
        WindowStyle="None"
        Title="Window1" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid x:Name="title" Background="Transparent" MouseMove="title_MouseMove">
            
        </Grid>
        <Grid x:Name="body" Grid.Row="1">

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


namespace WpfApp1
{
    /// <summary>
    /// Window1.xaml 的交互逻辑
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void title_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.LeftButton== MouseButtonState.Pressed)
            {
                this.DragMove();
            }
        }
    }
}

解决拖动问题

（1）首先就是最大化遮挡任务栏问题，可以通过重写OnStateChanged事件，在最大化时设置窗体边框以及最大允许尺寸（最大尺寸由工作区域+16组成，16的数字来源于经验），但是由于该事件需要激活，所以需要在Loaded空调用一次。

namespace WpfApp1
{
    /// <summary>
    /// Window1.xaml 的交互逻辑
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            this.Loaded += this.Window1_Loaded;
        }

        private void Window1_Loaded(object sender, RoutedEventArgs e)
        {
            OnStateChanged(null);
        }

        private void title_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.LeftButton== MouseButtonState.Pressed)
            {
                this.DragMove();
            }
        }
        protected override void OnStateChanged(EventArgs e)
        {
            switch (this.WindowState)
            {
                case WindowState.Maximized:
                    this.MaxWidth = SystemParameters.WorkArea.Width + 16;
                    this.MaxHeight = SystemParameters.WorkArea.Height + 16;
                    this.BorderThickness = new Thickness(5); //最大化后需要调整

                    break;

                case WindowState.Normal:
                    this.BorderThickness = new Thickness(0);
                    this.MaxWidth = SystemParameters.WorkArea.Width + 16;
                    this.MaxHeight = SystemParameters.WorkArea.Height + 16;
                    break;
            }
        }
    }

   
}

（2）其次解决最大化时拖动问题，我们可以考虑在最大化时拖动时，先设置WindowState为Normal，但是直接这样做会导致鼠标和拖动点之间存在很大间距，所以还需要设置窗体位置。

namespace WpfApp1
{
    /// <summary>
    /// Window1.xaml 的交互逻辑
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            this.Loaded += this.Window1_Loaded;
        }

        private void Window1_Loaded(object sender, RoutedEventArgs e)
        {
            OnStateChanged(null);
        }

        private void title_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                if (this.WindowState == WindowState.Maximized)
                {
                    WindowState = WindowState.Normal;
                    Point point = e.MouseDevice.GetPosition(this);
                    Left = point.X - this.title.ActualWidth * point.X / SystemParameters.WorkArea.Width;
                    Top = point.Y - this.title.ActualHeight * point.Y / SystemParameters.WorkArea.Height;
                }

                this.DragMove();
            }
        }
        protected override void OnStateChanged(EventArgs e)
        {
            switch (this.WindowState)
            {
                case WindowState.Maximized:
                    this.MaxWidth = SystemParameters.WorkArea.Width + 16;
                    this.MaxHeight = SystemParameters.WorkArea.Height + 16;
                    this.BorderThickness = new Thickness(5); //最大化后需要调整

                    break;

                case WindowState.Normal:
                    this.BorderThickness = new Thickness(0);
                    this.MaxWidth = SystemParameters.WorkArea.Width + 16;
                    this.MaxHeight = SystemParameters.WorkArea.Height + 16;
                    break;
            }
        }
    }


}

窗体功能按钮

窗体的功能按钮是控制窗体的最重要控件。一般的有最小化、正常化切换、最大化三种功能按钮。但是不能直接在title里面直接部署这三个按钮，因为这样的话按钮也会响应拖动命令，这是我们所不希望的。所以必须重新对窗体头布局。然后对按钮注册click事件。
在这里插入图片描述

<Window x:Class="WpfApp1.Window1"
        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:WpfApp1"
        mc:Ignorable="d"
        WindowStyle="None"
        Title="Window1" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="90"/>
            </Grid.ColumnDefinitions>
            <Grid x:Name="title" Background="Transparent" MouseMove="title_MouseMove">
            </Grid>
            <StackPanel Grid.Column="1" Orientation="Horizontal">
                <Button Content="一" Width="30" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Click="Button_Click"/>
                <Button Content="口" Width="30" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Click="Button_Click_1"/>
                <Button Content="X" Width="30" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Click="Button_Click_2"/>
            </StackPanel>
        </Grid>
       
        <Grid x:Name="body" Grid.Row="1">

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


namespace WpfApp1
{
    /// <summary>
    /// Window1.xaml 的交互逻辑
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            this.Loaded += this.Window1_Loaded;
        }

        private void Window1_Loaded(object sender, RoutedEventArgs e)
        {
            OnStateChanged(null);
        }

        private void title_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                if (this.WindowState == WindowState.Maximized)
                {
                    WindowState = WindowState.Normal;
                    Point point = e.MouseDevice.GetPosition(this);
                    Left = point.X - this.title.ActualWidth * point.X / SystemParameters.WorkArea.Width;
                    Top = point.Y - this.title.ActualHeight * point.Y / SystemParameters.WorkArea.Height;
                }

                this.DragMove();
            }
        }
        protected override void OnStateChanged(EventArgs e)
        {
            switch (this.WindowState)
            {
                case WindowState.Maximized:
                    this.MaxWidth = SystemParameters.WorkArea.Width + 16;
                    this.MaxHeight = SystemParameters.WorkArea.Height + 16;
                    this.BorderThickness = new Thickness(5); //最大化后需要调整

                    break;

                case WindowState.Normal:
                    this.BorderThickness = new Thickness(0);
                    this.MaxWidth = SystemParameters.WorkArea.Width + 16;
                    this.MaxHeight = SystemParameters.WorkArea.Height + 16;
                    break;
            }
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            this.WindowState = WindowState.Minimized;
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            if (this.WindowState == WindowState.Normal)
            {
                this.WindowState = WindowState.Maximized;
            }
            else
            {
                this.WindowState = WindowState.Normal;
            }
        }

        private void Button_Click_2(object sender, RoutedEventArgs e)
        {
            this.Close();
        }
    }


}

使用RRQMSkin创建无边框窗体

实际上以上代码只能实现比较简单的功能，并不完全具备普适性，所以无边框窗体已经被本猿封装到了RRQMSkin中，如果大家想直接使用的话直接在Nuget搜索RRQMSkin即可，具体操作如下：
在这里插入图片描述
在这里插入图片描述
添加好引用后，在主窗体替换继承类为RRQMWindow即可（包括后台代码）。

<window:RRQMWindow x:Class="WpfApp1.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:local="clr-namespace:WpfApp1"
                   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                   xmlns:window="若汝棋茗_Windows"
                   Height="450"
                   Width="800"
                   mc:Ignorable="d">
    <Grid />
</window:RRQMWindow>


namespace WpfApp1
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : RRQMSkin.Windows.RRQMWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

结束

OK，一个无边框窗体就创建完成了，下节说创建圆角窗体。

最后希望这篇博客能帮到各位猿友，当然如果还有什么不明白的，可以私信本猿哦，QQ群：234762506

若汝棋茗
关注
专栏目录
wpf无边框窗体移动和大小调整
炯哥天地
10-26 7231
using System; using System.Windows; using System.Windows.Interop; namespace Wpftest { public partial class MainWindow : Window { public MainWindow() { this.Initial
wpf无边框窗体
03-01
wpf无边框窗体，在有无winformhost情况下，通过拖动边框改变窗体大小
WPF制作无边框窗体、圆角窗体、支持改变大小、拖动分屏等（二）
若汝棋茗 的博客
02-26 4589
目录上节回顾制作圆角窗体圆角及阴影窗体拖动、拖动分屏窗体改变尺寸窗体功能按钮使用RRQMSkin创建圆角窗体结束 上节回顾 上节已经说到如何创建一个无边框窗体，那么这节就说说如何创建圆角窗体。 开整（分割线搞个仪式） 制作圆角窗体 思路： 圆角窗体比较麻烦，网上的实现思路也五花八门，例如：WinApi直接设置窗口句柄、双窗体重叠、透明窗体+Border等。本文得思路就是透明窗体+Border，因为在本猿测试的时候发现第一种方法很容易出错，句柄不兼容等，第二种方法在Tab切换视图的时候很容易看出来，而且
WPF-无边框并去除上白边
最新发布
weixin_41244507的博客
08-04 45
代码如下：登录后复制 <Window x:Class="WpfApp1.Test1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft...
WPF 圆角Windows窗口
qq_37516758的博客
04-25 1418
wpf圆角窗口
几十款 WPF 控件 - UI 库，总有一款适合你
qq_35732083的博客
12-23 2154
功能简介：一个 Metro 风格的 WPF UI 库。文档地址：https://github.com/944095635/DMSkin#2%E9%A1%B9%E7%9B%AE%E6%A8%A1%E5%9D%97%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E。效果演示：https://github.com/kwonganding/wpf.controls#%E7%AC%AC%E4%B8%80%E7%89%88%E7%9A%84%E6%95%88%E6%9E%9C%E5%9B%BE。
WPF中制作无边框窗体
祝紫山（大可山人）博客[GDI+,WPF, .Net图形图像]
11-19 3万+
众所周知，在WinForm中，如果要制作一个无边框窗体，可以将窗体的FormBorderStyle属性设置为None来完成。如果要制作成异形窗体，则需要使用图片或者使用GDI+自定义绘制。那么，在WPF中，我们怎样制作一个无边框窗体呢？答案是将Window的WindowStyle属性设置为None，即WindowStyle="None" 。如果是非矩形的异形窗体，则需要将背景设为Null,
wpf 无边框窗体
dxm809的博客
09-23 306
<Window x:Class="UserControlDemo.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" .
WPF实现可改变大小的无边框窗体
u014650759的专栏
07-23 2805
这里记载一个WPF中比较实用的功能，怎样处理一个无边框窗体。通常的做法是设置WindowStyle="None" 和ResizeMode="NoResize"，但这样有一个问题，窗体的大小不能够通过拖动进行改变。于是，很多的解决方式如下： <Window x:Class="TestProject.ScratchWindow" xmlns="http://schemas.m...
WPF 创建无边框的圆角窗口
01-30 317
第一步：去掉窗体默认样式的边框 首先将窗体的背景设为透明，将允许透明的属性设置为True，即：Background="Transparent" AllowsTransparency="True"，将Window的WindowStyle属性设置为None，即WindowStyle="None" (当AllowsTransparency="True"时，WindowStyle.Non...
WPF 无边框拖动，并改变窗体大小
08-18
标题"\"WPF 无边框拖动，并改变窗体大小\"\"所描述的就是这样一个需求，即如何在WPF应用中实现一个无边框窗口，用户仍然能够通过鼠标进行拖动和拉伸来改变窗口的位置和尺寸。 首先，我们可以通过设置`Window.Style`...
WPF圆角窗口 自动剪切内容 不超出 CornerRadius
02-09
WPF圆角窗口 自动剪切内容 不超出窗口边缘 窗口大小可以改变
WPF 无边框窗体 最大最小化 拖拽缩放
12-08
通过以上步骤，你已经成功地在WPF中创建了一个具备拖拽、最大化和最小化功能的无边框窗体。这只是一个基础实现，你还可以根据需要添加更多的自定义功能，如阴影效果、透明度控制等，以提升用户体验。记住，良好的...
WPF MicrioUI无边框窗体.zip
03-30
标题“WPF MicrioUI无边框窗体.zip”表明这个压缩包包含了一个实现无边框窗口的示例项目。描述中提到的关键知识点是通过设置`WindowStyle`属性为`None`来移除窗口的标准边框，并且通过将窗口的背景设为`Null`以及...
WPF 无边框圆角阴影窗体 | WPF 只允许当前程序打开一个并激活先前打开的窗体
MissPuya的博客
12-16 697
【代码】WPF 无边框圆角阴影窗体 | WPF 只允许当前程序打开一个。
WPF创建无边框窗体
catshitone的专栏
05-29 1424
WPF自带的窗体边框和标题栏只包含基础的功能，无法满足项目的视觉效果，经常会遇到需要去掉框架自带标题栏的情况。（注意：当窗体最大化时，内容与屏幕会有一个负8的margin，所以在。时手动补偿正8的margin。
WPF实现窗口界面无边框圆角窗口 无白边
Blue
03-23 1379
WPF实现窗口界面无边框圆角窗口 无白边
【WPF】无边框窗体
weixin_34406061的博客
08-18 74
之前写了一个支持尺寸变换的无边框窗体的一个基窗体，代码如下： public class LBaseWindow : Window { /// &lt;summary&gt; /// 基窗体 /// &lt;/summary&gt; public LBaseWindow() { ...
WPF 设置无边框无样式的窗体
热门推荐
stybill的博客
12-06 4万+
wpf page随窗体大小变化
07-22
### 回答1： WPF（Windows Presentation Foundation）是一种用于创建Windows上交互式应用程序的框架，它支持窗体和页面的开发。在WPF中，我们可以让页面随窗体的大小变化而自适应。 首先，我们需要将页面的布局定义为相对布局（Relative Layout），这样页面中的元素将根据相对位置和比例来排列。可以使用Grid控件或其他容器控件来实现。 其次，我们可以使用控件的布局属性和绑定来实现页面元素的自适应。比如，可以使用HorizontalAlignment和VerticalAlignment属性来控制元素在页面中的水平和垂直位置；使用Width和Height属性来控制元素的大小；使用Margin属性来设置元素与页面边界的距离等等。 另外，我们还可以使用响应式设计的思想来实现页面的自适应。通过在页面中定义样式和触发器，我们可以根据窗体的大小来改变样式或重新布局页面元素。可以使用VisualStateManager和VisualState来定义不同的视觉状态，并在窗体大小变化时自动切换。 最后，为了确保页面随窗体的大小变化而自适应，我们还可以使用事件或命令来处理窗体大小变化的通知。WPF提供了SizeChanged事件，我们可以在事件处理程序中更新页面布局或元素的大小。 总结来说，WPF的页面可以通过相对布局、布局属性和绑定、响应式设计以及事件处理来实现随窗体大小变化而自适应。这样可以确保应用程序在不同的窗体大小下都能提供良好的用户体验。 ### 回答2： WPF页面（Page）随窗体大小的变化可以通过使用WPF自带的布局容器来实现。WPF提供了多种布局容器，常用的有Grid、StackPanel和DockPanel等。 使用Grid布局容器是一种常见的做法。在Grid中，可以将页面的各个元素放置在不同的行和列中，设置宽度和高度的比例或者绝对值等。当窗体大小变化时，Grid会根据行和列的定义自动调整元素的大小和位置，从而实现页面随窗体大小的变化。 另一种常见的做法是使用StackPanel布局容器。StackPanel会根据方向（水平或垂直）将页面的元素一次排列在一起。当窗体大小变化时，StackPanel会自动调整元素的大小和位置，保持元素的排列顺序不变，并根据需要将元素放置在新的行或列中。 DockPanel布局容器是将页面的元素放置在不同的方位（上、下、左、右和中间）中。通过设置元素在DockPanel中的Dock属性，可以确定元素相对于DockPanel的位置。当窗体大小变化时，DockPanel会自动调整元素的大小和位置，保持元素的位置不变。 总之，通过合理使用WPF的布局容器，可以实现WPF页面随窗体大小的变化。无论是使用Grid、StackPanel还是DockPanel等布局容器，都需要根据页面的组成和需要来选择合适的布局容器，并设置元素的大小和位置，以实现页面随窗体大小的变化。 ### 回答3： WPF（Windows Presentation Foundation）是一种用于创建具有丰富用户界面的应用程序的技术。在WPF中，Page是一种用来构建独立页面的控件。当Page随窗体大小变化时，可以采用以下方法进行处理： 1. 动态布局：在设计Page时，可以使用WPF的布局控件（如Grid、StackPanel等）来对页面中的元素进行布局。通过设置不同的布局属性，例如HorizontalAlignment和VerticalAlignment等，可以使页面中的元素根据窗体的大小自动调整其位置和大小。 2. 控件的自适应：使用WPF的控件，例如TextBox、Button等，在其属性中可以设置一些适应性的特性，例如Stretch、MinHeight、MinWidth等。通过设置这些属性，可以使控件在窗体大小变化时自动调整自身的大小和显示。 3. 响应窗体大小变化的事件：WPF中的Page可以订阅窗体的大小变化事件，例如SizeChanged事件。通过处理该事件，可以在窗体大小变化时执行一些特定的操作，例如重新计算页面中元素的布局、刷新页面内容等。 总结起来，要实现Page随窗体大小变化，可以采用动态布局、控件的自适应和处理窗体大小变化事件等方法。这些方法可以使页面中的元素根据窗体大小自动调整其位置和大小，从而适应不同大小的窗体。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

若汝棋茗

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

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

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

打赏作者

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

抵扣说明：

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

余额充值