TextBlock Wrapping in WPF Layout

Question

Hi, I'm trying to figure out how to do something similar to the twitter silverlight app that Scott Guthrie demoed recently in WPF: http://weblogs.asp.net/scottgu/archive/2010/03/18/building-a-windows-phone-7-twitter-application-using-silverlight.aspx

Unfortunately, I seem to be having a hard time understanding the wpf layout system in some fundamental way. I've been trying various combinations of horizontalalignment/stretch, width/auto at different levels in the hierarchy, and I can't seem to get the "message" textblock to wrap without assigning an explicit width.

All I want is for the text to wrap based on the width of the window (or whatever is the parent container).

<Window x:Class="TweeterWin.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" Loaded="Window_Loaded">
    <ScrollViewer Height="auto" >
        <ListBox Name="tweetList" 
                 Height="auto"  
                 >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Height="132">
                        <Image Source="{Binding Avatar}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
                        <StackPanel >
                            <TextBlock Text="{Binding User}" TextWrapping="Wrap" Foreground="#FFC8AB14" FontSize="15" />
                            <TextBlock Text="{Binding Message}"  TextWrapping="Wrap" FontSize="10" />
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </ScrollViewer>
</Window>

As a follow up, if anyone can send any links my way that might help me understand some of these layout fundamentals. I think I understand the main layout options (canvas, grid, stackpanel, etc.), but I dont' understand why I can't get this textblock to wrap in this scenario.

Thanks!

Answer 1

http://www.wpftutorial.net/

Answer 2

Change the horizontal stackpanel to a dockpanel or grid (I would use a dockpanel).

This is explained by the accepted answer in this thread - wrapping for the dockpanels and grids are constrained in both directions, as opposed to a stackpanel which wraps to content in it's orientation direction.