wpf border control to span the width of listboxItem

Question

Im trying to define a dataTemplate for a business object in my wpf application a collection of which is being bound to a ListBox.

<UserControl.Resources>
    <DataTemplate x:Key="ResizedItemsDataTemplate" DataType="{x:Type resizer:ResizeMonitorItem}">
              <Border x:Name="bdr" BorderBrush="Blue" 
                                     BorderThickness="1" 
                                     CornerRadius="2" 
                                     Width="auto"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch">
                    <Grid Margin="2">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="14"></RowDefinition>
                            <RowDefinition Height="14"></RowDefinition>
                        </Grid.RowDefinitions>


                        <TextBlock Grid.Row="0" Text="{Binding SaveAsFileName}"></TextBlock>
                        <TextBlock Grid.Row="1" Text="{Binding ResizedImageFilePath}"></TextBlock>
                    </Grid>
             </Border>
    </DataTemplate>
</UserControl.Resources>
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0">    
    <Border BorderThickness="0,0,0,5" BorderBrush="DarkGray" >
        <ListBox x:Name="ListBoxResizeItems" ItemsSource="{Binding Path=ResizeItems}" BorderThickness="0" ItemTemplate="{DynamicResource ResizedItemsDataTemplate}">
        </ListBox>
    </Border>
</Grid>

How can I get the border defined with x:Name=bdr to span the full width of each listbox item? At the moment it only spans the with of the textblocks inside it which dont neccessary fill the full width of the listboxitem and also vary for each listboxitem.

Answer 1

This is probably more to do with the ListBoxItems themselves not taking up the full width of the ListBox. Add the HorizontalContentAlignment="Stretch" attribute to your ListBox and see if it stretches the individual items to fill the width.

Answer 2

Worked it out. The trick is to set the HorizontalContentAlignment="Stretch" on your listbox to make its contents stretch the full width rather than fit the contents only.

 <ListBox x:Name="ListBoxResizeItems" 
                HorizontalContentAlignment="Stretch"
                ItemsSource="{Binding Path=ResizeItems}" 
                BorderThickness="0"                                         
                ItemTemplate="{DynamicResource ResizedItemsDataTemplate}" >
        </ListBox>

Sorry Matt, just got your answer thorugh as I was typing this post.

Answer 3

HorizontalContentAlignment is a nice, clean solution compared to what I was trying. Thanks!

Here's what ALMOST worked, but sometimes made a dialog box animated itself wider and wider forever:

Width="{Binding ActualWidth, 
        RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}"