首页 > 其他分享 >.NET 创建无边框的跨平台应用

.NET 创建无边框的跨平台应用

时间:2023-05-29 15:34:01浏览次数:29  
标签:evt app 边框 跨平台 pageX pageY var NET data

.NET 创建无边框的跨平台应用

在创建了Photino应用程序以后我们发现它自带了一个标题栏,并且非常丑,我们现在要做的就是去掉这个很丑的自带标题栏,并且自定义一个更好看的,下面我们将用Masa Blazor提供的模板去进行实战。

安装模板

安装Masa Blazor提供的rc2的模板

dotnet new install Masa.Template::1.0.0-rc.2

image.png

创建项目

  • 打开VS2022 => 新建项目
  • 搜索到一下类别!
    image.png
  • 然后创建Gotrays名称的项目

项目结构

image.png

无边框处理

修改Program.cs代码,增加SetChromeless,设置无边框

using Gotrays;
using Microsoft.Extensions.DependencyInjection;
using Photino.Blazor;

internal class Program
{
    [STAThread]
    private static void Main(string[] args)
    {
        var appBuilder = PhotinoBlazorAppBuilder.CreateDefault(args);

        appBuilder.RootComponents.Add<App>("#app");
        appBuilder.Services.AddMasaBlazor();

        var app = appBuilder.Build();

        app.MainWindow
            .SetTitle("Photino Blazor Sample")
            .SetChromeless(true);

        AppDomain.CurrentDomain.UnhandledException += (sender, error) =>
        {
        };

        app.Run();
    }
}

启动以后的效果:
image.png
这样就完成了我们的无边框,但是也并不是直接可以使用,你会发现它无法拖动!下面我们将让他可以被拖动

完善无边框拖动

我们需要支持拖动我们的标题栏的时候带动我们的窗口!

下面开始修改代码实现这个逻辑
image.png

我们的标题栏的css的样式是m-app-bar

打开wwwroot/index.html并且修改为以下代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>Gotrays</title>
    <base href="/" />
    <link href="_content/Masa.Blazor/css/masa-blazor.min.css" rel="stylesheet">
    <link href="css/app.css" rel="stylesheet" />
    <link href="Gotrays.styles.css" rel="stylesheet" />
    <link href="https://cdn.masastack.com/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.masastack.com/npm/materialicons/materialicons.css" rel="stylesheet">
    <link href="https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css" rel="stylesheet">
    <style>
        #app .m-app-bar {
            -webkit-app-region: drag;
        }

        html {
            overflow: hidden;
        }
    </style>
</head>

<body>

    <div class="status-bar-safe-area"></div>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">

标签:evt,app,边框,跨平台,pageX,pageY,var,NET,data
From: https://www.cnblogs.com/hejiale010426/p/17440603.html

相关文章

  • 多个相邻元素切换效果出现边框重叠问题的解决方法
    多个相邻按钮切换效果出现边框重叠问题的解决方法下图所示的是一种常见的切换效果,在实现这种切换效果时,经常会遇到相邻按钮边框重叠的问题(查看demo),有没有好的解决方法呢? 所出现的边框重叠问题:目前,很多优秀的UI组件库都有这种切换效果的组件,通过对他们实现方式的学习,现对边框重......
  • linphone-NetworkManger.java文件分析
    功能InterceptnetworkstatechangesandupdatelinphonecorethroughLinphoneManger翻译拦截网络状态的变化,并通过LinphoneManger更新linphone核心内容。NetworkManager.java/**......
  • sockjs.js:1603 GET http://localhost/sockjs-node/info?t=1685340190468 net::ER
    vue项目报错不影响运行,但控制台看到这报错,属实不舒服 解决方法:进入\node_modules\sockjs-client\dist\sockjs.js注释1603行   刷新页面,没报错了 ......
  • Netty实战(七)
    (EventLoop和线程模型)一、什么是线程模型简单地说,线程模型指定了操作系统、编程语言、框架或者应用程序的上下文中的线程管理的关键方面。在早期的Java语言中,我们使用多线程处理的主要方式无非是按需创建和启动新的Thread来执行并发的任务单元,这种在高负载下表现得很原......
  • 记录一次jenkins远程发布github中的net core 项目
    安装jenkinshttps://www.cnblogs.com/YorkQi/p/13658531.html进入jenkins容器dockerexec-it 容器编号bash设置github的sshkey  因为jinkens拉取不能直接用账户密码apt-getupdateapt-getinstallvimssh-keygen-trsa-C"邮箱"PS: /root/.ssh/文件夹下就是你的......
  • docker删除网络报错:Error response from daemon: error while removing network
    在安装harbor发现docker的network已经存在了然后直径ls去查看发现存在如下,然后去rm删除的时候发现删不掉[root@st-test-hemu-harbor-2harbor]<2023052911:37:11>#dockernetworklsNETWORKIDNAMEDRIVERSCOPE35b4409d8f79bridge......
  • Linux 上的 .NET 崩溃了怎么抓 Dump
    一:背景1.讲故事训练营中有朋友问在Linux上如何抓crashdump,在我的系列文章中演示的大多是在Windows平台上,这也没办法要跟着市场走,谁让.NET的主战场在工控和医疗呢,上一张在合肥分享时的一个统计图。这就导致总有零星的朋友问Linux平台上如何生成crashdump,这一......
  • ubuntu22安装docker、redis、mysql及部署net6应用
    一、更新系统软件包索引sudoaptupdate二、安装dockersudoaptinstalldocker.io三、在docker中安装Mysql拉取mysql镜像dockerpullmysql:latest查看镜像dockerimages运行容器dockerrun-itd-p3306:3306-eMYSQL_ROOT_PASSWORD=123456--namemysql......
  • [重读经典论文]RepVGG: Making VGG-style ConvNets Great Again
    1.参考视频:14.1RepVGG网络讲解博客:RepVGG网络简介2.主要内容2.1.与其他网络对比如下图所示,RepVGG无论是在精度还是速度上都已经超过了ResNet、EffcientNet以及ReNeXt等网络。2.2.创新点,结构重参数化在训练时,使用一个类似ResNet-style的多分支模型,而推理时转化成VGG-st......
  • Kubernetes 证书详解(鉴权)
    Kubernetes证书详解(鉴权)简介上一篇系统分析了Kubernetes集群中每个证书的作用和证书认证的原理。对于Kube-apiserver,Kubelet来说,它们都能提供HTTPS服务,Kube-apiserver、Kubelet对于一个请求,既要认证也要鉴权。在Kube-apiserver中,鉴权也有多种方式:NodeABACRBAC......