0
0

WPF：.Net6框架下，使用Material Design过程中，配色和UI字体模糊的问题

前言

有关Material Design的使用方法，请自行参考这个链接

WPF使用Material Design

下面，直接上我碰到的问题及解决方式

问题1：手动配色

默认情况下，Material Design是提供了很多主题配色，但难免有些太过“出挑”，不适合工控软件的风格。
所以，下面简单介绍一下手动配色的基础方法：

先上完整的App.xaml

<?xml version="1.0" encoding="UTF-8"?><Applicationx:Class="TooksKit.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:TooksKit"xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"StartupUri="MainWindow.xaml"><Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><!--Material Design UI Package--><ResourceDictionarySource="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml"/><ResourceDictionarySource="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"/><!-- <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Indigo.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Teal.xaml" />--></ResourceDictionary.MergedDictionaries><!--PRIMARY--><SolidColorBrushx:Key="PrimaryHueLightBrush"Color="#4f83cc"/><SolidColorBrushx:Key="PrimaryHueMidBrush"Color="#01579b"/><SolidColorBrushx:Key="PrimaryHueDarkBrush"Color="#002f6c"/><SolidColorBrushx:Key="PrimaryHueLightForegroundBrush"Color="#ffffff"/><SolidColorBrushx:Key="PrimaryHueMidForegroundBrush"Color="#ffffff"/><SolidColorBrushx:Key="PrimaryHueDarkForegroundBrush"Color="#ffffff"/><!--ACCENT--><SolidColorBrushx:Key="SecondaryAccentBrush"Color="#4f83cc"/><SolidColorBrushx:Key="SecondaryAccentForegroundBrush"Color="#4f83cc"/></ResourceDictionary></Application.Resources></Application>

上述代码段落中：

<ResourceDictionarySource="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml"/>

代表采用的是Light主题，可供选择的还有适配夜晚的Dark的深色主题。这个做安卓、苹果的朋友应该更加清楚。
一般选择Light主题就行。

<ResourceDictionarySource="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"/>

代表使用MaterialDesignTheme.Defaults.xaml风格的控件。
注意，这个一般不改，除非你有能力自己二次创作控件UI及事件响应内容。

<ResourceDictionarySource="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Indigo.xaml"/><ResourceDictionarySource="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Teal.xaml"/>

这两行就是指定Theme了，其中Primary是主要的，Accent是辅助。
话虽如此，但是具体使用也是看你自己的xaml View怎么写。有时候就喜欢调用Accent的配色，做个倔强的孩子。
我这里是把这两行注释了，因为将采用自己的深蓝色配色。

<SolidColorBrushx:Key="PrimaryHueLightBrush"Color="#4f83cc"/><SolidColorBrushx:Key="PrimaryHueMidBrush"Color="#01579b"/><SolidColorBrushx:Key="PrimaryHueDarkBrush"Color="#002f6c"/>

上述三行xaml，一般决定了控件的颜色。
在你不指定某个颜色的情况下，系统会默认将UI控件染成“PrimaryHueMidBrush”的颜色。
至于如何手动指定，我后面会用解释。

<SolidColorBrushx:Key="PrimaryHueLightForegroundBrush"Color="#ffffff"/><SolidColorBrushx:Key="PrimaryHueMidForegroundBrush"Color="#ffffff"/><SolidColorBrushx:Key="PrimaryHueDarkForegroundBrush"Color="#ffffff"/>

上述三行代码，决定了这个控件上的文字是什么颜色。
同样的，在你不指定某个颜色的情况下，一般默认使用PrimaryHueMidForegroundBrush的颜色。

请注意他们名称，细心地朋友已经发现，light、mid、dark是两两成对的。

##下面是简单的使用方式：

<GridBackground="{DynamicResource PrimaryHueMidBrush}">

这行代码，就是指定当前的Grid背景色为PrimaryHueMidBrush指定的颜色。

问题2：UI界面、文字模糊

这个问题困扰了两天，经过多方排查，总算是找到了解决方案！

方案1 ：materialDesign:Card 慎用

<materialDesign:Card>
                你的界面内容
            </materialDesign:Card>

