【MAUI】系统主题方案

news2024/9/22 9:58:34

文章目录

  • 概述
  • 具体
    • AppThemeBinding
    • ResourceDictionary+Application.Current.Resources.MergedDictionaries+DynamicResource
  • 来源

概述

主要有两种:AppThemeBinding 和ResourceDictionary+Application.Current.Resources.MergedDictionaries+DynamicResource

具体

AppThemeBinding

.NET MAUI 应用可以响应 iOS 13 或更高版本、Android 10 (API 29) 或更高版本、macOS 10.14
或更高版本以及 Windows 10 或更高版本上的系统主题更改。

AppThemeBinding 标记扩展使你能够基于当前系统主题使用资源,如图像或颜色。

AppThemeBinding 标记扩展由 AppThemeBindingExtension 类提供支持,该类定义以下属性:

  • Default,类型为 object,用户所设置的默认使用的资源。
  • Light,类型为 object,用户所设置的在设备使用其浅色主题时要使用的资源。
  • Dark,类型为 object,用户所设置的在设备使用其深色主题时要使用的资源。
  • Value,类型为 object,可返回标记扩展当前使用的资源。
<StackLayout>
    <Label Text="This text is green in light mode, and red in dark mode."
           TextColor="{AppThemeBinding Light=Green, Dark=Red}" />
    <Image Source="{AppThemeBinding Light=lightlogo.png, Dark=darklogo.png}" />
</StackLayout>

在 ResourceDictionary 中定义的资源可以在带有 StaticResource 标记扩展的 AppThemeBinding 中使用:

<ContentPage ...>
    <ContentPage.Resources>

        <!-- Light colors -->
        <Color x:Key="LightPrimaryColor">WhiteSmoke</Color>
        <Color x:Key="LightSecondaryColor">Black</Color>

        <!-- Dark colors -->
        <Color x:Key="DarkPrimaryColor">Teal</Color>
        <Color x:Key="DarkSecondaryColor">White</Color>

        <Style x:Key="ButtonStyle"
               TargetType="Button">
            <Setter Property="BackgroundColor"
                    Value="{AppThemeBinding Light={StaticResource LightPrimaryColor}, Dark={StaticResource DarkPrimaryColor}}" />
            <Setter Property="TextColor"
                    Value="{AppThemeBinding Light={StaticResource LightSecondaryColor}, Dark={StaticResource DarkSecondaryColor}}" />
        </Style>

    </ContentPage.Resources>

    <Grid BackgroundColor="{AppThemeBinding Light={StaticResource LightPrimaryColor}, Dark={StaticResource DarkPrimaryColor}}">
      <Button Text="MORE INFO"
              Style="{StaticResource ButtonStyle}" />
    </Grid>    
</ContentPage>

此外,在 ResourceDictionary 中定义的资源也可以在带有 DynamicResource 标记扩展的 AppThemeBinding 中使用:

<ContentPage ...>
    <ContentPage.Resources>
        <Color x:Key="Primary">DarkGray</Color>
        <Color x:Key="Secondary">HotPink</Color>
        <Color x:Key="Tertiary">Yellow</Color>
        <Style x:Key="labelStyle" TargetType="Label">
            <Setter Property="Padding" Value="5"/>
            <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Secondary}, Dark={StaticResource Primary}}" />
            <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={DynamicResource Primary}, Dark={DynamicResource Secondary}}" />
        </Style>
    </ContentPage.Resources>
    <Label x:Name="myLabel"
           Style="{StaticResource labelStyle}"/>
</ContentPage>

.NET MAUI 包含 SetAppThemeColor 和 SetAppTheme 扩展方法,这些方法使 VisualElement 对象能够响应系统主题更改。

SetAppThemeColor 方法允许指定 Color 对象,将基于当前系统主题在目标属性上设置这些对象:

Label label = new Label();
label.SetAppThemeColor(Label.TextColorProperty, Colors.Green, Colors.Red);

在此示例中,当设备使用其浅色主题时,Label 的文本颜色被设置为绿色,当设备使用其深色主题时,文本颜色被设置为红色。

SetAppTheme 方法允许指定 T 对象,将基于当前系统主题在目标属性上设置这些对象:

