Question

I want to make a ListBox that arranges items horizontally. Each item should be a TextBox, and it should fill the list box vertically regardless how how much text is there. If you’ve used Tweetdeck, I’m aiming for a similar effect. Here’s what I’ve got:

    <ListBox 
        Background ="DarkGray"
        ScrollViewer.HorizontalScrollBarVisibility="Auto" 
        ScrollViewer.VerticalScrollBarVisibility="Disabled"
        ItemsSource="{Binding Path=Items}">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <DockPanel IsItemsHost="True"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Gray" BorderThickness="2" CornerRadius="5" Margin="2,0,2,0">
                    <Grid Width="250">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <TextBox 
                            Grid.Row="0"
                            Grid.Column="0"
                            VerticalAlignment="Stretch"
                            Text="{Binding Path=Messages, Mode=OneWay}"  />
                    </Grid>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

What happens is that the TextBox stubbornly fits the text in it, rather than stretching vertically. I’ve tried switching the Grid for a DockPanel, which didn’t help. I could bind the TextBox’s Height property, but that seems unpleasant.

Is there a trick to this that I’ve missed?

Answer 1

You need to set VerticalContentAlignment="Stretch" on your ListBox.