WPF 中的分辨率独立性如何工作？

How resolution independence work in WPF?

提问by Harsh

This is more out of curiosity. I was studying that WPF applications are resolution independent. Does this means that we need not bother about the monitor resolution size? because being a windows application developer I have faced several challenges making the application compatible to different resolutions.

这更多是出于好奇。我正在研究 WPF 应用程序与分辨率无关。这是否意味着我们不需要担心显示器分辨率大小？因为作为 Windows 应用程序开发人员，我面临着使应用程序兼容不同分辨率的几个挑战。

My question here is how WPF manages the resolution independent property? Do we need to provide ratios in which controls would appear? And how would the quality of the image will be effected if used as background (will it distort in high resolutions or maintain its clarity)?

我的问题是 WPF 如何管理分辨率独立属性？我们是否需要提供出现控件的比率？如果用作背景，将如何影响图像的质量（它会在高分辨率下失真还是保持其清晰度）？

Please help. This can be a deciding factor for a project.

请帮忙。这可能是项目的决定性因素。

采纳答案by Christian Sauer

As far as I know, WPF uses vector graphics for Buttons isntead of Bitmaps like the older WinForms. Due to this, resizizing and adapting to different screen resolutions is easy for WPF. I have no direct experience with Background images etc. but if they are pixel-based I would provide them in a higher resolution than needed in 96 DPI, maybe twice as high? That should guarantee, that they are not looking poor in higher resolutions.

据我所知，WPF 使用矢量图形作为按钮而不是像旧的 WinForms 那样的位图。因此，对于 WPF 来说，调整大小和适应不同的屏幕分辨率很容易。我对背景图像等没有直接经验，但如果它们是基于像素的，我会以比 96 DPI 所需的分辨率更高的分辨率提供它们，也许是两倍？这应该保证，它们在更高分辨率下看起来并不差。

As a practical note: WPF applications are always readable and are looking good on all monitors I have tried so far. But if you use far smaller resolutions to display a program which was developed for bigger resolutions you can run into problems with fixed objects. E.g. defining text boxes to a certain minimal size, which than eats too much of the available screen. So it seems best for me to define as few constraints as possible and test the applications on other monitors before you ship the product simply because it will always be readable but you might find a few problems with usabillity.

作为一个实用的说明：WPF 应用程序始终可读，并且在我迄今为止尝试过的所有显示器上看起来都不错。但是，如果您使用小得多的分辨率来显示为更大分辨率而开发的程序，则可能会遇到固定对象的问题。例如，将文本框定义为某个最小尺寸，这会占用过多的可用屏幕。因此，对我来说，在您发货产品之前定义尽可能少的约束并在其他显示器上测试应用程序似乎是最好的，因为它总是可读的，但您可能会发现一些可用性问题。

回答by peterG

The key thing about WPF and resolution independance is that it uses device independent units and uses this to work correctly with the system dpi setting ( 'Large Fonts' etc); so for example if you are working on a system set to the default 96 dpi, and draw a textbox 96 units wide, WPF knows that this is one logical inch. If you then change the resolution to 144 dpi, WPF will draw the textbox using 144 physical pixels. All the GUI elements scale flawlessly like this. If you try the same thing with a Winforms GUI you will see that it does not scale properly - you end up with big fonts in small textboxes etc

WPF 和分辨率独立性的关键在于它使用设备独立单位，并使用它与系统 dpi 设置（“大字体”等）一起正常工作；因此，例如，如果您在一个设置为默认 96 dpi 的系统上工作，并绘制一个 96 个单位宽的文本框，WPF 知道这是一个逻辑英寸。如果随后将分辨率更改为 144 dpi，WPF 将使用 144 个物理像素绘制文本框。所有的 GUI 元素都像这样完美地缩放。如果你用 Winforms GUI 尝试同样的事情，你会发现它不能正确缩放 - 你最终会在小文本框中使用大字体等

ETA Another way to put this is to clarify what you mean by resolution - I guess 1024 x 768 is really 'screen size in pixels' and the 96dpi is more accurately the actual resolution, and it's changes to this that WPF handles correctly whilst other platforms don't; both Winforms etc and WPF will display correctly if you simply change from 800 x 600 to 1024 x 768.

ETA 另一种表达方式是澄清您所说的分辨率的含义 - 我猜 1024 x 768 确实是“以像素为单位的屏幕尺寸”，而 96dpi 是更准确的实际分辨率，WPF 在其他平台上正确处理这一点的变化别; 如果您简单地从 800 x 600 更改为 1024 x 768，Winforms 等和 WPF 都将正确显示。

回答by Charleh

WPF is vector based and contains a lot of powerful layout features to ensure scaling works nicely on any device (the simple but powerful Gridcontrol is one of my faves here). It basically uses a measurement and arrangement system that ensures that child controls know how much space they have to work with and therefore can size themselves accordingly

WPF 基于矢量并包含许多强大的布局功能，以确保缩放在任何设备上都能很好地工作（简单但强大的Grid控件是我最喜欢的控件之一）。它基本上使用测量和排列系统，确保子控件知道他们必须使用多少空间，因此可以相应地调整自己的大小

