WPF 客户端经常需要运行在各种不同大小屏幕下,为了显示友好,所以开发的时候都需要考虑响应式设计。

布局往往通过指定比例,而不直接指定准确的大小来实现响应式布局(如 Width="3*" ),但是具体控件的大小(如 Thickness、CornerRadius)就没有开箱即用的响应式功能了,用 viewbox 来包装,比例就跟设计稿不一样了,看起来很怪。

嗐,所以又只能自己开发了!

实现目标

  • 实现类似 css @media 媒体查询类似的功能。
  • 设计稿都是 1920 × 1080 实现的,在 3840 × 2160 下,应该将所有控件的大小,边框放大两倍。
  • 要考虑用户在系统下设定的缩放比例。
  • 同事用起来要舒服,要支持热重载。

实现逻辑

根据屏幕大小和屏幕缩放比例来计算缩放系数。

  • 屏幕的 api 当然是白嫖别人写的库啦,我这里用的是 WpfScreenHelper。
public static class AppExtension
{
private static double? _factor; /// <summary>
/// 获取当前应用的缩放系数
/// 如果 4K 屏幕,需要放大 2 倍
/// </summary>
/// <param name="app"></param>
/// <returns></returns>
public static double GetFactor(this Application app)
{
if (_factor is not null) return _factor.Value; var screen = app.MainWindow?.GetScreen() ?? throw new ArgumentNullException(nameof(app.MainWindow));
_factor = screen.PixelBounds switch
{
{ Width: >= 3840, Height: >= 2160 } => screen.ScaleFactor / 2,
_ => screen.ScaleFactor
}; Debug.WriteLine($"屏幕大小: {screen.PixelBounds.Width} × {screen.PixelBounds.Height}");
Debug.WriteLine($"屏幕缩放: {screen.ScaleFactor * 100}%"); return _factor.Value;
} /// <summary>
/// 根据屏幕大小和缩放系统,转换不同的数据类型
/// </summary>
/// <param name="app"></param>
/// <param name="o"></param>
/// <returns></returns>
/// <exception cref="NotSupportedException"></exception>
public static object ConvertForScreen(this Application app, object o) =>
o switch
{
double d => app.ConvertDoubleForScreen(d),
Thickness t => app.ConvertThicknessForScreen(t),
CornerRadius t => app.ConvertCornerRadiusForScreen(t),
_ => throw new NotSupportedException("不支持的转换类型")
}; public static double ConvertDoubleForScreen(this Application app, double value)
{
var factor = app.GetFactor();
return value / factor;
} public static Thickness ConvertThicknessForScreen(this Application app, Thickness value)
{
var factor = app.GetFactor();
return new Thickness(value.Left / factor, value.Top / factor, value.Right / factor, value.Bottom / factor);
} public static CornerRadius ConvertCornerRadiusForScreen(this Application app, CornerRadius value)
{
var factor = app.GetFactor();
return new CornerRadius(value.TopLeft / factor, value.TopRight / factor, value.BottomRight / factor,
value.BottomLeft / factor);
} /// <summary>
/// 获取当前窗体所在的屏幕
/// </summary>
/// <param name="window">当前窗体</param>
/// <returns>窗体所在的屏幕</returns>
public static Screen GetScreen(this Window window)
{
var intPtr = new WindowInteropHelper(window).Handle; //获取当前窗口的句柄
return Screen.FromHandle(intPtr); //获取当前屏幕
}
}

自定义 xaml 标记

  • 适配 Setter 上赋值和直接在控件上赋值的场景。
  • 通过各种转换器来转换值。
public class ResponsiveSizeExtension : MarkupExtension
{
private static readonly Lazy<DoubleConverter> _lazyDouble = new();
private static readonly Lazy<ThicknessConverter> _lazyThickness = new();
private static readonly Lazy<CornerRadiusConverter> _lazyCornerRadius = new(); private DoubleConverter _doubleConverter => _lazyDouble.Value;
private ThicknessConverter _thickConvert => _lazyThickness.Value;
private CornerRadiusConverter _cornerRadiusConvert => _lazyCornerRadius.Value; [ConstructorArgument("value")]
public object Value { get; set; } public ResponsiveSizeExtension(object value)
{
if (value is string s && string.IsNullOrWhiteSpace(s)) value = "0";
Value = value;
} public override object ProvideValue(IServiceProvider serviceProvider)
{
var target = (IProvideValueTarget)serviceProvider;
var type = target switch
{
{ TargetObject: Setter setter } => setter.Property.PropertyType,
{ TargetProperty: DependencyProperty dp } => dp.PropertyType,
_ => throw new NotSupportedException($"不是 Setter 对象或者依赖属性")
}; TypeConverter converter = type switch
{
not null when type == typeof(double) => _doubleConverter,
not null when type == typeof(Thickness) => _thickConvert,
not null when type == typeof(CornerRadius) => _cornerRadiusConvert,
_ => throw new NotSupportedException($"{type} 类型不支持")
}; var originValue = converter.ConvertFrom(Value) ?? throw new ArgumentException(nameof(Value));
var newValue = Application.Current.ConvertForScreen(originValue);
PrintLog(originValue, newValue);
return newValue;
} private void PrintLog(object originValue, object newValue) => Debug.WriteLine($"originValue: {originValue}, newValue: {newValue}, factor: {Application.Current.GetFactor()}");
}

使用

