[WPF自定义控件库]以Button为例谈谈如何模仿Aero2主题 (2)

可以看出,微软一直以来开放、包容、拥抱多元化的策略,在IE上可以说是完美体现。作为对比我看了看Chrome的类似按钮,统一为32像素,看来有很好地执行Material Design中"所有距离,尺寸都应该是8dp的整数倍"的要求(到处都是8,可以说深得中国人欢心)。

<Rectangle Fill="Gray" /> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> <Button Content="Button" VerticalAlignment="Center" /> <TextBox Text="TextBox" VerticalAlignment="Center" /> <PasswordBox Password="password" VerticalAlignment="Center" /> <ComboBox VerticalAlignment="Center"> <ComboBoxItem Content="ComboBox" IsSelected="True"/> </ComboBox> <DatePicker VerticalAlignment="Center"/> </StackPanel> <Rectangle Fill="Gray" />

[WPF自定义控件库]以Button为例谈谈如何模仿Aero2主题

顺便拿Button与WPF的其它控件、及UWP的相同控件做横向对比,使用相同的XAML产生的UI如上图所示(上为UWP,下为WPF)。可以看出UWP的表单元素基本上完全统一高度,而WPF则根据内容自适应。

总结来说,WPF原生控件通常没有设置具体的尺寸,所以模仿Aero2主题的自定义控件也不应该改变这个行为,只需控件要能够清晰展示数据及容易操作就好(也就是符合基本的UI设计原则)。

我建议在实际项目中根据需要使用样式将按钮的高度统一为24、28、32像素(,因为Windows系统的缩放比例总是5/4(125%)、6/4(150%)、7/4(175%)、8/4(200%),所以尺寸最好是4的倍数,真不吉利)。

3.2 颜色

从Button的控件模板可以看到Button的字体颜色使用了{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}。WPF为系统环境封装了三个类,用于访问系统环境设置:

SystemFonts,包含公开有关字体的系统资源的属性。

SystemColors,包含与系统显示元素相对应的系统颜色、系统画笔和系统资源键。

SystemParameters,包含可用来查询系统设置的属性。

使用方式可以参考资源帮助主题。

这些设置只应用作参考,可以看到Button也只是主要使用了ControlTextBrushKey,Aero2主题有自己的颜色风格,不会跟随系统而改变。

[WPF自定义控件库]以Button为例谈谈如何模仿Aero2主题

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpzyxs.html