Xmlrin窗体RelativeLayout Stacklayout内显示空白的屏幕

时间:2018-12-12 08:48:11

标签: xamarin.forms grid-layout

我正在开发一个跨平台应用程序。我在主页中使用网格,该网格将显示四个图像和标签。我在网格内部使用了四个stacklayout。每个堆叠布局都包含将图像和标签组合在一起的releativelayout。一切正常,直到我在最后一个stacklayout中添加relativelayout为止。任何帮助都是友善的。

 <?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>`

1 个答案:

答案 0 :(得分:1)

在Xamarin.Forms中编写时,应始终注意不要包含许多不必要的嵌套布局,因为这可能会损害您的Performance。浏览代码,看看是否可以通过删除不必要的嵌套布局来优化代码。

我想与您分享这一点,以增加您的知识,这可以使我顺利地解决您的问题。您不需要stacklayout +嵌套的相对布局即可显示所需的内容。您可以使用网格

获得所需的外观
     <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