xaml - Why My Grid Height Over Phone Size in Xamarin iOS

Question

iOS Screen Simulator is IPhone 12 Pro MAX

Android Screen Emulator is Pixel 3a XL

        <Grid>
            <StackLayout x:Name="DetailStack" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <Grid RowSpacing="0" ColumnSpacing="0" x:Name="DetailGrid">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0.1*"/>
                        <RowDefinition Height="0.1*"/>
                        <RowDefinition Height="0.1*"/>
                        <RowDefinition Height="0.7*"/>
                    </Grid.RowDefinitions>
                    <Grid RowSpacing="0" ColumnSpacing="0" Grid.Row="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.25*"/>
                            <ColumnDefinition Width="0.05*"/>
                            <ColumnDefinition Width="0.7*"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Text="" Style="{StaticResource StyledTitleLabel}" BackgroundColor="AliceBlue"/>
                        <Label Grid.Column="1" Text=" : " Style="{StaticResource StyledTitleLabel}"/>
                        <Label Grid.Column="2" Text="{Binding DcpTreeNode.Dcp.ValueType.Name}" Style="{StaticResource StyledContentLabel}" BackgroundColor="AntiqueWhite"/>
                    </Grid>
                    <Grid RowSpacing="0" ColumnSpacing="0" Grid.Row="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.25*"/>
                            <ColumnDefinition Width="0.05*"/>
                            <ColumnDefinition Width="0.7*"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Text="" Style="{StaticResource StyledTitleLabel}" BackgroundColor="Bisque"/>
                        <Label Grid.Column="1" Text=" : " Style="{StaticResource StyledTitleLabel}"/>
                        <Label Grid.Column="2" Text="{Binding DcpTreeNode.Dcp.Driver.Name}" Style="{StaticResource StyledContentLabel}" BackgroundColor="DarkMagenta"/>
                    </Grid>
                    <Grid RowSpacing="0" ColumnSpacing="0" Grid.Row="2">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.25*"/>
                            <ColumnDefinition Width="0.05*"/>
                            <ColumnDefinition Width="0.7*"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Text="" Style="{StaticResource StyledTitleLabel}" BackgroundColor="LawnGreen"/>
                        <Label Grid.Column="1" Text=" : " Style="{StaticResource StyledTitleLabel}"/>
                        <Label Grid.Column="2" Text="{Binding DcpTreeNode.Dcp.Comment}" Style="{StaticResource StyledContentLabel}" BackgroundColor="LightGreen"/>
                    </Grid>
                    <Grid RowSpacing="0" ColumnSpacing="0" Grid.Row="3">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.25*"/>
                            <ColumnDefinition Width="0.05*"/>
                            <ColumnDefinition Width="0.7*"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Text="" Style="{StaticResource StyledTitleLabel}" BackgroundColor="DeepPink"/>
                        <ListView Grid.Column="1" Grid.ColumnSpan="2" ItemsSource="{Binding EnumValueList, Source={x:Reference PageInstance}}" SelectionMode="None"/>
                    </Grid>
                </Grid>
            </StackLayout>
            <!--<ScrollView VerticalOptions="Center" HorizontalOptions="FillAndExpand" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
                
            </ScrollView>-->
        </Grid>

Above picture and code are my project

I was debug in my android phone result was in android it is good, but in iphone Grid was over phone screen size

i check what problem using scrollview

check result is so sad

in android phone my app ui is good work but in iphone my app ui is over screen size(scroll was created)

Why occured this happen? how to fix it?

This is to delete stacklayout

question from:https://stackoverflow.com/questions/65840530/why-my-grid-height-over-phone-size-in-xamarin-ios

Answer 1

Please don't use Grid inside StackLayout and inside Grid if not neccessary. It easy to occur error. Do you try remove StackLayout. I think your problem is using StackLayout. Besides, it may be base on your styles define.