Image image = new Image();
image.SetAppTheme<FileImageSource>(Image.SourceProperty, "lightlogo.png", "darklogo.png");

可以通过获取 Application.RequestedTheme 属性的值来检测当前系统主题:

AppTheme currentTheme = Application.Current.RequestedTheme;

应用使用的主题可以通过 Application.UserAppTheme 属性(类型为 AppTheme)进行设置,而不管当前运行的是哪个系统主题:

Application.Current.UserAppTheme = AppTheme.Dark;

设备上的系统主题可能会因各种原因而发生更改,具体取决于设备的配置方式。 通过处理 Application.RequestedThemeChanged 事件,可以在系统主题发生更改时通知 .NET MAUI 应用:

Application.Current.RequestedThemeChanged += (s, a) =>
{
    // Respond to the theme change
};

ResourceDictionary+Application.Current.Resources.MergedDictionaries+DynamicResource

基本的原理如下:

  • 定义每个应用主题的ResourceDictionary,每个ResourceDictionary有相同的Key,但值不同。
  • 在根页面App.xaml的资源字典中,引用默认的ResourceDictionary。
  • 使用方式①:直接在页面中,通过DynamicResource扩展标记,引用ResourceDictionary的Key值。
  • 使用方式②:在App.xaml中,定义应用级别的Style,样式值使用DynamicResource扩展标记,引用ResourceDictionary的Key值。页面中,则使用StaticResource扩展标记引用Style。
  • 如需在运行时更改主题,通过后台代码更换ResourceDictionary即可。

一、在Themes文件夹下,创建MAUI的资源字典文件LightTheme.xaml和DarkTheme.xaml
在这里插入图片描述
在这里插入图片描述
二、在根页面App.xaml的资源字典中,引用默认的ResourceDictionary

<Application
    ......>
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
                <!--引用默认主题资源字典LightTheme.xaml-->
                <ResourceDictionary Source="Themes/LightTheme.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

三、在App.xaml中,定义应用级别的Style(非必要)

<Application
    ......>
    <Application.Resources>
        <ResourceDictionary>
            ......
        </ResourceDictionary>
        <!--定义Style,TargetType为Label-->
        <Style x:Key="PrimaryLabelStyle" TargetType="Label">
            <Setter Property="TextColor" Value="{DynamicResource PrimaryTextColor}" />
            <Setter Property="FontSize" Value="25" />
        </Style>
        <Style x:Key="SecondLabelStyle" TargetType="Label">
            <Setter Property="TextColor" Value="{DynamicResource SecondaryTextColor}" />
            <Setter Property="FontSize" Value="30" />
        </Style>
    </Application.Resources>
</Application>

四、在页面中通过DynamicResource扩展标记引用ResourceDictionary的Key值,或通过StaticResource和Style间接引用

<ContentPage
    ......
    BackgroundColor="{DynamicResource PageBackgroundColor}">
    <StackLayout BackgroundColor="{DynamicResource PrimaryColor}">
        <Label Text="直接绑定ResourceDictionary的Key值①" TextColor="{DynamicResource PrimaryTextColor}"/>
        <Label Text="直接绑定ResourceDictionary的Key值②" TextColor="{DynamicResource SecondaryTextColor}"/>
        <Label Text="通过Style间接绑定ResourceDictionary①" Style="{StaticResource PrimaryLabelStyle}"/>
        <Label Text="通过Style间接绑定ResourceDictionary②" Style="{StaticResource PrimaryLabelStyle}"/>
        <Button Text="切换主题" Clicked="Button_Clicked"/>
    </StackLayout>
</ContentPage>

五、通过后台代码切换主题,本案例使用Button的点击事件

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        //获取当前资源字典
        ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries;
        //先将当前资源字典清空,再添回暗黑主题DarkTheme
        if (mergedDictionaries != null)
        {
            mergedDictionaries.Clear();
            mergedDictionaries.Add(new DarkTheme());
        }
    }
}

来源

响应系统主题更改
MAUI新生4.6-主题设置LightTheme&DarkTheme

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1995049.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

视频美颜SDK的核心技术与直播美颜插件的开发详解

