使用 ElementUI 组件构建无边框 Window 桌面应用(WinForm/WPF)

生活不可能像你想象得那么好,但也不会像你想象得那么糟。 我觉得人的脆弱和坚强都超乎自己的想象。 有时,我可能脆弱得一句话就泪流满面;有时,也发现自己咬着牙走了很长的路。

——莫泊桑 《一生》

一、技术栈

Vite + Vue3 + TS + ElementUI(plus) + .NET Framework 4.7.2,开发环境为 Win10,VS2019,VS Code。 

二、实现原理

1、WinForm 窗口无边框

设置属性 FormBorderStyle 为 None ,

FormBorderStyle = FormBorderStyle.None;

2、WPF 窗口无边框

设置属性 WindowStyle ="None" ,

WindowStyle = WindowStyle.None;
<Window x:Class="SerialDevTool.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"mc:Ignorable="d"  Title="MainWindow" WindowStyle ="None"AllowsTransparency="True"WindowState="Normal"WindowStartupLocation="CenterScreen"><Grid></Grid>
</Window> 

3、user32.dll 库

该库包含了一些与用户界面交互相关的函数,其中,ReleaseCapture 函数用于释放鼠标捕获,SendMessage 函数用于向指定的窗口发送消息。

// https://learn.microsoft.com/zh-cn/windows/win32/api/winuser/nf-winuser-releasecapture?redirectedfrom=MSDN
// 从当前线程中的窗口释放鼠标捕获,并还原正常鼠标输入处理。 捕获鼠标的窗口接收所有鼠标输入,而不考虑光标的位置,但当光标热点位于另一个线程的窗口中时单击鼠标按钮除外。
BOOL ReleaseCapture();// https://learn.microsoft.com/zh-cn/windows/win32/api/winuser/nf-winuser-sendmessage
// 将指定的消息发送到一个或多个窗口。 SendMessage 函数调用指定窗口的窗口过程,在窗口过程处理消息之前不会返回。
LRESULT SendMessage([in] HWND   hWnd,[in] UINT   Msg,[in] WPARAM wParam,[in] LPARAM lParam
);

4、自定义窗口拖拽实现

引入 user32.dll 库,监听界面上某区域的鼠标事件,触发鼠标事件后,通过 ReleaseCapture 函数释放当前鼠标捕获并还原正常鼠标输入处理,由 SendMessage 函数实现当前窗口的移动过程。

5、Chromium Embedded Framework

通过 CefSharp 库内嵌一个浏览器控件到 DotNet 窗口应用中。

6、接收 Javascript 信息

ChromiumWebBrowser 类提供了 JavascriptMessageReceived 方法,

//
// 摘要:
//     Event handler that will get called when the message that originates from CefSharp.PostMessage
public event EventHandler<JavascriptMessageReceivedEventArgs> JavascriptMessageReceived;

三、TitleBar 样式设计与实现

1、布局

左边三个按钮分别触发最小化、最大/正常化、关闭窗口,标题居中,

2、代码实现

