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

您所在的位置:网站首页 主题背景颜色 WPF:.Net6框架下,使用Material Design过程中,配色和UI字体模糊的问题

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

2024-07-12 09:24| 来源: 网络整理| 查看: 265

前言

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

WPF使用Material Design

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

问题1:手动配色

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

先上完整的App.xaml 上述代码段落中:

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

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

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

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

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

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

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

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

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

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

方案1 :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"

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3