Question

首先我要说明一下，是的，这里有大量“与分辨率无关的C＃WPF布局”相关的问题。我的问题与此没有直接关系，我已经阅读了大部分内容，并阅读了几个教程。

目标：

由于我是WPF的新手，我的目标是有一个明确的方法来设计一个独立的屏幕分辨率的复杂，逼真的GUI，并在用户调整窗口大小时适当缩放。

混淆原因：

我对许多教程和stackoverflow帖子建议的大量选项感到困惑，使用Viewbox，流动布局，相对布局，使用不同类型的容器，以及WPF应该是设计独立于分辨率的事实。

问题：

我没有任何打算开始辩论的意图，我知道不是为了那个。我只是想知道我计划用来设计我的真实GUI的这个程序是否正确。

1＆gt;在Illustrator中设计样机（或直接在Blend中设计，我不知道应该使用哪个）

2＆gt;通过拖放和复制来复制它使用（不知道哪个）布局

设计1024 x 768分辨率时，WPF中的丢弃设计

3＆gt;当我的用户启动我的应用程序时，通过做一些数学来获取屏幕大小并调整每个控件的大小（Yukh！这真的是我必须要做的吗？WPF的独立性是什么意思，那不是真正的拖放设计是吗？）

我的大多数应用程序都是数据库驱动的数据输入和操作表单。我使用的是行业中常见的正确策略，还是我错过了什么？

非常感谢

Answer 1

WPF非常容易与分辨率无关的一个原因是它提供了布局控制。

如果您是WPF的新手并且不知道还存在哪些布局控件，我强烈建议您查看this quick visual start，其中演示了不同的布局面板以及它们如何调整/安排他们的孩子。

构建GUI的典型方法是：

在某处绘制布局草图。我的偏好是在Balsamiq或在纸上
找出该类型UI布局所需的面板
键入XAML以在XAML编辑器中构建它

这里有几点需要注意：

大多数元素在WPF中的大小或位置都不是绝对的。 WPF的布局面板通常控制其中元素的大小或位置，因此通常使用面板来布局控件，而不是每个控件都有单独的大小和位置。
不使用拖放WPF编辑器。这是因为它经常为您的控件添加不必要的大小，位置和边距，这使您的XAML成为阅读和维护的噩梦。让小组在确定子项元素的大小和位置方面做得更好。

这并不意味着你根本无法调整元素的大小或位置，但通常你会为尺寸和位置设置相对属性而不是绝对元素，让你的Panel做大量工作来确定绘制元素的位置，和它们有多大。

对于定位，使用HorizontalAlignment或VerticalAlignment等相对属性而不是Canvas.Top / Canvas.Left或非自然大Margins等绝对属性，尽管大多数布局面板负责以特定方式定位元素，因此大多数元素都不需要。

对于尺寸调整，这意味着设置MaxHeight或MinWidth，而不是为您的元素定义绝对Height / Width，或者使用网格的星号尺寸来调整相对大小元素占屏幕的百分比。

Answer 2

3＆gt;当我的用户启动我的应用程序时，获取屏幕大小并调整大小通过做一些数学的每一个控制

不，不，不要手动调整任何大小。使用布局，例如简单的Grid。

您可以定义行和列。例如：

<Grid Margin="5">
    <Grid.ColumnDefinition>
        <ColumnDefinition Height="Auto" />
        <ColumnDefinition Height="20" />
        <ColumnDefinition Height="*" />
    </Grid.RowDefinitions>

    <Label Grid.Row="0" Content="some text" />
    <TextBox Grid.Row="1" />
    <Label Grid.Row="2" />

</Grid>

您有一个自动调整大小的列（即大小将是Label的大小），固定大小的列（20）以及使用所有剩余空间的最后一列。因此，基本上在调整窗口大小时，最后一列的大小将使用更多或更少的空间。

有关WPF中布局的更多提示/示例，请参阅link。

Answer 3

在Illustrator中设计样机（或直接在Blend中设计，我不知道应该使用哪个）

同意，如果那是你滚动的方式。我倾向于直接在VS中做更容易的事情，并在需要时使用Blend。

通过拖动和复制来复制它使用（不知道哪个）布局
设计1024 x 768分辨率时，WPF中的丢弃设计

我仍然不能推荐WPF的设计师。这在2010年非常糟糕。2012年它可能会好得多，但我没有任何理由去尝试，因为我已经习惯于写XAML了。

当我的用户启动我的应用程序时，通过做一些数学来获取屏幕大小并调整每个控件的大小（Yukh！这真的是我必须这样做吗？WPF的独立性是什么意思，那不是真的拖放设计是吗？）

绝对不是。使用WPF's layout system为您完成艰苦的工作。其基础是Panel，它可以决定给孩子提供什么样的空间。 WPF的Grid控件（Panel）非常灵活，允许您为行和列指定比例大小，从而确保您的布局可以合理的方式扩展和收缩。

但是，您始终需要记住最小尺寸。显然你不能指望你的用户界面在10x10时看起来还不错！您可以使用MinWidth和MinHeight属性来控制此项，直至您Window的级别。

Answer 4

我将假设通过“解决方案独立性”，您希望应用程序使用可用的所有空间。

有两种主要方法可以实现这一目标，一种是简单的，一种是正确的; - ）

选项1：缩放UI

使用此选项，您将为用户界面设计固定布局。然后应用缩放变换以确保UI占据整个窗口。

要在WPF中执行此操作，只需将UI中的所有内容包装在Viewbox：

中

<Viewbox>
    <RestOfYourUI />
</Viewbox>

<强>优点：

在WPF中非常简单
当您想要做的只是处理不同的像素密度（但仍以cm /英寸为单位/相似的屏幕尺寸）时，效果非常好。

<强>缺点：

一切都是同等规模的，意味着文字会变得不自然地大或小。
没有真正利用额外空间用于任何有用的东西 - 你没有显示比以前更多的信息

选项2：重新排列UI

这就是网页设计师所说的“responsive design”，只是意味着您修改了UI的整个布局和内容，以匹配当前设备（或屏幕/窗口）的大小和分辨率。

这需要付出更多努力，但最终结果是IMO要好得多。没有任何简单的清单，但实现这一目标的一些技巧是：

使用处理调整大小的聪明的layout containers。对于不同的面板，调整大小的行为是不同的，但是当您想要确保使用所有可用空间时，通常可以使用Grid和DockPanel。
按需隐藏和显示元素。检测空间有限并删除较少使用的UI元素。一个很好的现实世界的例子是MS Office中的功能区，当它变得拥挤时调整大小，重新排列并最终删除图标

<强>优点：

您实际上是在使用屏幕空间来放置新信息

<强>缺点：

需要付出更多的努力才能做到正确。

就个人情况而言，除了极少数情况外，我总是选择2。

我的这种方法是设计WPF UI吗？

4 个答案:

选项1：缩放UI

选项2：重新排列UI