GridViewItem height adjust to content in Windows Phone 8.1

Question

I am using a GridView to display some products. When I set the DataTemplate I use Width and Height with static values and define some rows for the data I want to display.

 <Grid Width="97" Height="180"">
       <Grid.RowDefinitions>
       <RowDefinition Height="80"/>
       <RowDefinition Height="20"/>
       <RowDefinition Height="*"/>

The first row is for a 80x80 image and the second for the price.So far, so good.

Then I face the problem that even if the data shown (with the name of the product) in the last row, with a TextBlock, is just one line, the GridViewItem takes the value defined from the height property. Is there a way for the height to adjust on TextBlock's Text. I tried setting Height to Auto, not including at all for the Grid and the TextBlock but then the text is not appearing whole on the screen.

It's interesting that Auto is not working. Is the text going off the top/bottom of the screen, or the sides? — AllFallD0wn
On the sides and is not extending down as I think it should. — Andreas777
This seems to be a problem with your font size then. The size is too big for the screen, so it's going off the sides. I'd recommend putting the final row in a ViewBox so it can extend up and down as needed — AllFallD0wn
This shows the whole text but the font size changes if the name is longer than others. But gets closer to a solution — Andreas777
I set a max height to ViewBox but still it scales the font, which is set to 16. Is a way to set a max height and show some max number of characters in the ViewBox and not the whole text if necessary — Andreas777

AllFallD0wn AllFallD0wn · Accepted Answer · 2015-07-02T07:52:21

I have a feeling what you want is the text to wrap around. You can achieve this by setting the text to wrap, like in the code demonstrated below:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="80"/>
        <RowDefinition Height="20"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="0" Background="Red" />
    <Grid Grid.Row="1" Background="Blue" />
        <TextBlock Grid.Row="2" TextWrapping="Wrap" Text="This is some text which will not fall off the edge because it is set to wrap around, and will continue filling down until the end of the screen because the grid is set to auto" />
</Grid>

GridViewItem height adjust to content in Windows Phone 8.1

1 Answers