Xamrin Forms RelativeLayout внутри Stacklayout показывает пустой экран

Question

Я занимаюсь разработкой кроссплатформенного приложения.Я использую сетку на своей домашней странице, которая покажет четыре изображения и метки вместе с ними.Я использовал четыре стека в сетке.Каждый стековый макет содержит релевантный макет для объединения изображения и метки вместе. Все работает нормально, пока я не добавлю относительный макет к последнему макету стека. В чем проблема.Любая помощь любезна.

 <?xml version="1.0" encoding="utf-8" ?>
            <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PS.DashBoard"
             BackgroundColor="White">
             <ContentPage.Content>
             <ScrollView>
             <StackLayout>
                <Image Source="logotrim.png"></Image>

                <Grid RowSpacing="0"  Margin="0,30,0,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="10" />
                        <RowDefinition Height="*" />

                    </Grid.RowDefinitions>
                    <Grid Grid.Row="1" ColumnSpacing="80" HorizontalOptions="Center" 
                     RowSpacing="80" VerticalOptions="Center">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />


                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />


                        </Grid.ColumnDefinitions>


                        <StackLayout  Grid.Row="0" Grid.Column="0" >
                            <RelativeLayout>
                                <Image Source="time.png" WidthRequest="80"   HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"  />
                                <Label Text="Time" Margin="0,8,0,0"
                                                    TextColor="Black" 
                                                    HorizontalTextAlignment="Center"  
                                                    BackgroundColor="White" 
                                                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                                                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-17}"/>

                            </RelativeLayout>
                        </StackLayout>
                        <StackLayout Grid.Row="0" Grid.Column="1" >
                            <RelativeLayout>
                                <Image Source="emp.png" WidthRequest="80"   HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
                                <Label Text="Emp" Margin="0,8,0,0"
                                                    TextColor="Black" 
                                                    HorizontalTextAlignment="Center"  
                                                    BackgroundColor="White" 
                                                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                                                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-17}"/>

                            </RelativeLayout>
                        </StackLayout>
                        <StackLayout Grid.Row="1" Grid.Column="0" >
                            <RelativeLayout>

                                <Image  Source="chart.png"  WidthRequest="80"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
                                <Label Text="Statistics" Margin="0,8,0,0"
                                                    TextColor="Black" 
                                                    HorizontalTextAlignment="Center"  
                                                    BackgroundColor="White" 
                                                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                                                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-17}"/>
                            </RelativeLayout>
                        </StackLayout>
                        <StackLayout Grid.Row="1" Grid.Column="1" >
                            <RelativeLayout>

                                <Image  Source="info.png"  WidthRequest="80"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
                                <Label Text="info" Margin="0,8,0,0"
                                                    TextColor="Black" 
                                                    HorizontalTextAlignment="Center"  
                                                    BackgroundColor="White" 
                                                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                                                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-17}"/>
                            </RelativeLayout>
                        </StackLayout>


                    </Grid>
                </Grid>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>`

Answer 1

При написании в Xamarin.Forms вы всегда должны быть осторожны, чтобы не включать много ненужных вложенных макетов, так как это может повредить вашей Производительности .Просмотрите свой код и посмотрите, сможете ли вы оптимизировать его, удалив ненужные вложенные макеты.

Я подумал, что поделюсь этим с вами, чтобы расширить свои знания, и это плавно приведет меня к решению вашей проблемы.Вам не нужно относиться к расположению стека + вложенный относительный макет, чтобы отобразить то, что вы хотите в этом.Вы можете добиться желаемого вида с помощью Grid

     <Grid Grid.Row="0" Grid.Column="1" >
<!-- Here you  can put your grid columns and rows -->
<!-- on both the image and label you can assign them columns and rows with ColumnSpan / RowSpan -->
                                <Image Source="emp.png" WidthRequest="80"   HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
                                <Label Text="Emp" Margin="0,8,0,0"
                                                    TextColor="Black" 
                                                    HorizontalTextAlignment="Center"  
                                                    BackgroundColor="White"/>

                        </Grid>

. Смотрите здесь для справки: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid