Horizontal ListBox Items Stretching

Question

I have a problem with my ListBox in WPF. First of all, I have a horizontal ListBox with custom ItemTemplate. Now, I want to stretch the items, so that the items fits over the complete width of the ListBox. I tried things like setting the HorizontalContentAlignment to Stretch, but this still not working.

Here is my ItemTemplate:

<DataTemplate x:Key="ListViewStepTemplate">
    <Grid VerticalAlignment="Stretch">
        <TextBlock Text="{Binding Path=Title}" 
                   FontSize="15"
                   HorizontalAlignment="Center" 
                   VerticalAlignment="Center" />

        <Image Height="16" 
               Width="16"
               HorizontalAlignment="Right"
               VerticalAlignment="Bottom"
               Source="/images/Content/check_16x16.png"
               Visibility="{Binding Path=IsDone, Converter={StaticResource BooleantoVisibilityConverter}, UpdateSourceTrigger=PropertyChanged}" />
    </Grid>
</DataTemplate>

And this is my ListBox:

<ListBox DockPanel.Dock="Top" 
         ItemsSource="{Binding AllItemsList}" 
         SelectedItem="{Binding CurrentItem}" 
         ItemTemplate="{StaticResource ListViewStepTemplate}" 
         Height="60" 
         HorizontalContentAlignment="Stretch">

    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

    <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="IsEnabled" Value="{Binding IsEnabled, UpdateSourceTrigger=PropertyChanged}" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="Padding" Value="30 0" />
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

If there are 4 items, each item should have a width of 25%. If there are 5 items, each item should have a width of 20% and so on.

Is it possible to do what I want to do? I tried a lot of things now, but it does never work.

Answer 1

Instead of using StackPanel use UniformGrid

Provides a way to arrange content in a grid where all the cells in the grid have the same size.

and bind number of columns to number of items in the list and disable horizontal scrolling functionality.

<ListBox 
   ...
   ItemsSource="{Binding AllItemsList}" 
   ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
   ScrollViewer.VerticalScrollBarVisibility="Disabled" >
   <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
         <UniformGrid Rows="1" Columns="{Binding AllItemsList.Count}"/>
      </ItemsPanelTemplate>
   </ListBox.ItemsPanel>
   <ListBox.ItemContainerStyle>
      <Style TargetType="{x:Type ListBoxItem}">
         <!-- style -->
      </Style>
   </ListBox.ItemContainerStyle>
</ListBox>

Answer 2

Don't use a StackPanel, use an UniformGrid instead.

<ItemsPanelTemplate>
    <UniformGrid Rows="1" Columns="{Binding DataContext.Count, RelativeSource={RelativeSource Self}}"/>
</ItemsPanelTemplate>