代码之家 › 专栏 › 技术社区 › Sam White

实际高度增加但不收缩

itemscontrol datatemplate xaml wpf

Sam White · 技术社区 · 7 年前

ItemsControl 每件物品的侧面都有一条垂直线,从物品的顶部到底部。由于这些物品的高度可能会有所不同,所以我将 Line 的 Y2 属性 ActualHeight StackPanel 属于 Grid .

<ItemsControl Grid.Row="1" BorderThickness="0" ItemsSource="{Binding ShipmentActivity}" >
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Name="ListBox">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <Line Stroke="{StaticResource ButtonOutlineBrush}" X1="8" X2="8" Y1="0"
                      Y2="{Binding ActualHeight, ElementName=ShipmentActivity}"
                      StrokeThickness="1" />

                <StackPanel Grid.Column="1" Margin=".1" x:Name="ShipmentActivity">
                    <StackPanel.Resources>
                        <Style TargetType="TextBlock">
                            <Setter Property="TextWrapping" Value="Wrap"/>
                        </Style>
                    </StackPanel.Resources>
                    <TextBlock Text="{Binding Status}" FontWeight="SemiBold" FontSize="13" />
                    <TextBlock Text="{Binding Location}" Foreground="Gray"/>
                    <TextBlock Text="Wed, Sep 13, 2017, 8:29 PM (2 days ago)" Foreground="Gray"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

一开始运行这个似乎很完美。当我开始缩小窗口的宽度时,问题就显而易见了,这导致了 TextBlock 控件 s回到其原始状态(和高度),项目的高度保持不变-停留在其最高点,在文本下方留下巨大的间隙,而的高度不会收缩。这个 线 这肯定是罪魁祸首,因为删除这条线就可以解决问题。

更为奇怪的是,它为 堆栈面板 即使是最轻微的0.1也会解决问题,物品会缩回到预期高度。

1 回复 | 直到 7 年前

Steven Rands 7 年前

我会使用边境 堆栈面板 线 . 然后只需设置 BorderThickness

因此,您的XAML将如下所示:

<ItemsControl ...>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border BorderThickness="1,0,0,0"
                BorderBrush="{StaticResource ButtonOutlineBrush}">
                <StackPanel ...>

Padding 边界和/或 Margin 属性来分隔两个元素。