本篇文章&#xff0c;小编将深入探讨视频美颜SDK的核心技术以及如何开发高效的直播美颜插件。 一、视频美颜SDK的核心技术 视频美颜SDK的核心在于其实时图像处理能力&#xff0c;它通过一系列复杂的算法&#xff0c;实现对视频图像的增强和优化。以下是几项关键技术&#xff…

【产品推荐】高性能隔离接口芯片——CMT83085

产品概述 CMT83085是华普微精心打造的一款高可靠性隔离接口芯片&#xff0c;它集成了先进的数字隔离技术和RS-485通信接口&#xff0c;即基于数字隔离技术的高可靠性半双工 RS-485 收发器&#xff0c;专为需要高安全性和长距离数据传输的应用场景设计。 该芯片不仅具备出色的…

鸿蒙开发5.0【应用异常处理】运维

应用异常处理 介绍 本示例介绍了通过应用事件打点hiAppEvent获取上一次应用异常信息的方法&#xff0c;主要分为应用崩溃、应用卡死两种。 效果图预览 使用说明 点击构建应用崩溃事件&#xff0c;3s之后应用退出&#xff0c;然后打开应用进入应用异常页面&#xff0c;隔1mi…

Java学习笔记(二十):反射、动态代理、日志、类加载器、xml、单元测试Junit、注解

目录 一、反射 1.1 反射的概述&#xff1a; 1.2 学习反射到底学什么&#xff1f; 1.3 获取字节码文件对象的三种方式 1.4 字节码文件和字节码文件对象 1.5 获取构造方法 1.6 获取构造方法并创建对象 1.7 获取成员变量 1.8 获取成员变量并获取值和修改值 1.9 获取成员…

002集——C#基本语法——C#学习笔记

C# 是一种面向对象的编程语言。在面向对象的程序设计方法中&#xff0c;程序由各种相互交互的对象组成。相同种类的对象通常具有相同的类型&#xff0c;或者说&#xff0c;是在相同的 class 中。 例如&#xff0c;以 Rectangle&#xff08;矩形&#xff09;对象为例。它具有 le…

一文读懂如何选择视频孪生三维建模方式及建模精度等级

导言/INTRODUCTION 三维模型是视频孪生应用的基础&#xff0c;建模方式与模型精度将直接影响到最终孪生场景的呈现和应用效果。各种建模方式和模型精度在成本、场景还原真实度、实施周期方面都有自己的特点&#xff0c;因而有着各自的优劣势和适用场景&#xff0c;同一场景可能…

基于Hadoop的国内手机销售大数据分析与可视化研究【百万数据集】

文章目录 有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主项目介绍 绪论研究背景研究目的研究意义 相关技术理论介绍Hadoop相关理论HIve数据仓库flume组件介绍sqoop组件介绍Pyecharts介绍 数据来源及处理数据介绍数据预处理 Hadoop集群搭建Hadoop全…

安装python+python的基础语法

安装python python2为内置&#xff0c;安装python3----3.6.8 最新安装3.12使用源码安装 1.查看yum源&#xff0c;epel [rootpython01 ~]# yum list installed |grep epel 2.安装python3 [rootpython01 ~]# yum -y install python3 3.查看版本 [rootpython01 ~]# python…

计算机硬件 课程导读

目录 一、老师介绍 二、课程目标 三、课程大纲 一、老师介绍 学问小小谢 我是一个热爱分享知识的人&#xff0c;我深信知识的力量能够启迪思考&#xff0c;丰富生活。 欢迎每一位对知识有渴望的朋友&#xff0c;如果你对我的创作感兴趣&#xff0c;或者我们有着共同的兴趣点&…

vue3组件之间通讯

1. props&#xff0c;实现父组件向子组件通讯。 父组件 &#xff1a;对子组件属性绑定要通讯的数据。 子组件&#xff1a;通过defineProps来进行数据接收。 2. emit&#xff0c;实现子组件向父组件通讯。 子组件&#xff1a;通过emit创建向父组件传递数据事件 父组件&#…

Chromium编译指南2024 - Android篇:环境准备(二)

