CODEWITHSUNDEEP
xamarin.forms
Savage
Savage

Reputation: 2349

Xamarin Forms: Grid increasing row heights for all rows on single word wrap

In my Xamarin Forms view, when one row in a grid has a word wrap, it's increasing the row height for all other rows as well. What property can I change to ensure only the affected row has increased row height?

Normal styling:

enter image description here

Styling after wrap on 'Location':

enter image description here

XAML:

<ScrollView>
    <StackLayout Padding="10" x:DataType="auctions:VehicleViewModel">
        <ActivityIndicator x:Name="ActivitySpinner" IsRunning="True" IsVisible="{Binding IsBusy}" />
        <Label Text="{Binding Error}" StyleClass="Error" IsVisible="{Binding ErrorVisible}" />
        
        <Label Text="Basic Details" StyleClass="HeaderGreen" IsVisible="{Binding IsNotBusy}" />
        <Grid IsVisible="{Binding IsNotBusy}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>

            <Label Text="Model" StyleClass="Label" Grid.Column="0" Grid.Row="0" />
            <Label Text="{Binding Vehicle.VehicleModel}" Grid.Column="1" Grid.Row="0" />
            <Label Text="Registration" StyleClass="Label" Grid.Column="0" Grid.Row="1" />
            <Label Text="{Binding Vehicle.Registration}" Grid.Column="1" Grid.Row="1" />
            <Label Text="Year" StyleClass="Label" Grid.Column="0" Grid.Row="2" />
            <Label Text="{Binding Vehicle.Year}" Grid.Column="1" Grid.Row="2" />
            <Label Text="Mileage (Kms)" StyleClass="Label" Grid.Column="0" Grid.Row="3" />
            <Label Text="{Binding Vehicle.Odometer}" Grid.Column="1" Grid.Row="3" />
            <Label Text="Supplier" StyleClass="Label" Grid.Column="0" Grid.Row="4" />
            <Label Text="{Binding Vehicle.Supplier}" Grid.Column="1" Grid.Row="4" />
            <Label Text="Location" StyleClass="Label" Grid.Column="0" Grid.Row="5" />
            <Label Text="{Binding Vehicle.Location}" Grid.Column="1" Grid.Row="5" />
            <Label Text="Gearbox" StyleClass="Label" Grid.Column="0" Grid.Row="6" />
            <Label Text="{Binding Vehicle.GearboxType}" Grid.Column="1" Grid.Row="6" />
            <Label Text="Colour" StyleClass="Label" Grid.Column="0" Grid.Row="7" />
            <Label Text="{Binding Vehicle.Colour}" Grid.Column="1" Grid.Row="7" />
            <Label Text="Interior Colour" StyleClass="Label" Grid.Column="0" Grid.Row="8" />
            <Label Text="{Binding Vehicle.InteriorColour}" Grid.Column="1" Grid.Row="8" />
            <Label Text="Financed By" StyleClass="Label" Grid.Column="0" Grid.Row="9" />
            <Label Text="{Binding Vehicle.FinancedBy}" Grid.Column="1" Grid.Row="9" />
            <Label Text="Trade Price" StyleClass="Label" Grid.Column="0" Grid.Row="10" />
            <Label Text="{Binding Vehicle.TradePrice, Converter={StaticResource Currency}}" Grid.Column="1" Grid.Row="10" />
            <Label Text="Retail Price" StyleClass="Label" Grid.Column="0" Grid.Row="11" />
            <Label Text="{Binding Vehicle.RetailPrice, Converter={StaticResource Currency}}" Grid.Column="1" Grid.Row="11" />
            <Label Text="New Price" StyleClass="Label" Grid.Column="0" Grid.Row="12" />
            <Label Text="{Binding Vehicle.NewPrice, Converter={StaticResource Currency}}" Grid.Column="1" Grid.Row="12" />
        </Grid>

Upvotes: 0

Views: 1219

Answers (1)

adamm
adamm

Reputation: 919

Try with defining Auto height:

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

Here's the docs for Xamarin.Forms Grid, check the Rows and columns paragraph. As stated in the docs, you shold try to ensure that as few rows as possible are set to Auto size. So, use this only for the affected rows.

Upvotes: 1

Related Questions