xamarin Forms scrollview

Question

I am trying to create a page in Xamarin forms with two columns and five rows.

Both the columns have images with a label at the bottom and a white background. The image and label need to be in the same stack layout. Basically each stack layout is a thumbnail redirecting to other pages.

Here is what I've tried:

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

I am getting the error

No property, bindable property, or event found for 'Children'.

What am I doing wrong?

Rohit Vipin Mathews Rohit Vipin Mathews · Accepted Answer · 2017-12-26T12:09:51

Your stacklayout that is the direct child of grid does not have row or column specified. You are specifying it at a level deeper in which grid is not the parent.

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

Also the layout does not looks optimal. You may want to think about refactoring this.

Code without the extra stack layout :

<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 Forms scrollview

1 Answers