【问题标题】:How to design GUI for different monitor resolutions? [closed]如何为不同的显示器分辨率设计 GUI? [关闭]
【发布时间】:2013-06-28 23:40:31
【问题描述】:

我正在为特殊应用设计和实现 GUI。

我在 C# 上使用 WPF,

我打算将此应用程序应用于不同的显示器分辨率(1366x768 或 1920x1080,...)。

但我对此没有任何经验。我不知道如何实现可以很好地在任何分辨率下显示的灵活 GUI。

谁能给我一些想法?

【问题讨论】:

  • 是的,WPF 最适合这类事情。您不应该准确设置列的高度和宽度。将其设置为自动或 *。那么也许你需要了解 WPF 的基础知识。
  • @Richard Ev:我曾考虑过使用百分比作为大小,或者使用 Auto, * 正如 Dilshod 提到的那样,但我想在开始之前了解更多。
  • 感谢您的建议,Dilshod!
  • 我建议您查看WPF Layouts - A Quick Visual Start。如果您使用适当的布局控件,创建灵活的 GUI 是轻而易举的事。

标签: c# wpf


【解决方案1】:

1 - 手动编写 XAML,不要使用 Visual Studio 设计器。

  • 设计器生成固定大小的固定位置 UI(ala winforms),如果您需要独立于分辨率,则不会有用。

2 - 也不要自己固定 UI 元素的大小和位置。

  • 不要做<TextBox Width="56" Margin="50,30,10,5"/>之类的事情。取而代之的是,将您的 UI 放置在与分辨率无关的布局容器中,例如 GridDockPanel。在您的网格中也使用星号。

编辑:添加@Viv的评论,这非常重要,我决定将其作为答案的一部分:

就像编程中的其他一切一样,对第 1 点持保留态度。不要将它变成另一个语句,例如 “在 MVVM 中,代码隐藏中的任何代码都是错误的”。使用设计器(VS/Blend)来生成模板、修改故事板、VSM、导入 Illustrator/Photoshop 文件是完全合理的。知道你在处理什么,即使在这种情况下你得到恒定的尺寸,也可以相应地调整 xaml 以摆脱它,而不是完全忽略它的各个方面

【讨论】:

  • 太棒了!谢谢你,HighCore!
  • 手工编写 XAML 有很多好处,尤其是在 the XAML designer (XDesProc) locks up periodically 的 VS2012 中。起初它似乎是一个倒退(拖放式 UI 开发在它出现时是一个很大的进步),但即使你习惯了 XAML,它也比 WinForms 更容易和更有效率。
  • @DanBryant 我曾经使用过的每一个 UI 设计师都不应该完全依赖,无论是 WPF、winforms、ASP、纯 HTML(由您选择的编辑器), Java swing 应用程序等。它们在偶尔的情况下可以用来做一些工作,但实际上永远不能完全依赖它们。 UI 设计固有的复杂性对于一般设计师来说太复杂了。
  • 就像编程中的其他一切一样,对第 1 点持保留态度。不要让它成为另一个声明,例如“在代码隐藏中的 MVVM ANY 代码是错误的”。使用 Designer(VS/Blend) 来生成模板、修改情节提要、VSM、导入 Illudtrator/Photoshop 文件是完全合理的。知道你在处理什么,即使在这种情况下你得到恒定的尺寸,相应地调整 xaml 以摆脱它,而不是完全忽略它的各个方面。
  • @Viv 我想更准确的说法是,“不要完全依赖设计师生成的代码”。这可能意味着要么从头开始编写它,要么对设计器生成的代码进行重大更改以解决其弱点。
【解决方案2】:

首先,它在某种程度上取决于应用程序的性质,但是您指定的分辨率在总体方案中并没有太大的不同(如果您将 640x480 与 2560x1600 进行比较,那么您可能会有更大的担忧!),所以很可能,如果您选择了正确的组件,它们会自行组织(或者更恰当地说,操作系统会在幕后组织它们)。

您选择 WPF 的事实意味着您在 UI 元素的渲染方式上拥有极大的灵活性,因为 WPF 本身就是基于矢量的渲染引擎,而不是 Windows 窗体 (GDI/GDI+),后者是 DPI/per - 基于像素的渲染引擎。

但是让我们深入研究一下好吗?

例如,假设您在 Windows 窗体中设计 UI,它需要窗体上的 ToolStrip,然后将所有 1000 个按钮添加到 ToolStrip。好的,在大型显示器上,您可能只会看到全部 1000 个按钮,但在沼泽标准 1080p 显示器上,您可能只会看到其中的 30 个;那么其余的会发生什么? - Windows 会将它们放在 ToolStrip 末尾的子菜单中,以便您仍然可以访问它们,即使它们不在 ToolStrip 的主要(可见)部分。我很确定同样的原则也适用于 WPF,因为您可能会更好地控制事物的渲染和显示方式!

WPF 通过矢量渲染带来的好处是分辨率独立性。这使您可以灵活地决定是否希望将元素呈现为“固定”大小(在任何分辨率下,它将始终使用相同的像素),或者允许引擎根据分辨率动态调整元素大小(在低分辨率元素将使用更少的像素进行渲染,但质量会降低,或者在高分辨率下,元素会使用更多的像素进行渲染,但质量会更高)。

为了帮助您入门,这里有一本来自 SyncFusion 的免费 WPF 电子书(说真的,请查看它们,它们提供了相当多的免费、体面的东西!)

WPF Succinctly

【讨论】:

  • 感谢您的回答!
猜你喜欢
  • 2014-12-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多