WPF ListBoxItem does not stretch to the maximum width

Question

I am new to WPF. I am trying to make the first column in the OrderItemsTmpl template to stretch to the maximum width that is available, but it does not work, the width only up to the width of the text inside. I don't want to use an absolute value. How to solve this ? Thanks

<DataTemplate x:Key="OrderItemsTmpl">
            <Grid Background="Brown" HorizontalAlignment="Stretch" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="auto"></ColumnDefinition>
                </Grid.ColumnDefinitions>

                <StackPanel Grid.Column="0" HorizontalAlignment="Stretch">
                    <CheckBox Content="{Binding Path=sItemName}" HorizontalContentAlignment="Stretch" ></CheckBox>
                    <ListBox HorizontalContentAlignment="Stretch"
                        ItemsSource="{Binding Path=aSinglOptns}"
                        Margin="20,0,0,0"
                        ItemTemplate="{StaticResource SinglOptnTmpl}"
                        Style="{StaticResource SheetListStyle}"
                        ItemContainerStyle="{StaticResource ListBoxItemStyle}"
                 >

                    </ListBox>
                </StackPanel>

                <TextBlock Grid.Column="1" Text="{Binding Path=fQty}"></TextBlock>
</DataTemplate>

<Style x:Key="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <ContentPresenter></ContentPresenter>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


<Style x:Key="SheetListStyle" TargetType="{x:Type ListBox}">
            <Setter Property="Background" Value="Aqua"></Setter>

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBox}">
                        <Border
                            CornerRadius="8"
                            BorderThickness="2">
                            <ScrollViewer>
                                <WrapPanel
                                    IsItemsHost="True"
                                    Orientation="Vertical"
                                    HorizontalAlignment="Left"/>
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

ListBox that content the item

<Grid Background="Pink" Grid.Row="1" >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition Height="*"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>

                        <TextBlock HorizontalAlignment="Center" Text="{Binding Path=sDita}" Grid.Row="0" Grid.Column="0" TextWrapping="Wrap" ></TextBlock>

                        <ListBox
                                Grid.Row="1"
                                Grid.Column="0"
                                HorizontalContentAlignment="Stretch"
                                Background="Aqua"
                                ItemsSource="{Binding Path=aOrderItems}"
                                Name="OrderItems"
                                ItemTemplate="{StaticResource OrderItemsTmpl}"
                                Margin="0,0,0,0"
                                ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                ScrollViewer.VerticalScrollBarVisibility="Auto"
                                ScrollViewer.CanContentScroll="True"
                                ItemContainerStyle="{StaticResource ListBoxItemStyle}"
                                Style="{StaticResource SheetListStyle}">

                        </ListBox>
                    </Grid>

UPDATE I realized because of <Style x:Key="SheetListStyle"> I am using WrapPanel, it won't stretch to max width even you apply HorizontalAlignment="Stretch" I have to use other panel instead, but anybody know what could be used ?

Answer 1

There is a property on most collection controls that makes a whole row selectable and I suspect that you might need to have it set. If you haven't set the HorizontalContentAlignment property to Stretch , then that is your problem.

Ahhh... I've just noticed that you did set this property.

Ok, let's have another go... I can see that you are using a StackPanel inside your OrderItemsTmpl DataTemplate . These controls don't have any effect on the Width of their children, so I think that that is your problem. Try changing it to another Grid control instead.

Answer 2

Please see here

I'm sure this is a duplicate, but I can't find a question with the same answer.

Add HorizontalContentAlignment="Stretch" to your ListBox. That should do the trick.

Answer 3

The problem is in the ListBox 's control template. You're using a WrapPanel and you're aligning it to the left. Use a StackPanel and allow it to stretch (the default):

                <ControlTemplate TargetType="{x:Type ListBox}">
                    <Border
                        CornerRadius="8"
                        BorderThickness="2">
                        <ScrollViewer>
                            <StackPanel
                                IsItemsHost="True"
                                Orientation="Vertical" />
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>

Alternatively, you could use the ItemsPresenter control instead of the panel directly. ListBox uses a VirtualizingStackPanel by default that would also give you virtualization (which you've disabled).