Windows Phone TextWrapping doesn't work in grid

Question

I have a problem with my application. I want tomake a page, that will be show user notifications in the Grid. At the left side will be profile picture, at the right side profile name, message contents and time.

I have a problem with the TextBlock which contains message content. TextWrapping doesn't seem to work. Message contents are displayed in single line, and they are cut in half.

<ListBox Name="listaWpisow" SelectionChanged="listaWpisow_SelectionChanged">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="0,0,0,10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"></ColumnDefinition>
                                <ColumnDefinition Width="auto"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid Grid.Column="0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Image Source="{Binding av_url_64, Converter={StaticResource imgConv}}" Height="64" Width="64" Name="pictureBox" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Left"></Image>
                            </Grid>
                            <Grid Grid.Column="1" Margin="25,0,0,0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"></RowDefinition>
                                    <RowDefinition Height="auto"></RowDefinition>
                                    <RowDefinition Height="auto"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="{Binding login}" TextWrapping="Wrap" FontWeight="Bold" Grid.Row="0" Grid.Column="0"></TextBlock>
                                <TextBlock Text="{Binding content}" TextWrapping="Wrap" Grid.Row="1" Grid.Column="0"></TextBlock>
                                <TextBlock Text="{Binding datetime_str}" FontSize="12" TextWrapping="Wrap" Grid.Row="2" Grid.Column="0"></TextBlock>
                            </Grid>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

How to solve this problem?

Answer 1

The problem is that your columns are set to width="Auto" This will let them grow as much as they want In practise this will grow as much as needed to accomodate all the content.

You should change it like so:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="1*"></ColumnDefinition>
    <ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>

This will keep the ratio equal: the second column is three times the width of the first. (you should tweak this to your specific need) Note that this needs to be done on your outer-grid since the outer grid lets the inner grid grow as much as needed, and the innergrid grows as much as needed to accomodate the long text in the textbox