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>