如何使扩展器控件悬停在下一个元素上? [英] How to make an expander control hover over the next element?

问题描述

在以下示例中，直到最近我才注意到扩展器中列出的元素列表增加(以至于其长度超过了其旁边面板中按钮的长度)时，它没有并没有像直觉上期望的那样将鼠标悬停在数据网格上.而是将其向下推，使整个GUI在垂直方向上显得跳动.

In my setup exemplified below, I didn't notice until recently that when the list of elements listed in the expander grows (so that the length of it exceeds the length of the buttons in the panel next to it), it doesn't hover over the data grid, as intuitively expected. Instead, it pushes it down which makes the whole GUI to appear jumpy vertically.

<StackPanel>
  <StackPanel Orientation="Horizontal">
    <StackPanel>
      <Expander>...</Expander>
    </StackPanel>
    <StackPanel>
      <Button ... /><Button ... /><Button ... />
    </StackPanel>
  </StackPanel>
  <StackPanel Orientation="Horizontal">
    <DataGrid ... />
  </StackPanel>
</StackPanel>

解决此问题的一种方法是将所有内容放入网格的同一单元中，最后添加扩展器.但是，在我看来，这在几个层面上都是不合适的.相反，我宁愿强制Expander在其他控件上上方非接触式展开.它应该影响布局，但仅影响折叠状态的大小.扩展完全不会影响布局.

One way to fix this is to put everything in the same cell in a grid and add the expander last. However, that seems to me inappropriate on several levels. Instead, I'd prefer to force expander to expand touchlessly above the other controls. It should affect the layout but only its size from the folded state. The expansion should not affect the layout at all.

我怎么能告诉愚蠢的扩展器不要那么急躁?

How can I tell the stupid expander not to be so pushy?

推荐答案

供参考，让我们对原始XAML中的StackPanel元素进行编号:

For reference, let's number the StackPanel elements from your original XAML:

<StackPanel #1>
    <StackPanel #2 Orientation="Horizontal">
        <StackPanel #3>
            <Expander>...</Expander>
        </StackPanel>
        <StackPanel #4>
            <Button ... /><Button ... /><Button ... />
        </StackPanel>
    </StackPanel>
    <StackPanel #5 Orientation="Horizontal">
        <DataGrid ... />
    </StackPanel>
</StackPanel>

StackPanel当水平放置时，会将其高度设置为其最高子项的高度，而垂直放置时将其高度设置为其高度的所有孩子们的身高.

A StackPanel when oriented horizontally will set its height to that of its tallest child, and when oriented vertically will set its height to the sum of all of its children's heights.

展开Expander控件时，将增加其高度，因此会增加其容器的高度(#3).这反过来可能会或可能不会增加#3的父容器(#2)的高度，具体取决于扩展器的高度是否大于包含按钮的堆栈面板(#4)的高度.

When you expand the Expander control, you increase its height, and therefore you increase the height of its container (#3). This in turn may or may not increase the height of #3's parent container (#2) depending on whether the expander becomes larger in height than the stack panel containing the buttons (#4).

要获得您似乎想要的效果，可以使用问题和其他答案中已经讨论过的Grid，也可以使用如下的Canvas元素:

To achieve the effect you seem to be after, you can either use a Grid as already discussed in the question and other answer, or you can use a Canvas element like so:

<Window x:Class="..."
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel>
        <StackPanel Orientation="Horizontal" Panel.ZIndex="1">
            <Canvas Width="{Binding ActualWidth, ElementName=Expander}">
                <Expander x:Name="Expander" Header="Header" Background="Yellow">
                    <StackPanel Background="Aqua">
                        <TextBlock Text="Some text" />
                        <TextBlock Text="Some text" />
                        <TextBlock Text="Some text" />
                        <TextBlock Text="Some text" />
                        <TextBlock Text="Some text" />
                        <TextBlock Text="Some text" />
                    </StackPanel>
                </Expander>
            </Canvas>
            <StackPanel>
                <Button Content="Button1" />
                <Button Content="Button2" />
                <Button Content="Button3" />
            </StackPanel>
        </StackPanel>
        <TextBlock Text="Some more text" Background="LimeGreen" />
    </StackPanel>
</Window>

此处使用的画布允许扩展器控件转义"容器的边界.为了使扩展控件在其正下方的元素(在此示例中为TextBlock)上方浮动"，使用了Panel.ZIndex附加属性.我们还需要将画布的宽度绑定到扩展器的宽度，因为画布不会根据其子对象调整大小.

The canvas as used here allows the expander control to "escape" the boundaries of the container. To get the expander control to "float" above the element directly underneath it (the TextBlock in this example), the Panel.ZIndex attached property is used. We also need to bind the width of the canvas to the width of the expander as the canvas will not size itself based on its children.

以下是展开器合拢时的外观:

Here's how it looks when the expander is collapsed:

以及展开后的外观:

(请原谅可怕的颜色，它们只是为了您可以看到控制边界在哪里.)

(Forgive the horrible colours, they are just so you can see where the control boundaries are).

这篇关于如何使扩展器控件悬停在下一个元素上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！