WPF TextWrapping differences between ListBox and ContentControl

Question

I have a listbox whose datatemplate contains a grid. Inside the grid I have a TextBlock, but I can't get the TextWrapping property works correctly: I wrote a sample to illustrate the behaviour:

XAML:

<Window x:Class="MyTest.Test"
    xmlns:my="clr-namespace:MyTest"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Test" >
<Window.Resources>
    <DataTemplate DataType="{x:Type my:Task}">
        <Border BorderThickness="2" BorderBrush="Red">
            <Grid ShowGridLines="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock MaxWidth="50" Margin="3" Grid.Column="0" TextWrapping="Wrap" Text="{Binding Path=Description}"></TextBlock>
                <TextBlock Margin="3" Grid.Column="1" TextWrapping="Wrap"  Text="{Binding Path=LongDescription}"></TextBlock>
            </Grid>
        </Border>
    </DataTemplate>
</Window.Resources>
<StackPanel>

    <TextBlock FontWeight="Bold" TextWrapping="Wrap">ContentControl: the textwrapping works as expected (select a row in the first listbox)</TextBlock>
    <ContentControl MinHeight="10" Content="{Binding ElementName=lsTask, Path=SelectedItem}" />

    <TextBlock FontWeight="Bold" TextWrapping="Wrap">ListBox: I can't get the textwrapping work properly</TextBlock>
    <ListBox MinHeight="10" Name="lsTask" ItemsSource="{Binding Path=TaskList}" ></ListBox>

    <TextBlock FontWeight="Bold" TextWrapping="Wrap">ListBox 2 : I tried with HorizontalContentAlignment="Stretch": similar but doesn't wrap</TextBlock>
    <ListBox MinHeight="10" Name="lsTask2" ItemsSource="{Binding Path=TaskList}" HorizontalContentAlignment="Stretch" ></ListBox>



    <TextBlock FontWeight="Bold" TextWrapping="Wrap">ListBox 3: I can wrap only setting Width in the datatemplate</TextBlock>
    <ListBox MinHeight="10" Name="lsTask3" ItemsSource="{Binding Path=TaskList}" HorizontalContentAlignment="Stretch" >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="2" BorderBrush="Green">
                    <Grid ShowGridLines="True">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <TextBlock Margin="3" Grid.Column="0" TextWrapping="Wrap" Text="{Binding Path=Description}"></TextBlock>
                        <TextBlock  Width="200"  Margin="3" Grid.Column="1" TextWrapping="Wrap"  Text="{Binding Path=LongDescription}"></TextBlock>
                    </Grid>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>


    </ListBox>
</StackPanel>

And this is my codebehind:

namespace MyTest
{

public class Task
{
    public string Description { get; set; }
    public string LongDescription { get; set; }

}

public class MyContext
{
    public List<Task> TaskList { get; set; }

    public MyContext()
    {
        TaskList = new List<Task>();
        TaskList.Add(new Task() { Description = "description1", LongDescription = "long long long long long long long long description1" });
        TaskList.Add(new Task() { Description = "description2", LongDescription = "long long long long long long long long description2" });
        TaskList.Add(new Task() { Description = "description3", LongDescription = "long long long long long long long long description3" });
    }

}


public partial class Test : Window
{

    public Test()
    {   
        DataContext = new MyContext();
        InitializeComponent();

    }
}
}

In the ContentControl and in the first 2 ListBoxes I use the same datatemplate; in the ContentControl the WordWrapping works as expected (whenever I resize the Window), while in the ListBoxes it doesn't. What is the difference?

The only way I found to make the TextWrapping working in the ListBox is to fix the Width (or the MaxWidth) of the TextBlock, but it is not the desired behaviour.

Thanks, Alessandro

Answer 1

The ListBox contains a ScrollViewer, so when the content wants to be wider than the ListBox a scroll bar automatically appears. The solution is to disable the horizontal scrollbar.

<ListBox ... ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>