Question

我正在尝试使用两列和五行在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>

我收到错误

找不到'儿童'的属性，可绑定属性或事件。

我做错了什么？

Answer 1

您的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>

xamarin表单滚动视图

1 个答案: