Expanding the height of a TextBox in Windows Store XAML

Question

For reference, I'm sort of trying to re-create the way Skype displays instant messages. Sender name on the left (left/top aligned) and with the message text on the right. The text on the right should be fixed with, but dynamically expand vertically to show the entire message.

I'm displaying these messages in a ListView. It looks more-or-less like I want it, but I cannot get the TextBox control to expand vertically. It either consumes a single line of 100% width and the text goes off the right edge, or it expands vertically while simultaneously decreasing the width to some value (I can't figure out where that value comes from).

Here's what I currently have. I've tried nested StackPanels as well.

<ListView 
    x:Name="MessagesListView"
    ItemsSource="{Binding Messages}"
    TabIndex="1"
    Padding="116,46"
    Margin="0,0,0,46"
    VerticalContentAlignment="Stretch"
    SelectionMode="None"
    IsItemClickEnabled="false"
    IsSwipeEnabled="false">
    <ListView.ItemTemplate>
         <DataTemplate>
             <Grid>
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="200" />
                     <ColumnDefinition Width="*" />
                 </Grid.ColumnDefinitions>
                 <TextBlock 
                     Grid.Column="0"
                     Text="{Binding ContactDisplayName}" 
                     Margin="0,0,20,0" 
                     TextWrapping="WrapWholeWords" />
                 <StackPanel Grid.Column="1" Orientation="Vertical">
                     <TextBox Text="{Binding MessageText}" IsReadOnly="true" />
                     <TextBlock Text="{Binding TimestampDisplayText}" TextWrapping="Wrap" />
                 </StackPanel>
             </Grid>
         </DataTemplate>
     </ListView.ItemTemplate>
 </ListView>

Does anyone know how to get this to work?

Update 1

Here's a screenshot of what it currently looks like.

Screenshot

Update 2

Okay, I'm getting closer.

First, I realized that I was missing the TextWrap="Wrap" directive on the TextBox control. Unfortunately, setting that resulted in this:

Screenshot after applying TextWrap to TextBox

Inspired by Yuliam and Chris's comments, I tried setting specific widths and heights, with varying levels of success. The closest I got to getting what I want is by setting the MinWidth property of the textbox to 500. That yields this:

Screenshot after applying MinWidth to TextBox

That's a whole lot closer to what I want. But I still haven't been able to get the TextBox to expand horizontally to fill the grid column. I've tried specifying HorizontalAlignment and HorizontalContentAlignment explicitly, but no change.

It seems the TextBox really only wants to dynamically expand in ONE direction. You either get horizontal or vertical expansion, but not both.

do you want each ContactDisplayName in each item / row to fill the ListView available space proportionally ? a screenshot of your problem would be great.. — Yuliam Chandra
Ya an image of what you're after would help the visualization towards what you want to accomplish. — Chris W.
Thanks guys. I added a screenshot of what it looks like. Mostly it's fine, but I want the textbox with the lorem ipsum to expand enough to display the entire contents. — Bryan Slatner
Try to set Grid's Height like 100 and check whether it can expand vertically.. — Yuliam Chandra
I have a somewhat evil hack in place right now that hooks the SizeChanged event of the TextBox, which in turn sets is MinWidth property equal to the ActualWidth of the ListView, minus padding and minus the width of the other grid column. It works, although there is a somewhat ugly flash that occurs when first loading. — Bryan Slatner

Yuliam Chandra Yuliam Chandra · Accepted Answer · 2014-07-24T21:05:52

After setting the Grid's Height or MinHeight to specific height (ex 100).

Change this code

<StackPanel Grid.Column="1" Orientation="Vertical">
    <TextBox Text="{Binding MessageText}" IsReadOnly="true" />
    <TextBlock Text="{Binding TimestampDisplayText}" TextWrapping="Wrap" />
</StackPanel>

into

<Grid Grid.Column="1">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBox Grid.Row="0" Text="{Binding MessageText}" IsReadOnly="true" />
    <TextBlock Grid.Row="1" Text="{Binding TimestampDisplayText}" TextWrapping="Wrap" />
</Grid>

Expanding the height of a TextBox in Windows Store XAML

Update 1

Update 2

1 Answers