CODEWITHSUNDEEP
wpfxamllistboxlistboxitemstretch
Shimmy Weitzhandler
Shimmy Weitzhandler

Reputation: 104692

Items in ListBox don't stretch properly

Check this xaml:

<Window
  x:Class="MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:sys="clr-namespace:System;assembly=mscorlib"
  Width="300">
  <ListBox HorizontalContentAlignment="Stretch"
      Grid.IsSharedSizeScope="True">
    <ListBox.ItemsSource>
      <x:Array Type="{x:Type sys:Int32}">
        <sys:Int32>25</sys:Int32>
        <sys:Int32>10</sys:Int32>
        <sys:Int32>50</sys:Int32>
        <sys:Int32>30</sys:Int32>
        <sys:Int32>80</sys:Int32>
      </x:Array>
    </ListBox.ItemsSource>
    <ListBox.ItemContainerStyle>
      <Style TargetType="ListBoxItem"
           BasedOn="{StaticResource {x:Type ListBoxItem}}">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
      </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.ItemTemplate>
      <DataTemplate>
        <Grid Background="#FFE41515">
          <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="name" Width="Auto"/>
            <ColumnDefinition SharedSizeGroup="value"/>
          </Grid.ColumnDefinitions>

          <TextBlock Text="Value:"/>
          <ProgressBar
              Value="{Binding Mode=OneWay}"
              Grid.Column="1" 
              HorizontalAlignment="Stretch"
              HorizontalContentAlignment="Stretch"/>
        </Grid>
      </DataTemplate>
    </ListBox.ItemTemplate>
  </ListBox>
</Window>

Here's the output, notice that the ProgressBar isn't stretched, why?
If the items are red, it means that each item fills the entire width, then why isn't the ProgressBar stretching??
enter image description here

Upvotes: 0

Views: 562

Answers (1)

brunnerh
brunnerh

Reputation: 184296

If you have only SharedSizeGroups the rest space will never be taken, they always behave like Width="Auto" (size to content) with the restriction of the largest item. As you only have two columns you do not even need two such groups as the second will already be the same width in every item, right?

How about this instead:

  <Grid.ColumnDefinitions>
    <ColumnDefinition SharedSizeGroup="name" Width="Auto"/>
    <ColumnDefinition /> <!-- Implicit: Width="*" -->
  </Grid.ColumnDefinitions>

Upvotes: 4

Related Questions