Horizontal ListBox items layout problem.

Question

I have horizontal ListBox. Here is code for it (removed some irrelevant):

            <ListBox Grid.Row="1"
                     ItemContainerStyle="{StaticResource ListBoxUnselectableItemStyle}"
                     ItemsSource="{Binding ...}"
                     BorderThickness="0"
                     Background="{x:Null}"
                     ScrollViewer.CanContentScroll="False">

                <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"
                                        VerticalAlignment="Top"
                                        HorizontalAlignment="Center"
                                        Background="Red"/>
                        </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>

And I get items' layout behavior like this: http://www.freeimagehosting.net/uploads/cf4f839d02.png

As you can see, second item is smaller, and VerticalLayout is not Top as I want.

Can anybody help me?

P.S.: Sorry for a link to screenshot instead of inserting image, but Stack overflow writes "we're sorry, but as a spam prevention mechanism, new users aren't allowed to post images. Earn 10 reputation to post images."

Answer 1

HorizontalAlignment and VerticalAlignment refer to how the StackPanel is aligned within its parent container.

You probably need to be looking at ItemContainerStyle, where you would set VerticalAlignment to Stretch (so that the ListBoxItem occupies the full height of the ListBox), and VerticalContentAlignment to Top (so that the content of the ListBoxItem is aligned to the top of the ListBoxItem).