WPF：对齐标签及其文本框的基线
假设我在标签旁边有一个简单的文本框：
<StackPanel>
<StackPanel Orientation="Horizontal">
<Label Margin="3">MyLabel</Label>
<TextBox Margin="3" Width="100">MyText</TextBox>
</StackPanel>
...
</StackPanel>
这会产生以下结果：
可以看到，MyLabel和MyText的基线没有对齐，看起来很难看。当然，我可以开始调整边距，直到它们匹配，但由于这是一个常见的要求，我确信 WPF 提供了一个更简单、更优雅的解决方案，只是我还没有找到......
Let's say I have a simple TextBox next to a Label:
<StackPanel>
<StackPanel Orientation="Horizontal">
<Label Margin="3">MyLabel</Label>
<TextBox Margin="3" Width="100">MyText</TextBox>
</StackPanel>
...
</StackPanel>
This yields the following result:
As you can see, the base lines of MyLabel and MyText are not aligned, which looks ugly. Of course, I could start playing around with the margins until they match up, but since this is such a common requirement I'm sure that WPF provides a much easier and more elegant solution, which I just haven't found yet...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
我认为，这种行为是由于
TextBox默认为Stretch的垂直对齐方式引起的，这导致它填充可用空间并具有额外的一对文本下方的像素。如果您改用它：...您应该会看到更清晰的结果。
This behaviour is, I think, caused by the fact that the
TextBoxdefaults to a vertical alignment ofStretch, which causes it to fill the available space and have the extra couple of pixels under the text. If you use this instead:... you should see a cleaner result.
你怎么认为？
What do you think?
我在 Kaxaml 中通过以下方式实现了这种外观：
I achieved that look in Kaxaml with:
我知道这是一个旧的答案，但对于那些寻求另一种方式的人来说，这是一个示例，您不需要依赖固定的文本框宽度：
使用 DockPanel 和 .Dock 代替 StackPanel代码>.
事实证明，在网格内部使用时这非常方便。
I know that this is an old answer, but for here's an example for those who seek another way, where you don't need to rely on a fixed textbox width:
Instead of StackPanel, use a DockPanel and
.Dock.This proves to be very handy when used inside a Grid.
这个问题并不像看起来那么微不足道，并且接受的答案缺乏细节。如果您尝试使用控件自定义高度，您会发现问题。
首先，这是 User7116 回答的正确实现。
棘手的部分是这里有两个级别的垂直对齐，因此请了解对齐的工作原理。
当我们为控件指定对齐方式时，我们是在告诉它如何在父容器中定位自己（请参阅文档）。因此，当我们为
TextBox指定VerticalAlignment="Center">时，我们是在告诉它该 TextBox 应在父stackpanel中垂直居中显示。现在，该文本框中的实际文本也可以在该文本框中使用垂直对齐方式！这是第二级，实际上非常棘手，此处给出了答案。
如果您尝试将上面的标签高度也设置为 50，您会发现它们不会再次对齐。这是因为标签现在占据了更大的区域，并且该区域内的文本没有垂直对齐，因此它看起来没有再次对齐。
的代码是：
幸运的是，当控件高度为默认值时（如标签控件），它的高度足以包含文本，因此内部对齐并不重要。但如果有人为这些控件设置自定义高度，它就会发挥作用，并且更好地理解它是如何工作的。
This question is not as trivial as it looks and the accepted answers lacks details. If you try custom heights with the controls, you will see issues.
First, this is the correct implementation as answered by User7116.
The tricky part is that there two level of vertical alignments here so understand how the alignments works.
When we specify alignment for a control, we are telling it how to position itself in the parent container (See documentation). So when we specify
VerticalAlignment="Center">to theTextBoxwe are telling it that this TextBox should appear vertically centered in parentstackpanel.Now the actual text inside that TextBox could also use vertical alignment within that TextBox! This is the 2nd level and actually quite tricky and is answered here.
If you experiment with setting the Label's height above to say 50 as well, you will see they will not align again. This is because Label is now taking larger area and its text inside that area is not vertical aligned so it doesn't look aligned again.
The code for above is:
Luckily when control height is default (like label control), it's just tall enough to contain the text so the inside alignment doesn't matter. But it comes into play if someone is setting custom heights for these controls and its better to understand how this works.
以下是您可以执行此操作的方法：
Here is how you can do this: