Проблема форматирования шаблона XAML GridView Xamarin.Forms

Question

У меня есть приложение Xamarin и я просто не могу понять XML. Я сделал несколько XAML для Windows Магазина приложений, но различия в Xamarin кажутся странными. У меня есть следующий код для раздела на главной странице, я не могу заставить фоновую сетку изменить размер с 5 изображениями. Основная сетка и gridview.itemtemplate остаются фиксированного размера независимо от того, что я изменяю. Таким образом, изображения c направляются вправо от сетки. Я постараюсь прикрепить скриншот с результатом. В любом случае, я бы хотел, чтобы фоновая сетка автоматически изменяла размер до горизонтального StackLayout. Это только для тестирования, так как мое окончательное решение будет заключаться в том, чтобы встроить еще один GridView на основе наблюдаемой коллекции. Просто используйте для тестирования изображения stati c.

    <ContentPage.Content>
        <Grid BackgroundColor="{Binding BackgroundColor}">
            <ScrollView>
                <controls:GridView 
                    ItemSelected="{Binding SelectedRack,Mode=TwoWay}"
                    ItemsSource="{Binding Racks}"
                    MaxColumns="{Binding MaxColumns}"
                    ItemTappedCommand="{Binding OnItemTappedCommand}"
                    WidthRequest="{Binding WidthRequest}"
                    TileHeight="{Binding TileHeight}"
                    ColumnSpacing="10"
                    Padding="5"
                    RowSpacing="5"
                    VerticalOptions="Start">
                    <controls:GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid Margin="5,5,0,0" BackgroundColor="Pink">
                                <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
                                    <StackLayout Orientation="Horizontal" Margin="10,10,10,10" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="{Binding State,Converter={StaticResource SensorStateToBackgroundColorConverter}}">
                                        <Image
                                            HeightRequest="{Binding TargetHeight}"
                                            WidthRequest="{Binding TargetWidth}"
                                            Source="{Binding ImageName}"/>
                                        <Image
                                            HeightRequest="{Binding TargetHeight}"
                                            WidthRequest="{Binding TargetWidth}"
                                            Source="{Binding ImageName}"/>
                                        <Image 
                                            HeightRequest="{Binding TargetHeight}"
                                            WidthRequest="{Binding TargetWidth}"
                                            Source="{Binding ImageName}"/>
                                        <Image 
                                            HeightRequest="{Binding TargetHeight}"
                                            WidthRequest="{Binding TargetWidth}"
                                            Source="{Binding ImageName}"/>
                                        <Image
                                            HeightRequest="{Binding TargetHeight}"
                                            WidthRequest="{Binding TargetWidth}"
                                            Source="{Binding ImageName}"/>
                                    </StackLayout>
                                    <Label Text="{Binding Name}" FontSize="Large" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="End" TextColor="Black"/>
                                </StackLayout>
                            </Grid>
                        </DataTemplate>
                    </controls:GridView.ItemTemplate>
                </controls:GridView>
            </ScrollView>
        </Grid>
    </ContentPage.Content>

Answer 1

Не уверен, что делает ваш контроль controls:GridView. Но размер, данный этим взглядом его детям, кажется, проблема здесь. Я заменил этот элемент управления сеткой и получил ту же проблему.

Причина в том, что вы установили WidthRequest для этого элемента управления, который не требуется. Это ограничит ширину. Удалите WidthRequest и замените его на HorizontalOptions как StartAndExpand. Это позволит элементу управления принять любой размер, предложенный его родителем. Это работало нормально для меня.

Примечание. Если вы хотите, чтобы ваше представление принудительно заполняло доступное пространство, используйте значение FillAndExpand для вашего свойства VerticalOptions и HorizontalOptions вашего представления.

---

Пожалуйста, найдите код ниже.

<Grid Padding="5" BackgroundColor="LightGray">
    <ScrollView Padding="5" BackgroundColor="Red">
        <Grid BackgroundColor="Aqua" ColumnSpacing="10" Padding="5" RowSpacing="5" 
                HorizontalOptions="StartAndExpand" VerticalOptions="Start">
            <Grid Margin="5,5,0,0" BackgroundColor="Pink">
                <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
                    <StackLayout Orientation="Horizontal" Margin="10,10,10,10" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="Yellow">
                        <Image HeightRequest="100" WidthRequest="50" Source="github.png"/>
                        <Image HeightRequest="100" WidthRequest="50" Source="github.png"/>
                        <Image HeightRequest="100" WidthRequest="50" Source="github.png"/>
                        <Image HeightRequest="100" WidthRequest="50" Source="github.png"/>
                        <Image HeightRequest="100" WidthRequest="50" Source="github.png"/>
                    </StackLayout>
                    <Label Text="Name" FontSize="Large" FontAttributes="Bold" HorizontalTextAlignment="Center"
                            VerticalTextAlignment="End" TextColor="Black"/>
                </StackLayout>
            </Grid>
        </Grid>
    </ScrollView>
</Grid>

---

Ниже приведен вывод, который я получил.

Надеюсь, это поможет вам.