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 ?

score 9 · Answer 1 · edited May 23 '19 at 21:55

9

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.

edited May 23 '19 at 21:55

Lars Pellarin

606
6
10

answered Sep 16 '13 at 11:17

Sheridan

68,826
24
143
183

Hi, thanks for your help. I have converted the stackpanel to grid, but still it does not work stretch to the maximum width. – William Sep 17 '13 at 02:36
2

Thanks. HorzontalContentAlignment="Stretch" is the answer that solved my problem. – Doug Ferguson Oct 20 '14 at 17:10
oh my gosh! I can't believe I didn't think of this first. Thank you! – Ashley Grenon Sep 21 '15 at 18:32

score 8 · Answer 2 · edited May 23 '17 at 12:30

8

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.

edited May 23 '17 at 12:30

Community

1
1

answered Nov 10 '15 at 20:39

kkk

81
1
1

This is what helps me. Thanks! – psulek Jul 19 '17 at 10:59

score 3 · Accepted Answer · answered Sep 17 '13 at 06:09

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

WPF ListBoxItem does not stretch to the maximum width

3 Answers3