Silverlight (and WPF): How to make items stretch horizontally in a ListBox

Sometimes we need to use controls like TextBox, TextBlock etc (that set their width automatically depending on content) in a ListBox’s ItemTemplate. If we need to draw Borders or assign Background colors to each such controls then we may end up having non-equal rows. Here’s a sample markup:

<ListBox ItemsSource="{Binding MyList}" >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBox Text="{Binding}" Background="LightYellow"  />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Here’s the output for the above XAML:

A quick thought would be to assign HorizontalContentAlignment property to Stretch for the TextBox but this wont work. We need to specify this property for the ListBoxItem that encapsulates our DataTemplate. Here’s a quick syntax for doing this using a style:

<Grid>
    <Grid.Resources>
        <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </Grid.Resources>
    <ListBox Margin="100" ItemsSource="{Binding MyList}" 
                ItemContainerStyle="{StaticResource ListBoxItemStyle}"
                >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBox Text="{Binding}" Background="LightYellow"  />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

And here’s the output:

This should be fine in most case but sometimes we also need to wrap the text as highlighted using red arrows in the above image. Now setting TextWrapping property will have no effect as the TextBox thinks it can take all the horizontal space. This can be solved by disabling the horizontal scroll bar for the ListBox:

<Grid>
    <Grid.Resources>
        <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </Grid.Resources>
    <ListBox Margin="100" ItemsSource="{Binding MyList}" 
                ItemContainerStyle="{StaticResource ListBoxItemStyle}"
                ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBox Text="{Binding}" 
                    Background="LightYellow"
                    TextWrapping="Wrap" />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

Here’s the final output:

Nice learning for me!

About these ads

7 Responses to “Silverlight (and WPF): How to make items stretch horizontally in a ListBox”

  1. DotNetShoutout Says:

    Silverlight (and WPF): How to make items stretch horizontally in a ListBox « Mehroz’s Experiments…

    Thank you for submitting this cool story – Trackback from DotNetShoutout…

  2. Calabonga Says:

    Good post. Thanks

  3. satyajit Says:

    If datatemplate contain one grid and that grid contain number of textbox divided equally

    Please review the below code

    When you adding unlimited text the size of textbox increased automatically.

    Any solution to stop increase the size of textbox

    Thanks in advance

  4. Roman Osipyan Says:

    Thanks for article. BTW you can also set ListBox property HorizontalContentAlignment=”Stretch”, without adding ItemContainerStyle.

  5. Software Outsourcing Says:

    Great post, keep going delighting us with new Silverlight tuts.

  6. David Christensen Says:

    Great post, stopped me banging my head against the keyboard


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 52 other followers

%d bloggers like this: