4

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

目标：

由于我对 WPF 还很陌生，我的目标是有一种清晰的方法来设计一个复杂、逼真的 GUI，它独立于屏幕分辨率，并随着用户调整窗口大小而适当地缩放。

混乱的原因：

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

问题：

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

1 > 在 Illustrator 中设计模型（或直接在 Blend 中，我不确定应该使用哪个）

2 > 在 WPF 中通过拖放设计复制它，同时使用（还不知道是哪个）布局设计 1024 x 768 分辨率

3 > 当我的用户启动我的应用程序时，通过做一些数学来获取屏幕大小并调整每个控件的大小（Yukh！这真的是我必须这样做的吗？WPF 独立于分辨率的意义何在，那不是真正的拖动和下降设计是什么？）

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

非常感谢

4

4 回答 4

6

WPF 如此容易独立于分辨率的原因之一是它提供的布局控件。

如果您是 WPF 新手并且还不知道存在哪些布局控件，我强烈建议您查看这个快速的视觉开始，它演示了不同的布局面板以及它们如何调整大小/排列子级。

我构建 GUI 的典型方法是：

  • 在某处绘制布局。我的偏好是在Balsamiq或纸上
  • 找出这种类型的 UI 布局需要哪些面板
  • 键入 XAML 以在 XAML 编辑器中构建它

这里有几点需要注意：

  • 大多数元素在 WPF 中没有绝对大小或位置。WPF 的布局面板通常控制其中元素的大小或位置，因此通常面板用于布局控件，而不是为每个控件指定单独的大小和位置。

  • 不使用拖放 WPF 编辑器。这是因为它经常为您的控件添加不必要的大小、定位和边距，这使您的 XAML 成为阅读和维护的噩梦。最好让面板完成其子元素的大小和定位工作。

这并不意味着您根本无法调整或定位元素，但是通常您设置相对属性来调整大小和定位而不是绝对属性，并让您的面板完成繁重的工作来确定在哪里绘制元素以及有多大制作它们。

对于定位，使用HorizontalAlignment或等相对属性而不是/或 unnaturally largeVerticalAlignment等绝对属性，尽管大多数布局面板会以特定方式处理元素定位，因此大多数元素都不需要这样做。Canvas.TopCanvas.LeftMargins

对于大小调整，这意味着设置MaxHeight或MinWidth代替为您的元素定义一个绝对Height/ Width，或者使用 Grid 的星形大小来将您的元素相对调整到屏幕的百分比。

于 2013-04-16T12:04:00.827 回答
3

在 Illustrator 中设计模型（或直接在 Blend 中，我不确定应该使用哪个）

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

通过 WPF 中的拖放设计复制它，同时使用（还不知道是哪个）布局设计 1024 x 768 分辨率

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

当我的用户启动我的应用程序时，通过做一些数学运算来获取屏幕大小并调整每个控件的大小（Yukh！这真的是我必须要做的吗？WPF 独立于分辨率的意义何在，这不是真正的拖放是设计吗？）

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

不过，您将始终需要记住最小尺寸。显然，您不能指望您的 UI 在 10x10 时仍然看起来不错！您可以使用MinWidth和MinHeight属性来控制它，直到您的Window.

于 2013-04-16T11:58:36.443 回答
3

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

不不，不要手动调整任何东西的大小。使用布局，例如简单的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 中布局的更多提示/示例，请参阅链接。

于 2013-04-16T11:55:38.997 回答
1

我将假设通过“分辨率独立性”，您希望您的应用程序使用所有可用的空间。

有两种主要方法可以做到这一点，一种简单，一种正确;-)

选项 1：缩放 UI

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

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

<Viewbox>
    <RestOfYourUI />
</Viewbox>

优点：

  • 在 WPF 中做起来非常简单
  • 当您想要做的只是处理不同的像素密度（但在厘米/英寸方面仍然相同/相似的屏幕尺寸）时，效果非常好

缺点：

  • 一切都按比例缩放，这意味着文本可以不自然地变大或变小。
  • 并没有真正利用额外的空间来做任何有用的事情——你没有显示比以前更多的信息

选项 2：重新排列 UI

这就是网页设计师所说的“响应式设计”，简单来说就是你修改 UI 的整个布局和内容以匹配当前设备（或屏幕/窗口）的大小和分辨率。

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

  • 使用巧妙的布局容器来处理大小调整。不同面板的调整大小行为是不同的，但是当您想确保使用所有可用空间时，通常可以使用 Grid 和 DockPanel。
  • 按需隐藏和显示元素。检测何时空间有限并移除较少使用的 UI 元素。一个很好的真实示例是 MS Office 中的功能区，当它变得拥挤时，它会调整大小、重新排列并最终删除图标

优点：

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

缺点：

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

就个人而言，我总是选择选项 2，除非在极少数情况下。

于 2013-04-16T12:16:52.467 回答