Как исправить макет списка с помощью пользовательского шаблона элемента

Question

Я применил пользовательский ItemTemplate к элементу управления ListBox, но у меня возникла проблема с макетом. Когда ListBox прокручивается до нижнего уровня и изменяется, элемент переполняется:

Кажется, что если я прокручиваю вверх, макет в конце концов исправляется:

Если я удалю строку, которая устанавливает HorizontalContentAlignment, проблема исчезнет (но я бы хотел, чтобы элемент списка растянулся, чтобы заполнить доступное пространство) ...

Любая помощь будет оценена.

<ListBox x:Name="myList" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Visible">
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="HorizontalContentAlignment"  Value="Stretch"></Setter>
            </Style>
        </ListBox.ItemContainerStyle>            
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Background="Lime" TextWrapping="Wrap" Text="{Binding Comments}"/>
                    <Grid Grid.Column="1" Background="Aqua">
                        <Button Width="20" Height="20" Content="..."/>
                    </Grid>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Answer 1

По умолчанию ItemsPanel для ListBox является VirtualizingStackPanel, что плохо справляется с выравниванием Stretch.Вместо этого попробуйте UniformGrid только с одним столбцом.

<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <UniformGrid Columns="1"/>
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>