首页 > 其他分享 >.NET MAUI 布局

.NET MAUI 布局

时间:2023-12-04 20:22:59浏览次数:27  
标签:布局 元素 FlexLayout MAUI NET WPF

先看一段代码的效果:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:tk="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MauiLayout.MainPage">

    <tk:DockLayout>
        <tk:DockLayout BackgroundColor="Blue"
            tk:DockLayout.DockPosition="Top">
            <Label BackgroundColor="Chocolate"
                Text="Left"
                tk:DockLayout.DockPosition="Left" />
            <Label BackgroundColor="CornflowerBlue"
                Text="Right"
                tk:DockLayout.DockPosition="Right" />
            <Label BackgroundColor="Coral"
                Text="Center" />
        </tk:DockLayout>
        <FlexLayout
            Margin="2"
            Wrap="Wrap">
            <tk:DockLayout BackgroundColor="Beige" 
                MinimumWidthRequest="400"
                Padding="5"
                FlexLayout.Grow=".6" Margin="2">
                <Label BackgroundColor="Aqua" Text="Top" tk:DockLayout.DockPosition="Top" />
                <Label BackgroundColor="BurlyWood"
                    Text="top2" />
                <Editor BackgroundColor="Brown"
                    Margin="5" />
            </tk:DockLayout>
            <tk:DockLayout BackgroundColor="Bisque"
                Padding="5"
                FlexLayout.Grow=".4" Margin="2">
                <Label BackgroundColor="CadetBlue"
                    Text="top" tk:DockLayout.DockPosition="Top" />
                <Editor BackgroundColor="Chartreuse"
                    Margin="5" />
            </tk:DockLayout>
        </FlexLayout>
    </tk:DockLayout>

</ContentPage>

image

这段代码其实可以满足大多数常用布局需求了

这里特别说一下 FlexLayout,这个布局显然在目前的 .NET 中是有问题的,有 Grow 属性的元素有时会在边缘被截断,而且有的元素的分布是有问题的

所以我个人还是更倾向于原来 WPF 里的 DockLayout。这个布局不受 .NET MAUI 原生支持,但是有一个社区支持的 CommunityToolkit.Maui,这里面有 DockLayout,还是很好用的。用法和 WPF 稍微有点区别,但是大差不差。
尤其要注意的是,要把有 DockPosition 属性的元素放在前面,否则这个元素不会显示。比如上面代码第13行的 Right 标签如果放在 Center 的后面,窗口里就不会显示。

顺便说一下,FlexLayout 使用 Wrap="Wrap" 配合 MinimumWidthRequest 属性可以实现自动换行,不过拖拽改变窗口大小的时候这个元素还是会乱掉。

标签:布局,元素,FlexLayout,MAUI,NET,WPF
From: https://www.cnblogs.com/BrandonPei/p/17875860.html

相关文章

  • docker发布ASPNETCore项目 yum
    docker手动发布ASP.NETCore7一、环境准备环节1、准备Linux系统Linux系统-CentOS7---基于虚拟机来安装IP:192.168.1.972、安装docker环境2.1、卸载依赖包$sudoyumremovedocker\docker-client\docker-client-latest\......
  • .net core(微服务学习)-使用Jenkins基于流水线 发布 .net Core代码
    Jenkins是大家常见的CI/CD工具,如果线上需要发布更新代码可以通过jenkins进行操作1.下载Jenkins包首先windows下和Liunx下都可以通过war包进行部署Jenkinsdownloadanddeployment windows启动windows下使用一下命令保存为bat脚本双击即可启动java-jar-Dhudson.mod......
  • Linux发布ASPNetCore 项目 IIS 部署
    Linux系统发布ASP.ENTCore项目Linux系统-CentOS7---基于虚拟机来安装IP:192.168.1.97安装教程链接:https://pan.baidu.com/s/1gI93YwptrWdPKHBh5fLNqQ?pwd=6666提取码:6666我们的ASP.ENTCore应用程序是需要跑在.NETCore环境上面的。所以我们就需要先安装.NETCore......
  • 基于DotNetty实现一个接口自动发布工具 - 通信实现
    基于DotNetty实现通信DotNetty:是微软的Azure团队,使用C#实现的Netty的版本发布。是.NET平台的优秀网络库。项目介绍OpenDeploy.Communication类库项目,是通信相关基础设施层Codec模块实现编码解码Convention模块定义约定,比如抽象的业务Handler,消息载体Ne......
  • MKL.NET:为.NET开发者提供高性能数学计算支持的开源库
    MKL.NET:为.NET开发者提供高性能数学计算支持的开源库编程乐趣​ ​关注他 你经常看TA的内容MKL是英特尔推出的一套功能强大、性能优化的数学库,主要是采用C/C++编写的。今天给大家推荐一个MKL的.Net版本,让我们无需与C/C++打交道,方便我们集成到应......
  • go network poller 一
    网络基础协议架构tcp链接假如需要开发者去实现一套新的网络协议(例如redis的resp),是基于TCP的,那tcp这层的协议,是否需要开发者自己去实现?这层如果自己实现,其实很复杂,会涉及很多算法相关.因此,出现了socket对传输层进行了抽象,开发者不需要关注传输层具体......
  • 基于DotNetty实现一个接口自动发布工具 - 背景篇
    故事背景小公司,单体项目,接口和页面都在一起,生产和测试环境都是Windows服务器和IIS,本地编译完成,把相关的页面和程序集拷贝到服务器上,尤其是涉及到多个页面,一个个页面找到对应的位置,再到服务器上找到对应的位置拷贝进去,甚至还有备份等操作,不胜其烦,因为历史遗留原因,......
  • 基于Kubernetes构建持续集成
    GitLab+Jenkins+Kubernetes1要求:2安装Jenkins环境3安装Gitlab环境4连接Jenkins和Gitlab5配置Jenkins连接maven6配置CI/CD1要求:该公司决定采用GitLab+Jenkins来构建CICD环境,以缩短新功能开发上线周期,及时满足客户的需求,实现DevOps的部分流程,来减轻部署运维的负担,实现......
  • 在net中通过Autofac实现AOP的方法及实例详解
     在本示例中,我们将使用Autofac和AspectC(Autofac.Extras.DynamicProxy2)来演示如何实现AOP(面向切面编程)。我们将创建一个简单的C#控制台应用程序,并应用AOP以解决日志记录的问题。首先,让我们讨论AOP的用途和目标。AOP(面向切面编程)的用途AOP是一种编程范式,旨在解决横切关注点(cro......
  • 在NET8中使用简化的 AddJwtBearer 认证
    开发环境系统版本:win10.NETSDK:NET8开发工具:vscode参考引用:使用dotnetuser-jwts管理开发中的JSONWeb令牌注意:以下示例中的端口、token等需替换成你的环境中的信息创建项目运行以下命令来创建一个空的Web项目,并添加Microsoft.AspNetCore.Authentication.JwtBea......