<Window
...
xmlns:local="clr-namespace:Responsive" >
<Window.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="{local:ResponsiveSize 19}" />
</Style>
</Window.Resources> <Border
Margin="50"
BorderBrush="LightSeaGreen"
BorderThickness="{local:ResponsiveSize 12}">
<Grid Width="{local:ResponsiveSize 200}" Background="LightBlue">
<TextBlock Text="Test" />
</Grid>
</Border>
</Window>

效果


屏幕大小: 1920 × 1080
屏幕缩放: 100%
originValue: 12,12,12,12, newValue: 12,12,12,12, factor: 1
originValue: 200, newValue: 200, factor: 1
originValue: 16, newValue: 16, factor: 1 屏幕大小: 3840 × 2160
屏幕缩放: 100%
originValue: 12,12,12,12, newValue: 24,24,24,24, factor: 0.5
originValue: 200, newValue: 400, factor: 0.5
originValue: 16, newValue: 32, factor: 0.5 屏幕大小: 3840 × 2160
屏幕缩放: 150%
originValue: 12,12,12,12, newValue: 16,16,16,16, factor: 0.75
originValue: 200, newValue: 266.6666666666667, factor: 0.75
originValue: 16, newValue: 21.333333333333332, factor: 0.75

最后

响应式设计在 WPF 应该还有很多实现方法,有方便的思路请留言教教我!

用模式匹配写逻辑是真舒服,建议大家都试试,代码简单又明了。

觉得对你有帮助点个推荐或者留言交流一下呗!

源码 https://github.com/yijidao/blog/tree/master/WPF/Responsive

通过媒体查询来实现 WPF 响应式设计的更多相关文章

  1. 怎样使用CSS3媒体查询(Media Queries)制作响应式网站

    自本周开始博主将开始同大家一起研究响应式web设计,CSS3 Media Queries是入门,本周更新,博主将给大家分享media queries的一些常用的用法及注意事项. Media Queri ...

  2. 关于媒体查询 @Media Screen 与响应式

    其实CSS2中已经有了媒体查询的概念,但是CSS3中媒体查询功能更加的强大! 首先,我们来看一个小例子 设置媒体查询的 Max Width ,改变窗口大小到600px的时候就会触发一下代码: @med ...

  3. 响应式设计的思考:媒体查询(media query)

    Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使 ...

  4. 【media-queries】媒体查询,为了响应式设计而生

    目录 简介 语法 常用尺寸 一 简介 针对现在纷杂的设备,css3中加入,可以查询你的浏览类型(screen彩色屏幕, print, all)和css属性判断. 最常用的就是查询屏幕大小,给予适合的展 ...

  5. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

  6. HTML5、CSS3响应式设计——笔记

    1.1.响应式网页设计 响应式网页设计(RWD,Responsive Web Design)这个术语,由伊桑·马科特(EthanMarcotte)提出.他在A List Apart 发表了一篇开创性的 ...

  7. web设计经验<一> 提升移动设备响应式设计的8个建议

    今天看到一些关于web设计的一些建议和设计经验,拿出来分享分享. 第一篇: 提升移动设备响应式设计的8个建议 一.直观性和易用性 在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体 ...

  8. 前端响应式设计中@media等的相关运用

    现在做前端响应式网站特别,响应式成为现在前端设计一个热点,它成为热点的最主要的原因就是,移动端设备屏幕的种类多样,那么如何设置响应式屏幕. /*打印样式*/ @mediaprint{color:red ...

  9. CSS 响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

随机推荐

  1. Markdown学习——Typora入门之常用操作语法及其快捷键

    Markdown 学习--Typora入门 Markdown是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档. 由于Markdown的轻 ...

  2. opencvsharp 根据row方向和面积筛选连通域的两种方式

    ConnectedComponents cc = Cv2.ConnectedComponentsEx(tempMat);//相当于halcon的connection获取全部连通域 int blobnu ...

  3. git删除误传的.idea文件

    问题: 提交项目的时候忘记添加.gitignore文件,误上传了文件(如.idea)如何解决?如何删除Gitee地址上项目的.idea文件?(本文以.idea文件夹举例) 拉取项目 拉取项目 git ...

  4. Servlet Servlet的装载三种情况

    感谢原文作者:DaleyDC 原文链接:https://blog.csdn.net/sinat_32873711/article/details/53170342 Servlet的装载三种情况: 自动 ...

  5. 常用获取inflate的写法

    1.             //context:上下文, resource:要转换成view对象的layout的id, root:将layout用root(ViewGroup)包一层作为codify ...

  6. 稳住,传输层里的TCP与UDP协议

    传输层协议 1.TCP协议介绍及报文格式 2.TCP三次握手三次挥手 3.UDP协议介绍 1.传输层有两个协议:TCP(传输控制协议)  UDP(用户数据协议) . TCP是面向连接的,可靠的进程到进 ...

  7. MySQL5.7 库、表结构、表字段的查询、更改操作

    1.查询所有数据库 SHOW DATABASES; 2.查询库中所有表 写法1: ① USE [DATABASE_NAME]; ② SHOW TABLES; 写法2: SHOW TABLES FROM ...

  8. fork_join

    在systemverilog中可以用fork-- join.fork --join_any.fork--join_none来实现多个线程的并发执行. 1.父线程.子线程 调用fork--join的线程 ...

  9. LinuxCPU性能工具总结

    一.根据性能指标找工具 二.根据工具查性能指标

  10. 都 2022 了,还不抓紧学 typeScript ?

    Hi,我是前端人,今日与君共勉! 本篇文章主要介绍的是什么是 typeScript ? typeScript 与 javaScript 有什么关系呢?我们为什么要学习 typeScript ? 一.什 ...