TextBlock not wrapping in Grid

Question

I have the following XAML which is meant to show an Image and two TextBlocks on top of eachother beside it:

<StackPanel Orientation="Horizontal" >
    <Image Source="{Binding CoverArt}" Height="150" />
        <StackPanel Orientation="Vertical">
            <StackPanel>
                <TextBlock FontSize="30" Text="{Binding Title}" TextWrapping="Wrap" />
            </StackPanel>
            <Grid Width="auto">
                <TextBlock FontSize="22" Text="{Binding Summary}" TextWrapping="Wrap" />
            </Grid>
         </StackPanel>
</StackPanel>

My problem is getting the text to wrap. I've tried using a Grid and assigning the columns' width but it didn't work. Neither did setting the width values to auto. The only thing that works is hard-coding the width, but I do not want that. Thanks.

Answer 1

This solution to wrap column text in a grid worked and is based on the Classon example using the column 2 default column definition:

<DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="{Binding Level, Converter={StaticResource LevelSpaceConverter}}"/>
                                    <ColumnDefinition Width="{StaticResource TreeToggleWidth}"/>
                                    **<ColumnDefinition/>**
                                </Grid.ColumnDefinitions>
                                <CheckBox Style="{StaticResource plusMinusCheckboxStyle}" Padding="1" Grid.Column="1"
                                          IsChecked="{Binding IsExpanded, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                          Visibility="{Binding HasChildren, Converter={StaticResource TreeToggleConverter}}"/>
                                <StackPanel Grid.Column="2" Orientation="Vertical">
                                    <StackPanel>
                                        <TextBlock TextWrapping="Wrap" Text="{Binding Statistics.Name}"/>
                                    </StackPanel>
                                </StackPanel>
                            </Grid>
                        </DataTemplate>

Answer 2

A Stackpanel will stretch to the size of its content, so it's not what I would use. Use a grid, as explained in the following posts:

TextBlock TextWrapping not wrapping inside StackPanel

Text in StackPanel doesn't wrap (wp7)

TextBlock inside stackpanel does not wrap text

A quick comparison: Before with stackpanel

After with one grid (You might want to rearrange the elements a bit)

The code for the last segment:

<pre>
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Ellipse Fill="red" Width="150" Height="150" />
        <StackPanel Grid.Column="1" Orientation="Vertical">
            <StackPanel>
                <TextBlock FontSize="30" Text="basdljhba dnaiks d., kasndca casn oiäc cas lkcnaso ca dxjwöbdq wkjöbdqw dkjwqb " TextWrapping="Wrap" />
            </StackPanel>
            <Grid Width="auto">
                <TextBlock FontSize="22" Text="dewdewdewdewdewewd" TextWrapping="Wrap" />
            </Grid>
        </StackPanel>
    </Grid>

Did you try setting the width of the columns to fractions instead? width="2*" That will give you some boundaries without a pixel set size. Some way or another you need to set a constraint for the container. If you have two columns and no size is set they will get 50% each. 2* will make give that column 2/3 of the total column with, see example below.