Как создать следующий вид сетки в форме Xamarin в Xamarin iOS, Android - PullRequest
Новая
       4

Как создать следующий вид сетки в форме Xamarin в Xamarin iOS, Android

2 голосов
/ 14 февраля 2020

Необходим такой же дизайн формы. Моя кодировка - это форма Xamarin, 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" />

1 Ответ

3 голосов
/ 14 февраля 2020

enter image description here Попробуйте этот код 

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