Grid with an image, textblock, and rectangle, inside a listbox not showing up exactly right

Question

So I have this Xaml inside a ListBox Item Template:

<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>

The idea is that the rectangle, provides a thin white line across the bottom of the entire ListBox Item; however, with the Xaml above, it only extends as long as the text, not to the full width of the ListBox.

Answer 1

Setting your width to Auto basically tells it to only be large enough to fit everything inside. I think you need to set your Grid's HorizontalAlignment to Stretch for it to work properly.

Edit:

I did a small sample app. Here's how I would do what you are trying to do:

On your actual listbox, I would have the HorizontalContentAlignment property set to Stretch

and

I would change your Grid to a 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>

Answer 2

Have you tried removing Width="Auto"? Auto is saying "only make me as big as I need to be" which, in your case, is determined by the length of the text. The default is "Stretch" which means "hey container, do me a favor and make me as wide as you are".