Text Wrap inside Grid

How-to Discussions
1

Hello, i am trying to present some info in my app and for that i am using the Grid and inside i have only Text. My problem is that in one of these i use TextWrapping="Wrap" and when there is bigger text length than usual and it splitts it in two or more lines it interfere with the other rows of the grid. This is my code :

<Grid Rows="auto,2*,1*,1*" Columns="2*,2*,1*" Alignment="Bottom" Height="30%" Margin="5">
    <Text Value="{title}" TextWrapping="Wrap" Row="0" Column="0" ColumnSpan="2" TextColor="#000" TextAlignment="Center" Alignment="TopCenter"/>
    <Text Value="{runtime}" Row="0" Column="2" TextColor="#000" Opacity="0.7" TextAlignment="Center" Alignment="TopCenter" />
    <Text Value="{genre}" TextWrapping="Wrap" Row="1" Column="0" ColumnSpan="3" TextColor="#000" TextAlignment="Center" Opacity="0.7" />
    <Text Value="Director:" Row="2" Column="0" TextColor="#000" TextAlignment="Center" Alignment="CenterLeft"/>
    <Text Value="{directors}" Row="2" Column="1" ColumnSpan="2" TextColor="#000" Opacity="0.7" TextAlignment="Center" Alignment="CenterLeft"/>
    <Text Value="Cast:" Row="3" Column="0" TextColor="#000" TextAlignment="Center" Alignment="CenterLeft"/>
    <Text Value="{cast}" Row="3" Column="1" ColumnSpan="2" TextColor="#000" Opacity="0.7" TextAlignment="Center" Alignment="CenterLeft"/>
</Grid>

and an example of my problem :

file

as you can see the title and the tags are one on top of another. What i want to do is that title height to be according to how many lines are generated from the text Wrap. Am i doing something wrong or is it another way to do it ?

Thanks in advance

2

Could you somehow draw an image of the expected result and post it here

3

I’m not sure how textwrapping should work together with Row-sizing done like that (especially combined with setting a fixed height for the surrounding grid), but you can achieve something similar to what you describe by using more panels:

<StackPanel>
    <Grid Columns="4*,1*" Rows="1*" Color="#0f0" Alignment="Top" Margin="5,5,5,0">
        <Text Value="title title title for that movie with the terribly long name I never remember" TextWrapping="Wrap"  />
        <Text Value="runtime" Column="2"    />
    </Grid>

    <Grid Rows="2*,1*,1*" Columns="2*,2*,1*"  Margin="5,0,5,5" Background="#fa0">

        <Text Value="genre" TextWrapping="Wrap" Row="0" Column="0" ColumnSpan="3" Background="Red"/>

        <Text Value="Director:" Row="1" Column="0"  />
        <Text Value="directors" Row="1" Column="1" ColumnSpan="2"   />

        <Text Value="Cast:" Row="2" Column="0"  />
        <Text Value="cast" Row="2" Column="1" ColumnSpan="2"   />
    </Grid>
</StackPanel>

Also notice that the height of the last two rows (Director and Cast) will increase if the genre text wraps, since those lines are all sized relative to eachother. If really long genres is a valid scenario then you should apply the same “trick” again and just move the genre text outside of that grid. :slight_smile:

4

Thanks for the answers guys ! Yeah i thought about it Remi using more panels i just wanted to see if there is another way to do it better.

5

If you want your rows to be sized to the content you should just use auto on all of them. If any of your rows are proportionally sized (such as 1*) then the entire grid will be expanded to fill the container. The proportional rows will divide the space left over after all auto rows have been calculated.

You shouldn’t use proportional spacing for a Grid row if it is inside a StackPanel or ScrollView. It won’t have a full size for which to divide over the proportional rows. There is some compatibility code in the layout covering this case, but it shouldn’t be relied upon – treat it as undefined.

6

Thank you for the extra info… It actually helped in another problem :slight_smile: Great work and it is a plasure working with fuse :slight_smile: Keep it up !!