具有动态高度的列表框项目

Question

我有一个列表框，我从一些收藏中填写。每个集合项目都有一些信息：静态名称和图片，以及动态内容（文本、照片或照片等）。我想为每个集合项目更改列表框的项目高度。高度取决于内容，如果它只有文本 - 列表框的项目必须具有静态（名称的文本块，图片的图像）和带有文本的文本块，并且文本块的高度必须根据文本改变（如果它是 2-3 个字符串，高度将为最小，如果文本适合 15-20 个字符串 - 文本块的高度必须根据字符串更改），如果集合项包括文本和图像 - 它必须具有静态（名称的文本块，图片的图像），文本的文本块和图像为图像。列表框项目的高度必须取决于文本块大小和图像大小。

此时，我有一个列表框的高度是静态的，并且想要使高度动态。

这是我的列表框项目之一

<local:NewsTemplateSelector.Photo>
    <DataTemplate>
        <Border 
            BorderBrush="Red" 
            BorderThickness="2"  
            Width="400" 
            Height="auto" 
            Margin="10">
            <StackPanel Orientation="Horizontal" Width="400" Height="auto">
                <Image 
                    Source="{Binding SourceImage}" 
                    Height="75" 
                    Width="75" 
                    Margin="0,-225,0,0" />
                <Canvas Width="400">
                    <TextBlock 
                        Text="{Binding SourceName}" 
                        Foreground="Black" 
                        FontSize="25" 
                        TextWrapping="Wrap" 
                        Height="55" 
                        Width="326" 
                        d:LayoutOverrides="VerticalAlignment, Height" />
                    <Image  
                        Source="{Binding Photo[0].Big}" 
                        Height="auto" 
                        VerticalAlignment="Bottom" 
                        HorizontalAlignment="Right" 
                        Width="326" 
                        Canvas.Top="69"/>
                </Canvas>
            </StackPanel>
        </Border>
    </DataTemplate>
</local:NewsTemplateSelector.Photo> 

UPD：尝试过

<local:NewsTemplateSelector.Photo>
    <DataTemplate>
        <Border 
            BorderBrush="Red" 
            BorderThickness="2"  
            Width="auto" 
            Height="auto" 
            Margin="10">
            <Canvas Width="auto">
                <Image 
                    Source="{Binding SourceImage}" 
                    Height="auto" 
                    Width="auto" 
                    HorizontalAlignment="Stretch" />
                <TextBlock 
                    HorizontalAlignment="Stretch" 
                    Text="{Binding SourceName}" 
                    Foreground="Black" 
                    FontSize="25" 
                    TextWrapping="Wrap" 
                    Height="auto" 
                    Width="auto"  
                    MaxHeight="300" 
                    MaxWidth="460"  />
                <TextBlock 
                    HorizontalAlignment="Stretch" 
                    Text="{Binding Texts}" 
                    Foreground="Black" 
                    FontSize="25" 
                    TextWrapping="Wrap" 
                    Height="auto" 
                    Width="auto" 
                    MinHeight="150"   
                    MaxHeight="300" 
                    MaxWidth="460"  />
                <Image  
                    HorizontalAlignment="Stretch"   
                    Source="{Binding Photo[0].Big}" 
                    Height="auto" 
                    MinHeight="150" 
                    MaxHeight="300" 
                    MaxWidth="460"  
                    Width="auto"/>
            </Canvas>
        </Border> 
    </DataTemplate>
</local:NewsTemplateSelector.Photo>`

但照片相互叠加，名称为 SourseImage 的图像也叠加在屏幕顶部

Answer 1

尝试将所有硬编码属性替换为 auto，例如 height=auto 和 width=auto。

如果要填充总行，请设置 Horizo​​ntalAlignment=:stretch"。

根据需要将文本块属性 TextWrapping="wrap" 和 MinWidth 设置为固定值。

Answer 2

您可以在 xaml 代码中为 ListBox 的高度使用“自动”值

    <ListBox Height="auto">
    </ListBox>