silverlightwindows-phone-7xaml

TextBlock not wrapping in Grid


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.


Solution

  • 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

    enter image description here

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

    enter image description here

    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.

    enter image description here