当前位置：

社区首页

电脑数码

软件应用

服务软件

文章详情

移动开发：.NET MAUI中自定义主题设置

今天给大家分享.NET MAUI应用中如何自定义主题，提升APP本身个性化设置的能力，让你开发的APP更具有吸引力。感兴趣的朋友可以来学习一下！

一、.NET MAUI主题设置原理

在 .NET MAUI 中，主题是通过一组预定义的样式和资源来实现的。这些资源定义了界面元素的颜色、字体、大小等样式属性。当您改变应用的主题时，实际上是在更改这些资源的值。主题资源存储在 ResourceDictionary 字典中，并可以通过 DynamicResource 或 StaticResource 标记扩展来引用。

二、.NET MAUI主题设置案例

2.1 创建主题文件

首先打开之前的项目MyFirstMauiApp，在根目录创建Themes文件夹。

然后创建两个主题文件，LightTheme.xaml 、DarkTheme.xaml。

选中Themes文件夹，鼠标右键，然后选择新建项。

接着就会打开新建项窗口，左侧选择.NET MAUI ，然后选择如下图ResourceDictionary的文件选项。

同样的创建第二个DarkTheme.xaml 暗黑主题文件。

然后给主题文件设置一些配色方便后续演示使用

LightTheme.xaml 文件内容如下:：

<?xml version="1.0" encoding="utf-8" ?> WhiteWhiteSmokeGreenBlackBlackWhiteGrayTransparent

DarkTheme.xaml 文件内容如下：

<?xml version="1.0" encoding="utf-8" ?> BlackTealRedWhiteWhiteWhiteWhiteSmokeTransparent

注意事项：每个主题文件所包含的键值对数量要保持一致，避免切换主题的时候找不到对应的值。

2.2 修改App.xaml 文件

打开App.xaml 应用全局配置文件

注释掉原来的Colors.xaml、Styles.xaml 要不然后续编译会冲突。

新增Style样式，这里为了演示增加label、button几个样式。

具体路径如下图：

然后MainPage.xaml内容修改如下：

<?xml version="1.0" encoding="utf-8" ?>

然后运行如下：

浅色主题

暗黑主题

2.3 设置默认主题的三种方式

方式一、指定主题文件App.xaml 文件

比如这里指定为浅色主题

具体如下图：

方式二、属性窗口直接设置

首先保证当前打开的是App.xaml文件，然后右下角的属性窗口，找到UserAppTheme属性，下拉可以设置主题。

设置之后会增加UserAppTheme属性。

方式三、通过代码实现

这里打开MainPage.xaml.cs文件，需要先清理之前的资源字典，然后重新添加主题。要不然不生效。

修改MainPage 方法，修改代码后内容如下：

public MainPage() { InitializeComponent(); // 页面加载的时候设置暗黑主题 //获取当前资源字典 ICollection mergedDictionaries = Application.Current.Resources.MergedDictionaries; //先将当前资源字典清空，再添回暗黑主题DarkTheme if (mergedDictionaries != null) { mergedDictionaries.Clear(); mergedDictionaries.Add(new DarkTheme()); } }

具体如下图：

2.4 通过按钮切换主题

新增两个按钮，一个用来切换浅色主题、一个用来切换暗黑主题

MainPage.xaml.cs 按钮点击事件新增如下代码：

/// /// 切换为暗黑主题 /// /// /// private void OnChangeThemeClicked(object sender, EventArgs e) { //获取当前资源字典 ICollection mergedDictionaries = Application.Current.Resources.MergedDictionaries; //先将当前资源字典清空，再添回暗黑主题DarkTheme if (mergedDictionaries != null) { mergedDictionaries.Clear(); mergedDictionaries.Add(new DarkTheme()); } } /// /// 切换为浅色主题 /// /// /// private void OnChangeThemeLightClicked(object sender, EventArgs e) { //获取当前资源字典 ICollection mergedDictionaries = Application.Current.Resources.MergedDictionaries; //先将当前资源字典清空，再添回暗黑主题DarkTheme if (mergedDictionaries != null) { mergedDictionaries.Clear(); mergedDictionaries.Add(new LightTheme()); } }

界面效果如下：