如何自动调整容器元素大小以确保可见性问题的最小高度？

Question

我有一个 ItemsControl，想要显示我的 CustomObject 中的一些字符串。

这就像

String A
String B
String C

字符串 A 和 B 可以有多行长，但 C 不能。我正在考虑 Height="Auto" 和 DockPanel。弦 A 的高度应该是它需要的高度。还有弦 B。

这是我到目前为止想到的：

<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" Background="Black">
    <ItemsControl Name="ItemsControl1">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="#FF126eb1" BorderThickness="1.5" CornerRadius="8,8,8,8" Background="#FF074e84" Width="350" Height="Auto">
                    <DockPanel Width="350" Margin="0,10,0,0" Height="Auto" Background="Transparent">
                        <Canvas DockPanel.Dock="Top" Height="Auto" Width="350" Margin="0,10,0,0">
                            <TextBlock Text="{Binding Headline}" Canvas.Left="5" Canvas.Top="5" Foreground="White" FontSize="15" FontWeight="Bold" MaxWidth="340" TextWrapping="Wrap" Height="Auto"/>
                        </Canvas>
                        <Canvas DockPanel.Dock="Top" Height="Auto" Width="350" Margin="0,10,0,0">
                            <TextBlock Text="{Binding Description}" Canvas.Left="5" Canvas.Top="20" Foreground="White" FontSize="13" MaxWidth="340" TextWrapping="Wrap" Height="Auto" />
                        </Canvas>
                        <Canvas DockPanel.Dock="Top" Width="350" Height="40" Margin="0,10,0,0" Background="Transparent">
                            <TextBlock Text="{Binding DeadlineOn, StringFormat='Deadline: {0}'}" Canvas.Left="5" Canvas.Top="5" Foreground="White"/>
                             <!-- and other controls -->
                        </Canvas>
                    </DockPanel>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>

不幸的是，只有 margin 属性为字符串 A 和 B 提供高度。

如果每个项目的高度未知，我该怎么做？

Answer 1

布局元素有很多，虽然这为您提供了很多选择，但很难决定在任何给定情况下使用哪个布局元素是正确的。

一般来说，Canvas 因其方便的固定定位功能而很有用。它允许使用 Canvas.Left 和 Canvas.Top 附加属性将任何东西放置在任何地方。但由于 Canvas 的大小是固定的并且不依赖于其子级，因此很难用于可变大小的内容。 Canvas 的父级与 Canvas 子级的大小“隔离”，这在某些情况下实际上很有用。

相比之下， Grid 是迄今为止灵活的布局元素，对于使用行和列、带或不带跨越等布局网格非常有用。这就是为什么当您创建新的 <代码>窗口或<代码>用户控件。但与 Canvas 不同，Grid 的大小在未指定且未拉伸到可用空间时，是其所有子项大小的并集。

Grid 还具有这样的属性：如果它有多个子项，并且它们没有放置在行或列中，那么它们会重叠在彼此之上，后面的子项也将被放置在其中。 Z 顺序较高。这就像一个Canvas，但是没有Canvas.Left和Canvas.Top，我们如何精细地控制孩子的位置？

让我们看一个例子。这是一个 Canvas，其中两个矩形并排放置，并留有一点空间，还有一个 Grid 做同样的事情：

<Grid>
    <StackPanel>
        <Canvas Height="120">
            <Rectangle Canvas.Left="10" Canvas.Top="10" Height="100" Width="100" Fill="Red"/>
            <Rectangle Canvas.Left="120" Canvas.Top="10" Height="100" Width="100" Fill="Green"/>
        </Canvas>
        <Grid HorizontalAlignment="Left">
            <Rectangle Margin="10,10,10,10" Height="100" Width="100" Fill="Red" HorizontalAlignment="Left"/>
            <Rectangle Margin="120,10,10,10" Height="100" Width="100" Fill="Green" HorizontalAlignment="Left"/>
        </Grid>
    </StackPanel>
</Grid>

在第一种情况下，我们必须指定高度Canvas 的大小，因为它不会自动调整大小。在第二种情况下，我们使用Margin来模拟绝对定位，并且Grid大小适应其内容的大小。