Having said that, it is up to the UI designer to ensure that the application layout is scalable, since it is still very possible to create hard-coded fixed, non-fluid layouts by setting explicit sizes etc

话虽如此，确保应用程序布局是可扩展的取决于 UI 设计人员，因为仍然很有可能通过设置显式大小等来创建硬编码的固定、非流动布局

If this does happen, it's possible to scale the entire UI (by using a transforms and other methods) which would have the effect of a zoom in/zoom out depending on if the app is targeting a larger or smaller resolution. This has the disadvantage of making any non-vector content such as bitmaps look blocky or distorted if they are not designed for this scaling

如果发生这种情况，则可以缩放整个 UI（通过使用转换和其他方法），这会产生放大/缩小的效果，具体取决于应用程序的目标是更大或更小的分辨率。这样做的缺点是，如果位图不是为这种缩放而设计的，则它们会使任何非矢量内容（例如位图）看起来块状或扭曲

In conclusion, WPF doesn't manage any resolution independence directly so to speak, but by using a few simple layout concepts it's possible to make a resolution independent UI without resorting to scaling (similar to using anchoring in WinForms...but much better)

总之，可以这么说，WPF 不直接管理任何分辨率独立性，但是通过使用一些简单的布局概念，可以在不求助于缩放的情况下制作分辨率独立的 UI（类似于在 WinForms 中使用锚定......但要好得多）

A small example:

一个小例子：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100">
        <ColumnDefinition Width="auto">
        <ColumnDefinition Width="*">
        <ColumnDefinition Width="2*">
    </Grid.ColumnDefinitions>
</Grid> 

This would create a two column grid layout in which the first column is a fixed width at 100 units, the second column takes up only enough space to fit its child controls and the fourth column takes up proportionately two times the space of the third column. These columns would stretch to completely fill their parent container, be that a small area of the screen or a full window.

这将创建一个两列的网格布局，其中第一列的宽度固定为 100 个单位，第二列只占用足够的空间来容纳其子控件，第四列按比例占用第三列空间的两倍。这些列将拉伸以完全填充其父容器，无论是屏幕的一小部分区域还是整个窗口。

This works by measuring how much available space there is to play with, making the 1st column a fixed 100 units, making the second column the size of the child controls that are in it and then working out what space is remaining and dividing it amongst the other columns based on their ratios. (the number before the asterisk *is the proportion of space each dynamically sized column should take. *on it's own is equivalent to 1*)

这通过测量有多少可用空间来发挥作用，使第一列固定为 100 个单位，使第二列成为其中的子控件的大小，然后计算剩余空间并将其划分为其他列基于它们的比率。（星号前的数字*是每个动态调整大小的列应占用的空间比例。*就其本身而言，相当于1*）

This with the standard Marginand alignment properties allows for almost any layout imaginable...and this is just a single control!

这与标准Margin和对齐属性允许几乎任何可以想象的布局......这只是一个控件！

Edit:

编辑：

I'd probably add that whilst most people don't use silly resolutions it is surprising how many people are still running 1024x768 or running widescreen mid resolution monitors that have a vertical resolution of less than 800 pixels, so the only way to be sure is to test!

我可能会补充一点，虽然大多数人不使用愚蠢的分辨率，但令人惊讶的是有多少人仍在运行 1024x768 或运行垂直分辨率小于 800 像素的宽屏中分辨率显示器，因此唯一确定的方法是去测试！

回答by makc

Question 1: My question here is how WPF manages the resolution independent property?

问题1：我这里的问题是WPF如何管理分辨率独立的属性？

from MSDN:
Resolution-independent and device-independent graphics.The basic unit of measurement in the WPF graphics system is the device independent pixel, which is 1/96th of an inch, regardless of actual screen resolution, and provides the foundation for resolution-independent and device-independent rendering. Each device-independent pixel automatically scales to match the dots-per-inch (dpi) setting of the system it renders on.

来自 MSDN：
分辨率无关和设备无关的图形。WPF 图形系统中的基本度量单位是设备无关像素，即 1/96 英寸，与实际屏幕分辨率无关，为分辨率无关和设备无关的渲染提供基础。每个独立于设备的像素会自动缩放以匹配它呈现的系统的每英寸点数 (dpi) 设置。

Question 2: how would the quality of the image will be effected if used as background (will it distort in high resolutions or maintain its clarity)?

问题 2：如果用作背景，会如何影响图像的质量（它会在高分辨率下失真还是保持其清晰度）？

I guess this would mostly depend on the quality of the given picture. a high quality image wont loose of it clarity while being scaled.

我想这主要取决于给定图片的质量。高质量的图像在缩放时不会失去清晰度。

I would recommend reading the following articles:

我建议阅读以下文章：

Introduction to WPFyou will learn that there is more to wpf than resolution in dependency (DataBinding, layouts, styles, templates, 2D, 3D, animation....)

WPF 简介您将了解到 wpf 不仅仅依赖于分辨率（数据绑定、布局、样式、模板、2D、3D、动画……）

Imaging OverviewWPF Graphics Rendering Overview

图像概述WPF 图形渲染概述