CODEWITHSUNDEEP
xamlxamarinxamarin.formsxamarin.androidxamarin.ios
Abirami Jothi
Abirami Jothi

Reputation: 69

How to design the following grid view in Xamarin form in Xamarin iOS,Android

Needed same design of the form. My coding is this Xamarin form, Xamarin iOS, Android

<Frame Grid.Row="0" Grid.Column="0">
    <Image
        HeightRequest="50"
        Source="Dash01.png"
        WidthRequest="50" />
    <Label Text="Cow Milk"/>
</Frame>
<BoxView
    HeightRequest="3"
    HorizontalOptions="Fill"
    VerticalOptions="Start"
    Color="DimGray" Grid.Row="1" Grid.Column="0" />

Upvotes: 2

Views: 371

Answers (1)

Chetan Rawat
Chetan Rawat

Reputation: 588

enter image description hereTry this Code

<StackLayout
            Padding="0,10"
            BackgroundColor="#e8f5e4"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand">
            <CollectionView
                x:Name="foodList"
                Grid.Row="1"
                Margin="12,0"
                HorizontalOptions="FillAndExpand"
                ItemSizingStrategy="MeasureAllItems"
                SelectionMode="Single"
                VerticalOptions="FillAndExpand">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout
                        HorizontalItemSpacing="5"
                        Orientation="Vertical"
                        Span="2"
                        VerticalItemSpacing="5" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Frame
                            Margin="5"
                            Padding="0"
                            BackgroundColor="Pink"
                            CornerRadius="10"
                            HorizontalOptions="FillAndExpand"
                            VerticalOptions="Fill">
                            <StackLayout
                                Margin="0,0,0,10"
                                Padding="10"
                                BackgroundColor="White"
                                HorizontalOptions="FillAndExpand"
                                VerticalOptions="Fill">
                                <Image
                                    Aspect="AspectFit"
                                    HeightRequest="50"
                                    HorizontalOptions="Center"
                                    Source="star.png" />
                                <Label
                                    FontSize="18"
                                    HorizontalOptions="Center"
                                    HorizontalTextAlignment="Center"
                                    Text="{Binding}" />
                            </StackLayout>
                        </Frame>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>

Upvotes: 3

Related Questions