12 2022 档案

摘要:MAUI的Shell导航框架,也是以路由方式进行导航,并提供了两套导航方式,一是如前面章节所述的视觉层次结构,会自动建立导航路由,可以进行不同层次页面的导航切换;二是为页面手动注册路由,并执行代码导航。 一、注册路由 1、视觉层次结构页面的路由注册 在视觉层次结构中(Shell > FlyoutIt 阅读全文
posted @ 2022-12-31 23:52 functionMC 阅读(3743) 评论(1) 推荐(1) 编辑
摘要:ShellContent是Shell视觉层次结构中,最终承载内容页的构件,Shell > FlyoutItem|TabBar > Tab > ShellContent > View。 一、按需加载内容页和应用启动时加载内容页 1、按需加载内容页。导航发生时,才加载内容页,按需创建。 【<ShellC 阅读全文
posted @ 2022-12-31 13:18 functionMC 阅读(1146) 评论(0) 推荐(0) 编辑
摘要:一、TabBar的基本使用: 如果只需要底部Tab栏导航,则应使用TabBar。TabBar的使用,和FlyoutItem基本相同,如下图所示: 二、底部Tab栏的样式设置 Shell.TabBarBackgroundColor:设置在Shell或TabBar上,Tab栏背景色 Shell.TabB 阅读全文
posted @ 2022-12-29 22:25 functionMC 阅读(2529) 评论(2) 推荐(0) 编辑
摘要:如前章所述,Shell导航框架,在UI层面,有两种导航方式,一是浮出控件导航,二是底部Tab栏导航,本章节将深入学习浮出控件导航。浮出控件提供了非常丰富的定制功能,组成部分如下图所示: 一、Header/Footer页头和页尾设置(Header和Footer的使用方式一样) 1、通过DataTemp 阅读全文
posted @ 2022-12-28 22:09 functionMC 阅读(1758) 评论(0) 推荐(1) 编辑
摘要:一、RadioButton,单选框分组和选定值 <!--RadioButton的使用案例--> <ContentPage ...... xmlns:vm="clr-namespace:MauiApp15.ViewModels"> <!--实例化ViewModel,并设置为BindingContext 阅读全文
posted @ 2022-12-28 16:28 functionMC 阅读(857) 评论(0) 推荐(0) 编辑
摘要:一、Shell介绍 MAUI内置了一套导航框架Shell,主要提供了三类功能:视觉层次结构、路由导航、搜索框。其中视觉层次结构从文字上不是很好理解,可以认为是一套导航菜单系统,具有一定的外观样式和层次结构,且可以进行导航跳转。MAUI定义了三层视觉结构对象,第一层为FlyoutItem或TabBar 阅读全文
posted @ 2022-12-25 17:16 functionMC 阅读(2248) 评论(0) 推荐(1) 编辑
摘要:一、FlexLayout弹性布局 1、FlexLayout弹性布局,和前端的Flex弹性布局,几乎一样。FlexLayout是容器,可以定义Direction/主轴方向、Wrap/子元素在主轴方向上是否换行/列、JustityContent/AlignItems/AlignContent子元素整体对 阅读全文
posted @ 2022-12-24 21:31 functionMC 阅读(1189) 评论(0) 推荐(2) 编辑
摘要:通过主题设置,可以在运行时更改应用的主题外观,比如切换亮色主题和暗黑主题。主题设置并没有新的知识点,基本的原理如下: 定义每个应用主题的ResourceDictionary,每个ResourceDictionary有相同的Key,但值不同。 在根页面App.xaml的资源字典中,引用默认的Resou 阅读全文
posted @ 2022-12-22 22:45 functionMC 阅读(1221) 评论(0) 推荐(1) 编辑
摘要:一、字体集成:MAUI默认使用OpenSans字体,通过引入新的字体库和图标字体库为案例说明 1、案例的字体库,均在www.iconfont.cn下载 (1)字体库为阿里巴巴普惠体的Thin35,Alibaba_PuHuiTi_2.0_35_Thin_35_Thin.ttf (2)字体图标库的下载方 阅读全文
posted @ 2022-12-22 21:51 functionMC 阅读(1172) 评论(0) 推荐(0) 编辑
摘要:Brush用于定义控件的外轮廓、背景等属性的值,是为属性赋值的。如Shape类控件的Stroke或Fill属性、Border控件的Stroke属性、Shadow的Brush属性、VisualElement派生类控件的Background属性等,同时在MAUI的Microsoft.Maui.Graph 阅读全文
posted @ 2022-12-20 23:18 functionMC 阅读(434) 评论(0) 推荐(0) 编辑
摘要:一、MAUI控件分类及使用技巧 1、根据控件的功能特点,以及个人的习惯,我将MAUI的控件划分为以下几个大类: 页面类; 布局类; 单一内容类; 集合内容类; 表单类; 容器类 形状类; 窗口类; 辅助功能类,如动画、手势、可访问性等; 2、在MAUI的UI界面设计中,大概遵循以下步骤: 确定页面的 阅读全文
posted @ 2022-12-20 10:27 functionMC 阅读(8253) 评论(1) 推荐(6) 编辑
摘要:目前请求WebAPI主要有两种方式,一是HTTP请求,二是gRPC请求。本章节主要介绍HTTP请求,Blazor中使用HttpClientFactory,Vue中使用Axios,前后端通用,即可用于客户端向服务端发送请求,也可用于服务端向服务端发送请求。在正式学习HttpClientFactory和 阅读全文
posted @ 2022-12-18 14:47 functionMC 阅读(809) 评论(0) 推荐(0) 编辑
摘要:MAUI的触发器,提供了在运行时动态更改控件样式的方法。在Blazor或Vue中,可以通过三元表达式或绑定class来轻松实现,而MAUI则相对麻烦些,需要通过触发器来实现。触发器,其实就是控件的一个属性,只要是可视化控件,都带有一个Triggers集合属性,在这个集合属性中,可以设置多个Trigg 阅读全文
posted @ 2022-12-18 14:02 functionMC 阅读(932) 评论(0) 推荐(0) 编辑
摘要:路由守卫,可以认为是设置在导航源和目标之间的中间件。Vue在代码上,表现为命名约定的钩子(类似于生命周期钩子),而Blazor会更复杂一些。Vue Router的路由守卫功能非常完善,而Blazor则相对简陋。同时,Blazor的路由守卫需要结合生命周期函数和事件,使用起来反而更加复杂。 一、Vue 阅读全文
posted @ 2022-12-15 23:43 functionMC 阅读(951) 评论(0) 推荐(2) 编辑
摘要:客户端路由传参,主要通过两种方式:(1)路径参数(route),如/student-detial/1,其中/student为路由,1为传递的参数;(2)查询参数(query),如/student-detail?id=1&name=zs&age=18&sex=男。路径参数适合传递简单的值参数,查询参数 阅读全文
posted @ 2022-12-11 00:25 functionMC 阅读(635) 评论(0) 推荐(0) 编辑
摘要:导航除了使用组件外(Blazor使用NavLink,Vue使用router-link或RouterLink),更多的时候,主要还是使用代码进行导航,更加灵活。Blazor提供了 NavigationManager对象,可以在代码层进行导航操作;而Vue提供了router和route对象。router 阅读全文
posted @ 2022-12-10 17:50 functionMC 阅读(475) 评论(0) 推荐(0) 编辑
摘要:单文件组件框架中,当更改请求地址时,并不会引发页面跳转,而是由框架捕获请求地址(在框架中我们称之为路由),然后根据路由与组件的映射关系,在页面的指定位置切换和显示组件。在哪个位置显示(称之为路由出口),就是布局要解决的问题。无论是Vue,还是Blazor,我们都能以母版页的方式来理解和使用布局。母版 阅读全文
posted @ 2022-12-10 16:32 functionMC 阅读(1064) 评论(0) 推荐(0) 编辑
摘要:(当前版本V7.0.94,VisualState有bug) 控件状态指控件当前处于什么使用状态,如禁用、聚焦、鼠标悬停等等,当控件进入到某种状态时,可以通过【附加属性】【VisualStateManager.VisualStateGroups】设置特定的样式。VisualStateManager.V 阅读全文
posted @ 2022-12-09 22:28 functionMC 阅读(965) 评论(0) 推荐(0) 编辑
摘要:通过行为Behavior,可以将功能附加到控件上,而不需要在宿主控件上定义,和扩展方法有异曲同功之妙。在MAUI中实现Behavior,有两种方式:①附加行为;②MAUI内置行为。附加行为,通过附加属性方式实现,可以深入理解行为的内在原理;而MAUI的内置行为,封装了实现细节,使用起来非常简洁。 一 阅读全文
posted @ 2022-12-08 22:39 functionMC 阅读(732) 评论(0) 推荐(0) 编辑
摘要:数据模板主要作用是定义集合类控件的数据显示外观,和前面几个章节自定义控件的关系不大。数据模板本质上是定义集合的每一个迭代对象的UI,和Vue的v-for或Blazor的foreach类似。数据模板可以直接在控件内部定义(内联数据模板),也可以定义在控件级、页面级或应用级的资源字典中。 一、内联 数据 阅读全文
posted @ 2022-12-06 22:29 functionMC 阅读(723) 评论(0) 推荐(0) 编辑
摘要:如本章前两节所述,可绑定属性仅仅定义了控件的数据状态,在UI层面并没有实际意义。要实现一个完整的UI控件,还需要使用控件模板来创建外观样式。如果从Vue或Blazor的组件化来理解自定义控件,逻辑会清晰很多,可绑定属性定义逻辑层的数据,控件模板定义样式层的DOM结构。控件模板的写法比较灵活,即可以是 阅读全文
posted @ 2022-12-05 23:23 functionMC 阅读(1384) 评论(2) 推荐(0) 编辑
摘要:Blazor和Vue都是单文件组件SPA,路由的实现逻辑非常相似,页面路径的改变都是组件的切换,但因为各自语言的特性,在实现方式上有较大差异。 一、安装 1、Vue:Router是Vue的一个插件。如果使用Vite脚手架初始化项目,需要手动安装和配置Router插件。如果使用Vue脚手架初始化项目, 阅读全文
posted @ 2022-12-04 20:12 functionMC 阅读(1350) 评论(0) 推荐(3) 编辑
摘要:可绑定属性在宿主类上定义,并在XAML文件中的宿主类元素上使用,我们使用的大多数属性都是如此,如【<Grid BackgroundColor="AliceBlue"></Grid>】,可绑定属性BackgroundColor,在宿主类Grid上定义,并在宿主元素<Grid>上使用。 附加属性,也属于 阅读全文
posted @ 2022-12-04 16:26 functionMC 阅读(345) 评论(0) 推荐(0) 编辑
摘要:可绑定属性BindableProperty是MAUI框架的基石之一,一方面它是UI控件的数据载体(控件模板和数据模板是UI的外观载体),另一方面提供了数据绑定的通道接口。可绑定属性相对于一般的对象属性,提供了XAML特有的功能,如:①可以作为数据绑定的目标或源、②可以通过Style设置、③可以设置默 阅读全文
posted @ 2022-12-03 21:45 functionMC 阅读(848) 评论(0) 推荐(2) 编辑
摘要:当两个对象之间需要建立松耦合关系时,特别适合使用消息机制。如ViewModel需要控制View进行某些操作时,如弹出对话框、播放动画,由于ViewModel对View是无感的,我们不能在ViewModel中去操作View,否则会造成ViewModel对View的依赖。另外,ViewModel层之间、 阅读全文
posted @ 2022-12-02 00:14 functionMC 阅读(1389) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示