Bookmark and Share Share...    Subscribe to this feed Feed   About Christian Moser  


How to strech an WPF ListBox Item to span the whole width

If you create a data template with a right-aligned element (like the age in our exmple), it only spans over the needed width, because the content of a listbox is left-aligned by default.

This is the DataTemplate I created for this example.

 
<Style TargetType="ListBox" x:Key="strechedItemStyle">
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid Background="#330000FF">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding Name}" HorizontalAlignment="Left"  Grid.Column="0"/>
                    <TextBlock Text="{Binding Age}" HorizontalAlignment="Right" Grid.Column="1"/>
                </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>
 
 

To make the listbox item span the whole width of the listbox you need to set the HorizontalContentAlignment property to Stretch.

This is the way to set it directly on the listbox element:

 
<ListBox x:Name="listBox" Margin="20" 
         Style="{StaticResource strechedItemStyle}" 
         HorizontalContentAlignment="Stretch" />
 
 

If you want to set this property within a style you can do it with the following lines of code

 
<Style TargetType="ListBox" x:Key="strechedItemStyle">
  <Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
 
 




Last modified: 2009-11-17 13:24:58
Copyright (c) by Christian Moser, 2011.

 Comments on this article

Show all comments
Se122
Commented on 1.June 2009
I understand the concept of styles with this, but I didnt understand how you made the number to come to the left, and the text to stay on left.
Patrick
Commented on 5.August 2009
Hi,
How can i apply animation for a selected listitem? Such as the zone out the selected itme.
Garry
Commented on 9.April 2010
Se122,
He was able to accomplish that by setting up a grid in the datatemplate with 2 columns. 1 Column for the text aligned to the left and one column for the numbers aligned to the right.

<Grid Background="#330000FF">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" HorizontalAlignment="Left" Grid.Column="0"/>
<TextBlock Text="{Binding Age}" HorizontalAlignment="Right" Grid.Column="1"/>
</Grid>
someone
Commented on 22.September 2010
Hi I followed the example on this page to get right aligned in a text box, but having troubles

Note, I'm printing it as a FlowDocument

It's right aligned in Blend
It's right aligned when I print preview
It's right aligned when I print to XPS
It's LEFT aligned when I print to printer

I also see if I do a .show() first, then print, it prints right aligned. But it's left aligned if I print directly

Any ideas?

Name
E-Mail (optional)
Comment