这个Card也算是这套UI的特色了吧？
但这玩意儿会导致严重的渲染模糊问题，尤其是在一些工控机上面（缺少运行环境、不联网、系统盗版等等）。
哪怕是使用不依赖框架的打包安装方式，也依旧会存在问题。
在我使用的过程中，自己电脑、同事电脑显示都很正常。
但在工控机上运行时，堪比马赛克画质。
用尽手段都无法修复，直到我开始排查这套UI自身控件渲染的问题，找到了这个罪魁祸首！
原因就是我在MainWindow.xaml 中，将card作为最外层，也就是最底层的画板。
圆角、垫高，虽然好看了，但也模糊了。
只要将它移除，并且，在Xaml编写的过程中，尽可能使用materialDesign的默认Style，也就是不显示指定控件的Style，问题将得到显著改善。
并且：
如果你使用了card，那么后续修复步骤的效果都将受到影响！
所以：
不要用card作为你的底层画布！！！
不要用card作为你的底层画布！！！
不要用card作为你的底层画布！！！
具体原因我也不清楚，有清楚的宝子可以留言告知一下。
至少让我活个明白。

方案2：在 MainWindow.xaml 的开头部分，添加这几行

TextOptions.TextFormattingMode="Display"
TextOptions.TextRenderingMode="ClearType"
UseLayoutRounding="True" 
SnapsToDevicePixels="True"

他们的作用可以自己去查，我这里就不赘述了，毕竟先解决问题，至于为什么，有兴趣的朋友自行了解。
最终得到的结果，像这样子：

<Windowx:Class="DeviceToolsKit.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:DeviceToolsKit"xmlns:pageViews="clr-namespace:DeviceToolsKit.Views"xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"WindowStartupLocation="CenterScreen"WindowState="Maximized"mc:Ignorable="d"Style="{StaticResource MaterialDesignWindow}"xmlns:library="clr-namespace:Library.Common;assembly=Library"FontFamily="{x:Static library:FontHelper.ProjectFontFamily}"TextElement.FontWeight="Normal"TextElement.FontSize="15"TextOptions.TextFormattingMode="Display"TextOptions.TextRenderingMode="ClearType"UseLayoutRounding="True"SnapsToDevicePixels="True">

添加完成后，运行你的项目，字体模糊的情况应该会有改善。
如果效果不明显，别急，老夫还有后续手段！

方案3 中文显示有问题

需要指出的是，material design使用了Roboto字体，这个字体对于中文的支持不是很好。
部分字体会有明显的粗细不均、甚至错字。
所以，我们可以使用静态的字体资源，替换它的默认字体。
方法如下：

步骤1：添加第三方字体

我这里使用的是思源宋体。
这是个开源的字体，可以使用bing去搜索（别用百度，跳出来的全是收费网址）。
它在谷歌的git上可以免费下载。
引入项目后，右键字体文件，设置属性：
在这里插入图片描述

步骤2：添加FontHelper静态类

直接上代码