// app\src\components\TitleBarSimple.vue
<template><div class="common grid-content"><div class="common my-button"><el-button id="minimizedButton" @click="minimizedWindow" type="danger" circle /><el-button id="normalizedButton" @click="normalizedWindow" type="primary" circle /><el-button id="closeButton" @click="closeWindow" type="default" circle /></div><div @mousedown="handleMouseDown" class="common my-title-bar" id="my-title"><div> <el-text tag="b">{{mytitle}}</el-text> </div></div></div>
</template><script lang="ts" setup>const mytitle:string = 'Awesome Application 版本 1.0.0.0(开发版本) (64 位)'/**最小化窗口 */
const minimizedWindow = () => {const ret = { type: 'minimized' };CefSharp.PostMessage(ret);
}/**关闭窗口 */
const closeWindow = () => {const ret = { type: 'close' };CefSharp.PostMessage(ret);
}/**最大/正常窗口 */
const normalizedWindow = () => {const ret = { type: 'normalized' };CefSharp.PostMessage(ret);
}/**鼠标左键点击事件 */
const handleMouseDown = (event: any) => {// 检查是否是鼠标左键点击事件if (event.button === 0) {const ret = { type: 'mousedown' };CefSharp.PostMessage(ret);}
}</script><style lang="scss">
/* cnpm install -D sass */.el-row {margin-bottom: 20px;
}.el-row:last-child {margin-bottom: 0;
}.el-col {border-radius: 4px;
}.el-button.is-circle {width: 10px;height: 10px;border-radius: 50%;padding: 8px;
}.common {display: flex;/* 水平居中 */justify-content: center; /* 垂直居中 */align-items: center; 
}.grid-content {min-height: 30px;margin-bottom: 5px;background: #FAFAFA;
}.my-button {padding-left: 5px;width: 105px;
}.my-title-bar {w

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/240654.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

166. 数独(DFS之剪枝与优化:位运算优化,优化搜索顺序,.可行性剪枝)

166. 数独 - AcWing题库 数独 是一种传统益智游戏&#xff0c;你需要把一个99 的数独补充完整&#xff0c;使得数独中每行、每列、每个 33 的九宫格内数字 1∼9 均恰好出现一次。 请编写一个程序填写数独。 输入格式 输入包含多组测试用例。 每个测试用例占一行&#xff0…

[管理者与领导者-129]:很多人对高情商的误解,工程师要扩展自己的情商吗?工程师如何扩展自己的情商?

目录 前言&#xff1a; 一、什么是高情商&#xff1f; 1.1 什么是高情商 1.2 情商的五大能力 1.3 高情商的层次 1.4 对高情商的误解? 二、工程师需要发展自己的高情商吗&#xff1f; 三、工程师如何扩展自己的情商&#xff1f; 四、什么样的“高情商”的管理者令人讨…

ZZ014城市轨道交通运营与维护赛题第7套

ZZ014城市轨道交通运营与维护赛题第7套 模块1赛题 模块序号 模块1 对应赛项编号 ZZ014 模块名称 城市轨道交通运营服务 子任务数量 12 竞赛时间 60分钟 任务描述 行车组织作业、票务设备故障处置以及突发事件应急处理 职业要素 R基本专业素养 R专业实践技能 R协…

.a库介绍和编译案例

.a库的介绍 库的名字一般是libxxxx.a,利用静态函数库编译成的文件比较大&#xff0c;是因为在链接阶段&#xff0c;会将汇编生成的目标文件.o与引用到的库一起链接打包到可执行文件&#xff0c;对应的链接方式为静态链接。静态库的代码在编译时链接到应用程序中&#xff0c;因…

基于Mybatis-Plus进行查询封装

基于Mybatis-Plus进行查询封装 package com.test.common.orm.builder;import cn.hutool.core.util.IdUtil; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import org.apache.ibatis.cache.Cache; import org.apache.ibatis.cache.impl.PerpetualCach…

前端 JS 安全对抗原理与实践

作者&#xff1a;vivo 互联网安全团队- Luo Bingsong 前端代码都是公开的&#xff0c;为了提高代码的破解成本、保证JS代码里的一些重要逻辑不被居心叵测的人利用&#xff0c;需要使用一些加密和混淆的防护手段。 一、概念解析 1.1 什么是接口加密 如今这个时代&#xff0c;…

高德地图逆地理编码踩坑日志

本人是一枚Java小白&#xff0c;公司项目中用到根据经纬度反查该地址中文信息的场景&#xff0c;因为一开始调用的经纬度是能反查出区域编码的&#xff0c;以为towncode都是String返回结果&#xff0c;如下图&#xff1a; 没想到当没有名字任何一个城市区域的时候&#xff0c;…

管理 Jenkins 详细指南

目录 系统配置 安全 状态信息 故障 排除 工具和操作 系统配置 系统&#xff0c;配置全局设置和路径&#xff0c;端口更改&#xff0c;下载地址等。 工具&#xff0c;配置工具、其位置和自动安装程序。 插件&#xff0c;添加、删除、禁用或启用可以扩展 Jenkins 功能的插…

华为OD机试 - 精准核酸检测(Java JS Python C)

题目描述 为了达到新冠疫情精准防控的需要,为了避免全员核酸检测带来的浪费,需要精准圈定可能被感染的人群。 现在根据传染病流调以及大数据分析,得到了每个人之间在时间、空间上是否存在轨迹交叉。 现在给定一组确诊人员编号(X1,X2,X3,...,Xn),在所有人当中,找出哪些…

ssh远程管理服务

什么是ssh SSH是一种加密的网络协议&#xff0c;用于在不安全的网络中安全地传输数据。它允许用户通过一个安全的通道连接到远程计算机&#xff0c;并在该通道上执行各种网络服务&#xff0c;例如远程登录和文件传输。 SSH使用公钥加密技术来验证远程计算机的身份&#xff0c;并…

初识Stable Diffusion

界面选项解读 这是在趋动云上部署的Stable Diffusion txt2img prompt &#xff08;1&#xff09;分割符号&#xff1a;使用逗号 , 用于分割词缀&#xff0c;且有一定权重排序功能&#xff0c;逗号前权重高&#xff0c;逗号后权重低 &#xff08;2&#xff09;建议的通用范式…

【C++11特性篇】玩转C++11中的包装器(function&bind)

前言 大家好吖&#xff0c;欢迎来到 YY 滴C系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; 目录 一.为什么需要包装器function&#xff…

【Earth Engine】协同Sentinel-1/2使用随机森林回归实现高分辨率相对财富(贫困)制图

目录 1 简介与摘要2 思路3 效果预览4 代码思路5 完整代码6 后记 1 简介与摘要 最近在做一些课题&#xff0c;需要使用Sentinel-1/2进行机器学习制图。 然后想着总结一下相关数据和方法&#xff0c;就花半小时写了个代码。 然后再花半小时写下这篇博客记录一下。 因为基于多次拍…

通过windows cng api 实现rsa非对称加密

参考&#xff1a; 1,使用 CNG 加密数据 - Win32 apps | Microsoft Learn 2,不记得了 &#xff08;下文通过cng api演示rsa加密&#xff0c;不做原理性介绍&#xff09; 相对于aes等对称加密算法&#xff0c;rsa加密算法不可逆性更强。非对称加密在通常情况下&#xff0c;使…

前端传输formDate格式的数据,后端不能用@RequestBody接收

写了个接口&#xff0c;跟前端对接&#xff0c;前端说怎么一直415的报错 我寻思不对啊&#xff0c;我swagger都请求成功了&#xff0c;后来发现前端一直是以formdata格式提交的数据&#xff0c;这样我其实是可以不加RequestBody的&#xff1b; 知识点&#xff1a; RequestBody…

类和对象

1 类定义&#xff1a; class ChecksumAccumulator {// class definition goes here } 你就能创建 ChecksumAccumulator 对象&#xff1a;new CheckSumAccumulator 注&#xff1a;1scala类中成员默认是public类型&#xff0c;若设为私有属性则必须加private关键字。在scala中是…

基于Springboot的留守儿童爱心网站(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的留守儿童爱心网站(有报告)。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring…

技术交底二维码的应用

二维码技术交底可以逐级落实、责任到人、有据可查、是目前最方便、实用的交底方式&#xff0c;下面我们讲解技术交底二维码的应用。 1、生成对应的技术交底二维码&#xff0c;将施工方案、技术资料、安全教育资料等内容上传到二维码里。打印出来现场粘贴&#xff0c;便于作业班…

微信小程序 上列表拉加载下拉刷新

上拉加载和下拉刷新是小程序开发的常见需求。本文将介绍如何在微信小程序中实现上拉加载和下拉刷新的功能&#xff0c;为用户带来更加流畅、便捷的使用体验。 1. 实现效果 微信小程序 上列表拉加载下拉刷新 2. 实现思路 (1) 首先需要在使用到的 json 文件下配置 “enablePull…

java中线程相关的面试题

什么是线程安全&#xff0c;造成线程安全的本质是什么&#xff1f; 什么是线程安全呢&#xff1f; 咱们初步去理解话记住一句话就行&#xff1a;如果一个对象可以安全地被多个线程同时使用&#xff0c;那它就是线程安全的。 为什么并发编程会导致线程不安全&#xff1f; 可见…