除相关堆叠面板尺寸 [英] inter related stack panel sizing

问题描述

我有需要以下属性的递归定义用户控件：

I have a recursively defined user control that needs the following properties:

有两列

第一个是包含周围的一些文字

the first contains a single border around some text

第二列包含这些相同类型的控件栈（递归部分）以单边框

the second column contains a stack of these same type of controls (the recursive part)

如果在第一列中的盒比在第二列中的堆叠盒的总高度变短，盒子应该扩展，使两列相同的高度。

if the box in the first column is shorter than the total height of the stacked boxes in the second column, the box should expand to make both columns the same height.

如果第二列的总高度大于在第一列中的框短，则在第二列的堆栈中的最后一项应当扩大所以它们是相同的高度。

If the total height of the second column is shorter than the box in the first column, then the last item in the second column's stack should expand so they are the same height.

因此，举例来说，它可能是这样的：

so for example, it might look like this:

好了，到目前为止，我所做的就是创建一个水平堆叠面板，其中第一项是包含边界码头面板和文字......第二列是绑定到一个子表垂直堆叠面板，创建递归用户控制......这样的..

Ok, so far what I have done is create a horizontal stack panel where the first item is a dock-panel containing a border and text... the second column is a vertical stack panel bound to a sublist, creating the recursive user control... like this..

<StackPanel Orientation="Horizontal" Background="AliceBlue">
        <local:TMRequirementView Requirement="{Binding Baseline}" />
        <StackPanel Orientation="Vertical">
            <ItemsControl ItemsSource="{Binding Requirements}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <local:TMGridView Baseline="{Binding}" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>

凡要求是这样的：

Where the requirement looks like this:

    <DockPanel>
        <Border MinHeight="50"
                BorderBrush="Black" BorderThickness="2">
            <TextBlock Text="{Binding Description}" 
                       TextWrapping="Wrap" Background="Transparent" Height="Auto" />
        </Border>
    </DockPanel>

现在，如果堆积柱形图越高这一伟大工程，但它并不如第一列工作越高，我也得到空白。 ？不知道如何处理这种互相高度依存

Now this works great if the stacked column is taller, but it doesn't work if the first column is taller, and I get gaps. Any idea how to handle this mutual height dependency?

更新：
因此，通过周围添加边框右侧列堆叠面板，我能看到的StackPanel其实根本收到最小高度的变化。然而，即使有扩展空间，栈面板的孩子没有自动更新。如果我修复堆面板的了minHeight前手大的东西，孩子们填满。我需要搞清楚的是如何根据变化的堆叠面板的最小高度更新chidren的高度。

Update: So by adding a border around the right columns stack panel, I was able to see that the stackpanel actually did receive the min-height changes. However, even though there was room to expand, the children of the stack panel didn't automatically update. If I fix the minheight of the stack panel before hand to something large, the children fill up. What I need to figure out is how to update the chidren's height based on changes to the stack panel's min-height.

推荐答案

我认为电网在此布局做你的描述。我把它放在一个 DockPanel中，这样你可以看到它是如何调整大小。尝试输入的东西在文本框中，看它的行为方式：

I think the Grid in this layout does what you describe. I put it in a DockPanel so that you can see how it resizes. Try typing stuff into the text boxes and watch how it behaves:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <DockPanel>  
    <Grid DockPanel.Dock="Top">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <TextBox AcceptsReturn="True" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"></TextBox>
      <TextBox AcceptsReturn="True" Grid.Row="0" Grid.Column="1"></TextBox>
      <TextBox AcceptsReturn="True" Grid.Row="1" Grid.Column="1"></TextBox>
      <TextBox AcceptsReturn="True" Grid.Row="2" Grid.Column="1"></TextBox>
    </Grid>
    <TextBlock/>
  </DockPanel>
</Page>

所有三排电网将有一个文本框在最低的高度（当你更换其他元素的文本框，你需要设定最低高度，以防止他们消失，如果他们为空） 。由于第三行是星尺寸，它将尺寸自身到前两行排列后留下的所有剩余的垂直空间。所以，如果有一堆在第一列的内容，在第二列第三行变得更高。

All three rows of the Grid will have the height of a TextBox at a minimum (when you replace the TextBoxes with other elements, you'll need to set minimum heights to keep them from vanishing if they're empty). Since the third row is star-sized, it will size itself to all remaining vertical space left after the first two rows are arranged. So if there's a bunch of content in the first column, the third row in the second column gets taller.

修改

其实，有没有理由，甚至以电网在这种情况下耍着：什么你所描述的是真正的行为 DockPanel中：

Actually, there's no reason to even screw around with a Grid in this case: What you're describing is really the behavior of the DockPanel:

<DockPanel>
  <DockPanel DockPanel.Dock="Top">      
    <DockPanel.Resources>
      <Style TargetType="Label">
        <Setter Property="DockPanel.Dock" Value="Top"/>
        <Setter Property="Background" Value="Lavender"/>
        <Setter Property="Margin" Value="1"/>
      </Style>
    </DockPanel.Resources>
    <DockPanel LastChildFill="True">
      <Label>Foo</Label>
    </DockPanel>
    <DockPanel LastChildFill="True">
      <Label>Foo</Label>
      <Label>Bar</Label>
      <Label>Baz</Label>
      <Label>Bat</Label>
    </DockPanel>
  </DockPanel>
  <Label/>
</DockPanel>

这篇关于除相关堆叠面板尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！