Text Wrapping issue in silverlight for Windows Phone

Question

I have a twitter feed in a list box in a app I'm making for Windows Phone 7. The problem I'm having is that the text of a tweet is being cut off the edge of the list box instead of wrapping around to a new line like this:

The list box is inside a panorama which works fine. This is my code:

<ListBox x:Name="cheapyListBox" Height="500" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="400" ScrollViewer.VerticalScrollBarVisibility="Hidden" HorizontalContentAlignment="Left" >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Height="132" Tap="Message_OnTap">
                <Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
                <StackPanel Width="Auto">
                    <!--<TextBlock Text="{Binding UserName}" FontSize="28" Margin="12,0,0,0" /> -->
                    <TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24" />
                    <TextBlock Text="{Binding Date}" TextWrapping="Wrap" FontSize="20" />
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
 </ListBox>

How can I get the tweet text to wrap round instead of being cut off? Thank you.

Answer 1

Since your inner StackPanel is nested within a horizontal Stackpanel, it has no constraint of depth, and so the TextBlocks expand infinitely as the text becomes longer.

There are a variety of ways you can fix the issue, but an easy one (if you know the width that you want) is to set the inner StackPanel's width to a finite number.

For example:

<ListBox x:Name="cheapyListBox" Height="500" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="400" ScrollViewer.VerticalScrollBarVisibility="Hidden" HorizontalContentAlignment="Left" >

        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" Height="132" Tap="Message_OnTap">
                    <Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
                    <StackPanel Width="400">
                        <!--<TextBlock Text="{Binding UserName}" FontSize="28" Margin="12,0,0,0" /> -->
                        <TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24" />
                        <TextBlock Text="{Binding Date}" TextWrapping="Wrap" FontSize="20" />
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Hope this helps!