Forum Xamarin.Forms

How to make grid rows dynamically change their height based on the elements they contain?

I know there has been a number of discussion of labels not wrapping inside of grid with a number of suggested work around. My problem is similar.

I have the following grid, and the goal is to make the labels wrap automatically (which they do) but also, to ensure that the entire text of the label is visible (which it is not always). It seems like specifying Height="Auto" on the RowDefinition only partially solves the problem. With Height="Auto" the labels will wrap, but you still don't see the entire label; you only see about two lines worth (I'm running this as a UWP desktop app). If I make the app wider, I see more of the label. What SHOULD happen, is that the entire label should always be visible (however many lines that requires). If that means that subsequent rows of the grid needs to be pushed down, so be it - that it what ought to happen. If I make the window of the app less wide, then of course, there is less horizontal room to show the label, which means it requires more vertical space (which it should be given), which also means that subsequent rows should be dynamically pushed down. However, this does not appear to be what happens, and I cannot seem to find any way to accomplish it.

Does anyone know how I can accomplish what I've described above? It is, essentially, the obvious behavior one would expect, but there appears to be no obvious way (at least to me) to make it happen.

Here is a screenshot:

Pay particular attention to the labels in Row 0. If you look at the XAML and compare to the screenshot, you can see that the labels wrap, but even still, the entire label isn't visible. Why? Why is it wrapping to a maximum of only 3 lines? If 4 lines are needed to show the whole label, it should use 4 lines. If 5 lines are need, it should use 5 and so on. Why does it seems to be maxing out at 3 lines? If I make the app window wider, it will reduce to 2 lines (still the entire label text won't be visible). So the million dollar question is how do you make the label in the grid auto-wrap AND also ensure that the ENTIRE label is always visible?

<StackLayout>
<Grid BackgroundColor="Lime">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <!-- Row Labels -->
    <Label Grid.Row="1" Grid.Column="0" Text="Revenue Since" VerticalTextAlignment="Center"  />

    <Label Grid.Row="2" Text="Cloud" VerticalTextAlignment="Center" />
    <Label Grid.Row="3" Text="On-prem" VerticalTextAlignment="Center" />

    <!-- Col Labels -->
    <Label Grid.Column="1" Grid.Row="0" Text="First label with really long text. The quick brown fox jumped over the lazy dogs again and again and again and again and again!" />


    <Label Grid.Column="2" Grid.Row="0" Text="Lord knows they haven't done, much good for anyone. Kept me afarid and cold, with so much to have and hold. Under the curving sky, I'm finally learning why. It matters for me and you, to say it and mean it too." LineBreakMode="WordWrap" />

    <!-- Values -->
    <Label Grid.Column="1" Grid.Row="1" Text="$234234.33" />
    <Label Grid.Column="2" Grid.Row="1" Text="$123456.21" />
    <Label Grid.Column="1" Grid.Row="3" Text="$54311.12" />
    <Label Grid.Column="2" Grid.Row="3" Text="$992134.12" />
    <Label Grid.Column="1" Grid.Row="5" Text="$24522.11" />
    <Label Grid.Column="2" Grid.Row="5" Text="$983745345.12" />
</Grid>
</StackLayout>
Tagged:
Sign In or Register to comment.