WPF - Usercontrol as ListItemTemplate not filling listbox width - wpf

Question

Just trying to get my head round WPF. I have a usercontrol which I'm using as the template for items in a listbox, however no matter what I try the usercontrol's width is always shrinking to the minimum size but I want it to fill the available width. I've found a similar query on here but it was relating just to a usercontrol not within a listbox and the solution proposed doesn't apply here.
My UserControl is defined as :
<UserControl x:Class="uReportItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="60" d:DesignWidth="300">
<Grid >
<Border CornerRadius="3,3,3,3" BorderBrush="#0074BA" BorderThickness="1" Background="#00D6F9" Margin="0">
<DockPanel Margin="3,3,3,3">
<Grid Height="Auto">
<!-- Grid Definition-->
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- Content -->
<!-- Top Row-->
<Button Grid.RowSpan="2">Delete</Button>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<Label x:Name="Heading" Content="{Binding Heading}" FontSize="14" FontWeight="bold"></Label>
<Label x:Name="Subheading" Content="{Binding SubHeading}" FontSize="14"></Label>
</StackPanel>
<Button Grid.Column="2">Blah</Button>
<!-- Second Row-->
<Label Grid.Row="1" Grid.Column="1" x:Name="Comments">Comments</Label>
<Button Grid.Column="2">Blah</Button>
</Grid>
</DockPanel>
</Border>
</Grid>
And the implementation on the window is :
<Window x:Class="vReport"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:RecorderUI"
Title="vReport" Height="300" Width="300" Background="#00BCF0">
<Window.Resources>
<DataTemplate x:Key="Record" DataType="ListItem">
<Grid>
<local:uReportItem></local:uReportItem>
</Grid>
</DataTemplate>
<Style TargetType="ListBoxItem">
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<local:uReport Margin="5" Grid.Row="0"></local:uReport>
<Border Grid.Row="1" BorderBrush="#0074BA" CornerRadius="3">
<ListBox Margin="5" Background="#00D6F9" BorderBrush="#0074BA" x:Name="ListRecords" ItemsSource="{Binding Items}" ItemTemplate ="{StaticResource Record}"></ListBox>
</Border>
<TextBlock Grid.Row="2" x:Name="SelectedItem" Text="{Binding Path=SelectedItem.Heading, Mode=TwoWay}"></TextBlock>
</Grid>
Any ideas?

Answer 1

Try setting HorizontalContentAlignment to Stretch on the ListBox:
<ListBox Margin="5" Background="#00D6F9" BorderBrush="#0074BA" x:Name="ListRecords" ItemsSource="{Binding Items}" ItemTemplate ="{StaticResource Record}" HorizontalContentAlignment="Stretch"></ListBox>