Xamarin.Forms XAML GridView 模板格式问题答案

【问题标题】：Xamarin.Forms XAML GridView template formatting issueXamarin.Forms XAML GridView 模板格式问题
【发布时间】：2020-02-02 00:08:08
【问题描述】：

我有一个 Xamarin 应用程序，但无法识别 XML。我在 Windows Store Apps 上做了一堆 XAML，但 Xamarin 中的差异看起来很奇怪。我的 MainPage 上有一个部分的以下代码，我似乎无法让背景网格改变 5 个图像的大小。无论我更改什么，主网格和 gridview.itemtemplate 都保持固定大小。因此，静态图像位于网格的右侧。我将尝试附上结果的屏幕截图。无论如何，我希望背景网格自动调整到水平 StackLayout 的大小。这只是为了测试，因为我的最终解决方案是嵌入另一个基于可观察集合的 GridView。仅使用静态图像进行测试。

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

【问题讨论】：

GridView 在 Xamarin 中不存在。它可能是第 3 方控件，如果您发现了错误，您应该联系发布该错误的人。当然在这里问是合法的。

标签： xaml xamarin xamarin.forms

【解决方案1】：

我不确定您的控件 controls:GridView 做了什么。但是，这种观点赋予其孩子的规模似乎是这里的问题。我用网格替换了那个控件并遇到了同样的问题。

原因是您为该控件设置了WidthRequest，这不是必需的。它会限制宽度。删除WidthRequest 并将其替换为HorizontalOptions 作为StartAndExpand。这将允许控件采用其父级提供的任何大小。对我来说效果很好。

注意：如果您希望视图强制填充可用空间，请为视图的 VerticalOptions 和 HorizontalOptions 属性使用 FillAndExpand 值。

请在下面找到代码。

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

下面是我得到的输出。

希望对你有帮助。

【讨论】：

为方便起见，我在示例代码中对这些值进行了硬编码。您可以根据您对所需结果的要求修改代码。如果对您有帮助，请接受/支持答案，这样它也将对其他人有所帮助。编码快乐... :)
非常感谢您抽出宝贵的时间。我的实际问题是我使用的“GridView”库。我想要的是 CollectionView，但正如我刚才发现的那样，直到 v4.3 的表单才可用。我刚刚更新，这似乎正是我所需要的，现在我有了我想要的行为。非常感谢您的帮助，并愿意对此进行调查。