publicstaticclassFontHelper{[DllImport("kernel32.dll", SetLastError =true)]privatestaticexternintWriteProfileString(string lpszSection,string lpszKeyName,string lpszString);[DllImport("gdi32")]privatestaticexternintAddFontResource(string lpFileName);/// <summary>/// 自动安装UI使用的字体，防止因为字体缺失导致显示问题/// </summary>/// <returns>是否成功安装字体</returns>/// <exception cref="UnauthorizedAccessException">不是管理员运行程序</exception>/// <exception cref="Exception">字体安装失败</exception>publicstaticActionResultAutoInstallFonts(){ActionResult result =newActionResult();
            result.IsSuccess =false;try{var appPath = FileHelper.GetAppDirectory();var subPath ="Resources\\Fonts";var fontFileNames = FileHelper.GetAllFileNames(appPath + subPath);int count =0;foreach(var fontFile in fontFileNames){string fontFilePath = FileHelper.BuildFileFullPath(appPath + subPath, fontFile);System.Security.Principal.WindowsIdentity identity = System.Security.Principal.WindowsIdentity.GetCurrent();System.Security.Principal.WindowsPrincipal principal =newSystem.Security.Principal.WindowsPrincipal(identity);//判断当前登录用户是否为管理员if(principal.IsInRole(System.Security.Principal.WindowsBuiltInRole.Administrator)==false){thrownewUnauthorizedAccessException("当前用户无管理员权限，无法安装字体。");}//获取Windows字体文件夹路径string fontPath = Path.Combine(System.Environment.GetEnvironmentVariable("WINDIR"),"fonts", Path.GetFileName(fontFilePath));//检测系统是否已安装该字体if(!File.Exists(fontPath)){
                        count++;// File.Copy(System.Windows.Forms.Application.StartupPath + "\\font\\" + FontFileName, FontPath); //font是程序目录下放字体的文件夹//将某路径下的字体拷贝到系统字体文件夹下
                        File.Copy(fontFilePath, fontPath);//font是程序目录下放字体的文件夹AddFontResource(fontPath);//Res = SendMessage(HWND_BROADCAST, WM_FONTCHANGE, 0, 0); //WIN7下编译会出错，不清楚什么问题。注释就行了。  //安装字体WriteProfileString("fonts", Path.GetFileNameWithoutExtension(fontFilePath)+"(TrueType)", Path.GetFileName(fontFilePath));}}if(count !=0)
                    result.ValueString =$"总计安装 {count} 款字体。";

                result.IsSuccess =true;return result;}catch(Exception ex){var str =string.Format($"UI字体安装失败！原因：{ex.Message}");
                Log.Error(str);

                result.IsSuccess =false;
                result.ErrorMsg = str;return result;}}publicstaticFontFamily ProjectFontFamily {get;}staticFontHelper(){var fontPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory,@"Resources\Fonts\");
            ProjectFontFamily = new FontFamily(new Uri($"file:///{fontPath}"), "./#Source Han Serif SC");//ProjectFontFamily = new FontFamily(new Uri($"file:///{fontPath}"), "./#Roboto");}}

上述类中，附带了一个安装字体的方法，有需要的朋友可以直接调用。但需要注意字体文件存放的路径。
在这里，我们只用到了ProjectFontFamily 属性。
注意：

  • 需要注意你字体文件的存放路径，我是存放在Resources\Fonts文件夹下的。
var fontPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, @"Resources\Fonts\");
  • 你的第三字体的名称（不是字体的文件名），下方代码的"./#Source Han Serif SC"。可以通过双击字体文件查看。
ProjectFontFamily =newFontFamily(newUri($"file:///{fontPath}"),"./#Source Han Serif SC");

步骤3：使用静态字体

在MainWindow.xaml的开头部分，添加如下代码：

        xmlns:library="clr-namespace:Library.Common;assembly=Library"
        FontFamily="{x:Static library:FontHelper.ProjectFontFamily}"

主要是上方的第二句 FontFamily
我的项目里面，把FontHelper放在了Library类库项目里，所以，需要添加对应的命名空间，然后才能引用。
具体可以往上面翻翻，有完整的MainWindow.xaml 开头代码。

方案3： DPI自适应

如果你已经使用了前两个方案， 那么应该能够解决大部分问题。
但考虑到现在高DPI设备越来越多，而软件运行环境不确定的情况下，DPI自适应很有必要。
步骤如下：

步骤1：你需要一个app.manifest

如果你的项目已经有了这个文件，那么直接跳过这个步骤。
如果没有，那么右键项目，添加，新建项，选择app.manifest
在这里插入图片描述

步骤2：修改DPI感知的内容

双击进入app.manifest，找到有关DPI的部分。
这部分默认是被注释的。
我们直接用下面的代码替换即可。
win7或者win10的初代版本，会自动套用dpiAware 字段。
win10新版及以上，会套用dpiAwareness 字段。

<!-- 指示该应用程序可感知 DPI 且 Windows 在 DPI 较高时将不会对其进行
       自动缩放。Windows Presentation Foundation (WPF)应用程序自动感知 DPI，无需
       选择加入。选择加入此设置的 Windows 窗体应用程序(面向 .NET Framework 4.6)还应
       在其 app.config 中将 "EnableWindowsFormsHighDpiAutoResizing" 设置设置为 "true"。
       
       将应用程序设为感知长路径。请参阅 https://docs.microsoft.com/windows/win32/fileio/maximum-file-path-limitation --><applicationxmlns="urn:schemas-microsoft-com:asm.v3"><windowsSettings><dpiAwarenessxmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">PerMonitorV2</dpiAwareness><dpiAwarexmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">True/PM</dpiAware></windowsSettings></application>

完成上述的“三板斧”，你的项目应该变清晰、适应DPI了。
如果还有问题，那么先确定你的项目框架，然后再去找对应的方法。

总结

Material Design是个好的UI套件。
但在使用的过程中，需要编程人员深入摸索。

标签： wpf .net ui
本文转载自: https://blog.csdn.net/GJ_SO/article/details/131590843
版权归原作者 拆二代的平方 所有， 如有侵权，请联系我们删除。
登录后发布评论

“WPF：.Net6框架下，使用Material Design过程中，配色和UI字体模糊的问题”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

功能安全实战系列-DFA(Dependent Failure Analysis)分析

Apifox接口项目搭建、管理优化方案报告

关于Pycharm 2024 激活出现的问题

VSCode Git Graph 插件使用教程

RabbitMQ 优点和缺点

Kafka 的零拷贝原理

Hadoop的汽车销量数据分析系统

文章导航