我什么时候应该使用 Border over Grid? [英] When should I use Border over Grid?

问题描述

在检查实时可视化树时，Grid 类不会向可视化树添加任何其他元素来使边框外观:

我怀疑它用于创建边框外观的任何机制都与 Border 控件所做的相同(也许它会在合成层中创建一个额外的 Visual).

所以我不太相信更简单"的 Border 控件会更好用，因为看起来 Grid 控件已经非常高效了.我看不到 Grid 控件向可视化树添加任何额外开销的任何证据(与 Border 为实现相同效果所做的相比).

到目前为止，我能想到为什么我应该使用 Border 而不是 Grid 的唯一原因是为了表达意义.很明显 Border 控件的作用是在单个元素周围添加边框.Grid 是一种布局控件，用于在网格内布置子元素(它也有能力在其子元素周围添加边框作为额外奖励).

解决方案

你设计 UI 的第一个问题应该是我需要 Grid 还是其他布局控件 (StackPanel、RelativePanel、Canvas、...)基于每个控件的特定行为(请参阅 MSDN).请注意，在 Grid 旁边，还有 StackPanel 和 RelativePanel 附加了 Border 属性.这些附加属性有助于您无需在 XAML 树中添加另一个冗余"控件来包装布局控件.

为什么 Border 控件不会过时?假设您想要一个围绕图像的边框(它与其他项目一起位于上述任何布局控件内，因此您不能重用布局控件的边框).现在您有 2 个选择:

• 将图像包装在 Border 控件中.
• 将图像包装在 Grid(或其他布局控件)中并滥用附加属性.

我的措辞应该清楚哪一个最好:选择边框控件.一个经验法则是:保持你的视觉树尽可能小.选择最简单的控件来完成任务.将图像放在 Grid 中只是为了在它周围添加边框会增加可视化树的额外开销.

The documentation for the Grid class states:

Starting in Windows 10, Grid defines new border properties that let you draw a border around the Grid without using an additional Border element. The new properties are Grid.BorderBrush, Grid.BorderThickness, Grid.CornerRadius, and Grid.Padding.

Does this make the Border class redundant? Why would I ever want to use a Border if I can do the same thing with a Grid and lay out children in a grid fashion if I so choose?

---

EDIT

I generally agree with Bart's answer, but there's a few things I would like to talk about.

Firstly, other layout controls (like StackPanel) do indeed have Border-like properties such as BorderBrush, BorderThickness and CornerRadius, so Grid isn't the only layout control which gets these new perks. But they are not attached properties provided by the Border class (or have anything to do with the Border class at all).

Secondly, I, too, thought that it would be a overkill to use complex layout control like Grid if I only wanted to add a border to a simple control like an image. But surely these layout controls would be optimized such that any impact to layout rendering speed would be negligible if they only contained a single child without any special layout constraints. So using a Grid instead of a Border shouldn't affect performance when it only has a single child.

Lastly, I decided to find out just how Grid achieves the border appearance. I created a simple Page containing a Grid with a border and a single Rectangle child, like this:

<Grid Background="Red" BorderBrush="Blue" BorderThickness="10">
    <Rectangle Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Fill="Yellow"/>
</Grid>

with the following rendering:

Upon inspecting the live visual tree, the Grid class does not add any additional elements to the visual tree to make the border appearance:

I suspect whatever mechanism it uses to create the border appearance would be the same as what the Border control does (maybe it creates an additional Visual in the composition layer).

So I'm not really convinced that the "simpler" Border control would be better to use because it looks like the Grid control is already quite performant. I can't see any evidence for the Grid control adding any extra overhead to the visual tree (when compared to what a Border would do to achieve the same effect).

So far the only reason I can think of why I should use Border instead of Grid is to express meaning. It's obvious what the Border control does, adds a border around a single element. Grid is a layout control used to lay out child elements within a grid (which, as it so happens, has the ability to add a border around its children too as an added bonus).

解决方案

Your first question designing your UI should be do I need a Grid or another layout control (StackPanel, RelativePanel, Canvas, ...) based on the specific behavior of each control (see MSDN). Note that next to Grid, also StackPanel and RelativePanel have Border attached properties. These attached properties are bonus for you to not add another 'redundant' control in your XAML tree to wrap your layout control in.

Why is the Border control NOT obsolete? Let's say you want a border around an image (which is inside any of the above mentioned layout controls together with other items, so you can't reuse the layout control's border). Now you have 2 options:

• wrap the image in a Border control.
• wrap the image in a Grid (or other layout control) and abuse the attached properties.

My wording should be clear which one is best: pick the Border control. A rule of thumb is: keep your visual tree as small as possible. Opt for the simplest control doing the task. Placing an image in a Grid just for having the border around it adds to much extra overhead in your visual tree.

这篇关于我什么时候应该使用 Border over Grid?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！