xamarin表单滚动视图

我试图用Xamarin表单创建一个包含两列和五行的页面 .

两列都有图像,底部有标签,背景为白色 . 图像和标签需要处于相同的堆栈布局中 . 基本上每个堆栈布局都是重定向到其他页面的缩略图 .

这是我尝试过的:

<ScrollView>
        <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                    <StackLayout>
                        <StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="0">
                         <Image Source="My_concern.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                            <Label Text="Raise A Concern"></Label>
                        </StackLayout>
                        <StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="0">
                            <Image Source="img_leave_plan.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                            <Label Text="Leave Plan" ></Label>
                        </StackLayout>
                        <StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="1">
                            <Image Source="My_Checklist.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                            <Label Text="Leave Plan"></Label>
                        </StackLayout>
                        <StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="1">
                            <Image Source="img_facilities.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                            <Label Text="Facilities"></Label>
                        </StackLayout>
                        <StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="2">
                            <Image Source="My_buddies.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                            <Label Text="My Buddies"></Label>
                        </StackLayout>
                        <StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="2">
                            <Image Source="SapphireArticles.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                            <Label Text="Articles"></Label>
                        </StackLayout>
                        <StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="3">
                            <Image Source="policy.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                            <Label Text="Policies"></Label>
                        </StackLayout>
                        <StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="3">
                            <Image Source="SapphireNews.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                            <Label Text="News"></Label>
                        </StackLayout>
                        <StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="4">
                            <Image Source="Compass.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                            <Label Text="Compass"></Label>
                        </StackLayout>

                    </StackLayout>
                </Grid>


            </ScrollView>

我收到了错误

没有找到“儿童”的 property ,可绑定 property 或事件 .

我究竟做错了什么?

回答(1)

2 years ago

您的stacklayout是网格的直接子节点,没有指定行或列 . 您在更深层次指定它,其中网格不是父级 .

<Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
                <StackLayout>
                    <StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="0">

布局也不是最佳的 . 你可能想考虑重构这个 .

没有额外堆栈布局的代码:

<ScrollView>
    <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
                    <StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="0">
                     <Image Source="My_concern.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                        <Label Text="Raise A Concern"></Label>
                    </StackLayout>
                    <StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="0">
                        <Image Source="img_leave_plan.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                        <Label Text="Leave Plan" ></Label>
                    </StackLayout>
                    <StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="1">
                        <Image Source="My_Checklist.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                        <Label Text="Leave Plan"></Label>
                    </StackLayout>
                    <StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="1">
                        <Image Source="img_facilities.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                        <Label Text="Facilities"></Label>
                    </StackLayout>
                    <StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="2">
                        <Image Source="My_buddies.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                        <Label Text="My Buddies"></Label>
                    </StackLayout>
                    <StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="2">
                        <Image Source="SapphireArticles.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                        <Label Text="Articles"></Label>
                    </StackLayout>
                    <StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="3">
                        <Image Source="policy.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                        <Label Text="Policies"></Label>
                    </StackLayout>
                    <StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="3">
                        <Image Source="SapphireNews.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                        <Label Text="News"></Label>
                    </StackLayout>
                    <StackLayout BackgroundColor="White" Grid.Column="1" Grid.Row="4">
                        <Image Source="Compass.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"></Image>
                        <Label Text="Compass"></Label>
                    </StackLayout>

            </Grid>
        </ScrollView>