MAUI新生4.5-字体图像集成Font&Image
2023-04-18 15:23:11 时间
一、字体集成:MAUI默认使用OpenSans字体,通过引入新的字体库和图标字体库为案例说明
1、案例的字体库,均在www.iconfont.cn下载
(1)字体库为阿里巴巴普惠体的Thin35,Alibaba_PuHuiTi_2.0_35_Thin_35_Thin.ttf
(2)字体图标库的下载方式详见【三、字体图标下载方式】,将下载的字体图标库重命名为MyIconFont.ttf
2、将字体库ttf文件,复制到ResourcesFonts文件夹下
(1)复制到ResourcesFonts文件夹的ttf字体库,文件属性的生成操作将自动设置为 MauiFont
(2)如果要复制到其它文件夹,或Fonts文件夹下的子文件夹,需要修改两个地方:一是将文件属性的生成操作设置为 MauiFont,二是添加项目属性的<ItemGroup>,如下:
<!--推荐:模板默认设置,载入ResourcesFonts文件夹下的所有ttf字体库--> <ItemGroup> <MauiFont Include="ResourcesFonts*" /> </ItemGroup> <!--载入ResourcesFonts文件夹及其子文件夹下的所有ttf字体库--> <ItemGroup> <MauiFont Include="ResourcesFonts***" /> </ItemGroup> <!--载入ResourcesMyFonts文件夹下的所有ttf字体库--> <ItemGroup> <MauiFont Include="ResourcesMyFonts*" /> </ItemGroup>
3、在MauiProgram.cs入口文件中,注册字体库
public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp<App>() .ConfigureFonts(fonts => { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); //模板默认注册的字体库 fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); //模板默认注册的字体库 fonts.AddFont("MyIconFont.ttf", "MyIconFont"); //注册MyIconFont.ttf字体库,别名为MyIconFont fonts.AddFont("Alibaba_PuHuiTi_2.0_35_Thin_35_Thin.ttf", "AliThin35");//注册Alibaba_PuHuiTi_2.0_35_Thin_35_Thin.ttf字体库,别名为AliThin35 }); #if DEBUG builder.Logging.AddDebug(); #endif return builder.Build(); } }
4、使用字体
<ContentPage ......"> <StackLayout> <!-- ①FontFamily设置字体,使用别名AliThin35; ②FontAttributes设置斜体、加粗等属性 ③FontSize设置字体大小 ④FontAutoScalingEnabled设置文本缩放首选项 --> <Label FontAttributes="Bold,Italic" FontAutoScalingEnabled="True" FontFamily="AliThin35" FontSize="30" Text="字体基本使用" /> <!-- ①通过元素属性设置FontFamily属性 ②OnPlatform为泛型类,实例化时,通过x:TypeArguments设置泛型参数 ③OnPlatform的IList<On>属性,设置不同平台的字体 --> <Label FontSize="30" Text="每个平台使用不一样的字体"> <Label.FontFamily> <OnPlatform x:TypeArguments="x:String"> <On Platform="iOS" Value="OpenSansRegular" /> <On Platform="Android" Value="AliThin35" /> <On Platform="WinUI" Value="OpenSansSemibold" /> </OnPlatform> </Label.FontFamily> </Label> <!-- ①ImageButton的Source属性为ImageSource类型,可以设置字体图标,有ImageSource类型属性的控件,还包括Image等 ②FontFamily设置字体,使用别名MyIconFont ③Glyph设置图标的unicode字符值 ④Size和Color,设置大小和颜色 --> <ImageButton> <ImageButton.Source> <FontImageSource FontFamily="MyIconFont" Glyph="" Size="20" Color="DarkBlue" /> </ImageButton.Source> </ImageButton> </StackLayout> </ContentPage>
二、图像集成
1、基本介绍
- 图像集成的主要功能是,在项目的单个位置指定的图像,可以根据不同平台要求,自动生成不同分辨率的图像,在应用图标、初始画面、导航图标等功能上会使用到。
- 建议使用SVG矢量格式图像,如使用SVG图像,在生成不同平台要求的图像是,会自动转为png图片格式。如在应用中引用图片资源,应将SVG图像的后缀修改为png,如dotnet_bot.svg矢量图,使用时用dotnet_bot.png
- 建议将SVG图像复制到默认的文件夹,如应用图标放到ResourcesAppIcon文件夹下,初始画面放到ResourcesSplash,其它图像放到ResourcesImages,这样系统会将图像属性的生成操作自动设置为相应格式,否则就要手动设置,其中应用图标设置为MauiIcon,初始画面设置为MauiSplashScreen,集成图像设置为MauiImage。
- 为兼容Android,图像名称应使用小写字母,如dotnet_bot.svg
2、基本使用:双击项目,设置项目属性,在ItemGroup元素中,进行图像集成的设置
<ItemGroup> <!-- ①Include属性设置应用图标的背景图 ②ForegroundFile属性设置应用图标的前景图 ③Color重新着色背景 ④TintColor重新着色前景 --> <MauiIcon Include="ResourcesAppIconappicon.svg" ForegroundFile="ResourcesAppIconappiconfg.svg" Color="#512BD4" TintColor="#66B3FF"/> <!-- ①Include设置初始画面,BaseSize设置图像基准大小,Color设置背景色,TintColor添加新的色调 ②通过设置Resize="false",禁止调整矢量图的大小 --> <MauiSplashScreen Include="ResourcesSplashsplash.svg" Color="#512BD4" TintColor="#66B3FF" BaseSize="128,128" /> <!-- ①【Include="ResourcesImages*"】,加载Images文件夹下的所有图像 ②【Update="ResourcesImagesdotnet_bot.svg"】,加载指定图像,BaseSize设置图像基准大小 ③使用dotnet_bot.svg,【<Image Aspect="Center" Source="dotnet_bot.png" />】 --> <MauiImage Include="ResourcesImages*" /> <MauiImage Update="ResourcesImagesdotnet_bot.svg" BaseSize="168,208" /> ...... </ItemGroup>
三、字体图标下载方式(以www.iconfont.cn为例):
1、找到需要的字体图标,并添加入库
2、打开购物车,下载字体代码
3、复制ttf字体到ResourcesFonts文件夹下(建议重命名),并查询字体的unicode字符值
相关文章
- 五分钟搞懂分布式流控算法
- 追溯Ceres-Solver中CostFunction类方法
- LiveData的前世今生
- 阿里创新三维定位地图压缩算法,论文成果入选顶会CVPR 2022
- 突发!Gitee宣布仓库开源必须人工审核,「中国Github」要无了?
- 如何高效构建保险业场景化数据分析体系-承保和理赔
- Clipper: 开源的基于图论框架的鲁棒点云数据关联方法(ICRA2021)
- 手把手教你高效监控ANR
- 阿里副总裁、达摩院副院长金榕被曝离职!AI科学家集体“逃离“大厂…
- 科学家首次将AI元学习引入神经科学,有望提升脑成像精准医疗
- Android Studio的安装(小白教程)
- 美团图神经网络训练框架的实践和探索
- 使用管理员权限打开cmd(命令提示符)的方法 (Windows11)
- vscode开发插件推荐第一节
- vscode开发插件推荐第二节
- 炼丹速度×7!你的Mac电脑也能在PyTorch训练中用GPU加速了
- 石油化工行业智能供应链管理系统解决方案:数智化供应链平台推动企业转型智能化发展
- 命令行工具好不好 通常程序员比较懂命令行
- 如葑:阿里云原生网关Envoy Gateway实践
- vue-router 4 你真的熟练吗?