【Maui】自定义统一色彩样式

文章目录

前言
一、问题描述
二、解决方案
三、软件开发（源码）
- [3.1 消息扩展库](#3.1 消息扩展库)
- [3.2 样式的使用](#3.2 样式的使用)
四、项目展示

前言

.NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架，用于使用 C# 和 XAML 创建本机移动和桌面应用。

使用 .NET MAUI，可从单个共享代码库开发可在 Android、iOS、macOS 和 Windows 上运行的应用。

.NET MAUI 是一款开放源代码应用，是 Xamarin.Forms 的进化版，从移动场景扩展到了桌面场景，并从头重新生成了 UI 控件，以提高性能和可扩展性。如果以前使用过 Xamarin.Forms 来生成跨平台用户界面，那么你会注意到它与 .NET MAUI 有许多相似之处。但也有一些差异。通过使用 .NET MAUI，可使用单个项目创建多平台应用，但如果有必要，可以添加特定于平台的源代码和资源。 .NET MAUI 的主要目的之一是使你能够在单个代码库中实现尽可能多的应用逻辑和 UI 布局。

一、问题描述

Maui缺乏UI库，原生的色彩比较单一，不具有美观性，如何才能自定义设置颜色参数。

二、解决方案

这里我们参考elementUI的色彩库，自定义设置颜色。

三、软件开发（源码）

3.1 消息扩展库

文件名：Colors.xaml

位置：\Resources\Styles

备注：增加以下颜色的值，要求Key不重名。

xml 复制代码

    <Color x:Key="GycBrand">#409EFF</Color>
    <Color x:Key="GycSuccess">#67C23A</Color>
    <Color x:Key="GycWarning">#E6A23C</Color>
    <Color x:Key="GycDanger">#F56C6C</Color>
    <Color x:Key="GycInfo">#909399</Color>
    <Color x:Key="GycMainText">#303133</Color>
    <Color x:Key="GycText">#606266</Color>
    <Color x:Key="GycFrame">#DCDFE6</Color>

3.2 样式的使用

比如我们要修改，按钮的背景色

xml 复制代码

<Button Grid.Column="2" Text="确定" BackgroundColor="{StaticResource GycBrand}" FontSize="Small" Clicked="OnPaperDataClicked" />

四、项目展示

发现按钮颜色变成了我们自定义的，已经变好看了，当然如果存在统一风格，也可以使用模版进行设置，具体可以查看本专栏。