带有图像、文本块和矩形的网格，在列表框中未完全正确显示答案

【问题标题】：Grid with an image, textblock, and rectangle, inside a listbox not showing up exactly right带有图像、文本块和矩形的网格，在列表框中未完全正确显示
【发布时间】：2009-10-16 15:18:24
【问题描述】：

所以我在 ListBox 项模板中有这个 Xaml：

<ListBox.ItemTemplate>
    <DataTemplate>
        <Grid Height="22" Width="Auto">
            <Image Margin="-2,0,0,0" Source="{Binding Path=ADsPath, Converter={StaticResource ImxConverter}}" HorizontalAlignment="Left" Width="22"  />
            <TextBlock Margin="20,3,0,0" Text="{Binding Path=DisplayValue}" Width="Auto" />
            <Rectangle Fill="White" Stroke="White" Margin="-2,0,-2,0.5" VerticalAlignment="Bottom" Height="1" Width="Auto" />
        </Grid>
    </DataTemplate>
</ListBox.ItemTemplate>

这个想法是矩形，在整个 ListBox 项的底部提供一条细白线；但是，对于上面的 Xaml，它只与文本一样长，而不是列表框的整个宽度。

【问题讨论】：

标签： c# .net wpf user-interface

【解决方案1】：

将您的宽度设置为“自动”基本上是告诉它只大到足以容纳里面的所有东西。我认为您需要将 Grid 的 HorizontalAlignment 设置为 Stretch 才能正常工作。

编辑：

我做了一个小示例应用程序。以下是我将如何做你想做的事情：

在您的实际列表框上，我会将 HorizontalContentAlignment 属性设置为 Stretch

和

我会将您的 Grid 更改为 DockPanel：

<ListBox.ItemTemplate>
    <DataTemplate>
        <DockPanel Height="22" HorizontalAlignment="Stretch">
            <Rectangle Fill="White" Stroke="White" Margin="-2,0,-2,0.5" DockPanel.Dock="Bottom" Height="1"/>
            <Image Margin="-2,0,0,0" Height="20" DockPanel.Dock="Left" Width="22"  />
            <TextBlock Margin="20,3,0,0" Text="Daniel Manning" DockPanel.Dock="Left"/>
        </DockPanel>
    </DataTemplate>
</ListBox.ItemTemplate>

【讨论】：

我应该从所有子元素中删除 Width="Auto" 还是只删除 Grid？
我认为您不需要，我认为您的 TextBlock 的宽度默认为 Auto（不确定），您可能希望将其从矩形中删除，并将矩形的 HorizontalAlignment 更改为拉伸不过。
查看编辑：我建议使用 DockPanel 而不是 Grid 的唯一原因是因为 Grid 的成本要高得多，而 Dock Panel 对于您要完成的工作似乎更有效。
:) 对于带有熊队球员姓名的文本！我最终在列表框上设置了 HorizontalContentAlignment="Stretch" 但仍在使用网格，我将检查 DockPanel，但通常我不会在列表中包含超过 10/20 的项目。

【解决方案2】：

您是否尝试过删除 Width="Auto"？自动说“只让我变得像我需要的那么大”，在你的情况下，这取决于文本的长度。默认为“Stretch”，意思是“嘿，容器，帮我一个忙，让我和你一样宽”。

【讨论】：