1.引言 在前面的章节中&#xff0c;我们详细介绍了编译 Chromium for Android 所需的系统和硬件要求。在确保您的开发环境符合这些基本要求后&#xff0c;接下来我们将重点讲解如何具体配置您的开发环境&#xff0c;以便顺利编译 Chromium。本篇文章将涵盖从更改软件源到安装基…

[matlab] 鲸鱼优化算法优化KNN分类器的特征选择

目录 引言 智能优化算法概述 智能优化算法在KNN特征选择中的应用 应用步骤 UCI数据集 鲸鱼优化算法 一、算法背景与原理 二、算法组成与步骤 三、算法特点与优势 四、应用与挑战 代码实现 鲸鱼优化算法 主程序 打印结果 引言 智能优化算法在优化KNN&#xff08;…

5、关于kali搭建vulhub

Vulhub是一个基于Docker和Docker-compose的漏洞靶场环境&#xff0c;所以搭建vulhub分三步&#xff1a; 1、安装docker 2、安装docker-compose 3、安装vulhub 一、安装步骤 1、安装docker 因为kali太久没用&#xff0c;所以需要先更新软件列表最新源 apt-get update 安装do…

C++ vector的基本使用

目录 1. vector的定义 2. 迭代器iterator的使用 3. vector空间增长问题 (1). size与capacity (2). empty与resize与reserve 4. vector的增删查改 (1) . push_back和pop_back (2). find与insert与erase (3). swap与operator[] 5. vector迭代器失效问题 (1). 改变空间 (…

爱玛电动车今年多次抽查不合格:营收增速放缓承压,拟50亿扩产能

《港湾商业观察》廖紫雯 7月26日&#xff0c;市场监管总局发布《2024年上半年电动自行车产品质量国家监督专项抽查结果情况通报》&#xff0c;爱玛电动车五次上榜。 除却一直以来被多次诟病的电动车产品质量问题外&#xff0c;业绩层面上&#xff0c;近两年数据来看&#xff…

从格斗项目的着装和格斗术,理解巴黎奥运会上的拳击、跆拳道、柔道、摔跤之间到底有什么区别?

文章目录 引言I 柔道着装格斗术II 摔跤装备“摔跤耳”格斗术:古典式摔跤和自由式摔跤III 跆拳道装备格斗术等级段位制(“十级九段制”)IV 拳击装备格斗术拳击手小结引言 8月1日巴黎,柔道女子-78公斤级比赛结束,意大利贝兰迪夺得金牌,以色列拉尼尔摘得银牌,中国选手马振昭和…

SAM-Med2D 大模型学习笔记(续):训练自己数据集

1、前言、数据集介绍 SAM-Med2D大模型介绍参考上文&#xff1a;第三章&#xff1a;SAM-Med2D大模型复现-CSDN博客 本文将使用SAM-Med2D大模型训练自己的数据集 关于SAM-Med2D大模型官方demo数据集的介绍上文已经介绍过&#xff0c;这里简单回顾下 其中data_demo为数据集的目…

你的工作环境,选对劳保鞋了吗?守护安全,从脚下开始!

在众多的工作场所中&#xff0c;我们穿梭于不同的工作环境&#xff0c;从繁忙的工厂车间到复杂的建筑工地&#xff0c;再到需要精细操作的实验室……每一步都承载着对安全的期许和对效率的追求。但你是否意识到&#xff0c;脚下那双不起眼的劳保鞋&#xff0c;其实是守护你安全…

洞见优维「全面可观测」:从85%的AI项目败率说起

一直以来&#xff0c;优维都坚信AI有潜力改变运维行业并促进创新&#xff0c;这是我们的A面。但从行业和客户那里&#xff0c;我们所看到的B面也不容忽视。 自从去年底发布优维全面可观测以来&#xff08;点击回顾&#xff09;&#xff0c;我们的团队在服务客户的进程中常常感…

国内下载gradle慢,下载gradle超时问题解决【笔记】

下载gradle超时、慢 修改 找到项目中的gradle-wrapper.properties文件 修改 替换默认下载链接地址 distributionUrlhttps\://services.gradle.org/distributions替换为腾讯或阿里的链接地址 厂商链接阿里https://mirrors.aliyun.com/macports/distfiles/gradle腾讯https://…