使用哪个WPF面板控件来锚定子元素到边缘（手风琴效果）？

Question

这个问题（希望如此）很简单...我正在尝试寻找一个WPF面板，当它被调整大小时，所有垂直对齐的子元素（按钮）与面板底边保持相同的偏移距离，这样看起来就像它们在扩展。显然可以使用停靠面板并锚定到底部，但这似乎行不通。放入超过2个子项会弄乱对齐方式，而且无论我做什么都无法使它们垂直对齐。我已经尝试了各种面板，但都没有成功。我认为这应该是相当简单的，但它却让我束手无策！基本上，我正在尝试获取一种类似于手风琴的效果，当我点击顶部按钮时，面板会展开并显示所有子按钮。再次点击顶部按钮时，它就会折叠起来。我想我可以使用故事版移动每个子项，但我必须考虑到我的故事只需要改变面板的大小，而子项会保持它们的偏移和展开状态...有什么建议吗？谢谢您提前的帮助！

- Slippy

Answer 1

我相信您实际上可以使用 Canvas 并设置控件的 Canvas.Top、Left、Right 和 Bottom 属性来获得与 WinForms 和 anchor 相同的效果。

<Canvas>
    <Button Canvas.Left="30" Canvas.Bottom="10" Content="Button 1"  Name="button1"  />
    <Button Canvas.Left="90" Canvas.Bottom="10" Content="Button 2"  Name="button2"  />
</Canvas>

另外，Grid也可以做类似的事情：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="40" />
    </Grid.RowDefinitions>
    <Button Grid.Row="1" Grid.Column="0" Content="Button 1"  Name="button1" Margin="5" />
    <Button Grid.Row="1" Grid.Column="1" Content="Button 2"  Name="button2" Margin="5" />
</Grid>

- Scott

Answer 2

如果“基本上我正在尝试获得手风琴效果”是你问题的本质（我是对的吗？），那么，你是否尝试使用内置的WPF扩展器？在我看来，你似乎正在尝试构建自己的...

- Bruno

Answer 3

我不太明白你所说的“手风琴效果”，它可能与拉伸有关。如果您想要锚定，可以使用网格：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition /> <!-- Gets all available space i.e. resizes with window -->
        <RowDefinition Height="Auto"/> <!-- Sizes to content, always stays at the bottom -->
    </Grid.RowDefinitions>
    <!-- Resizable content goes in Grid.Row="0" -->
    <StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="5">
        <Button Name="ButtonOK" HorizontalAlignment="Right" Width="100" Margin="5" Click="ButtonOK_Click" IsDefault="True">OK</Button>
        <Button Name="ButtonCancel" HorizontalAlignment="Right" Width="100" Margin="5" Click="ButtonCancel_Click" IsCancel="True">Cancel</Button>
    </StackPanel>
</Grid>

- H.B.