Question

我目前正在使用GridView来显示用户可以滑过的图片列表。当他们接近列表的末尾时，通过使用实现ObservableCollection的{{1}}来加载新图像。

如何更改单元格大小以匹配图像的大小？图像有时是纵向的，有时是横向的，有时是非均匀的纵横比;但是，ISupportIncrementalLoading坚持要求所有单元格的宽度相同。

e.g。如果我选择以下内容：

GridView

我最终总是与第一张图像的宽度相同。如果我尝试设置图像宽度（我有一个返回图像宽度的数据绑定属性），一些图像最终会变宽，但它们所在的单元格仍然与其他所有单元格的宽度相同。

<GridView
    x:Name="itemGridView"
    AutomationProperties.AutomationId="ItemsGridView"
    AutomationProperties.Name="Items"
    TabIndex="1"
    Grid.RowSpan="2"
    Padding="116,136,116,46"
    SelectionMode="None"
    DataFetchSize="10"
    IncrementalLoadingThreshold="5"
    ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
    IncrementalLoadingTrigger="Edge"
    IsSwipeEnabled="false">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid HorizontalAlignment="Left">
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                    <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                </Border>
                <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                    <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,5,0"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

设置层次结构中任何项目的宽度似乎没有帮助 - 即使把它放到极端也没有用 - 例如。

<Image Width="{Binding ImageWidth}" Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>

Answer 1

有两个ItemsPanelTemplate-s支持增量加载：VirtualizingStackPanel和WrapGrid。 WrapGrid不允许不同项目的大小。 VirtualizingStackPanel允许可变大小的项目，但在一行/列中显示项目。因此，如果您需要不同的布局，则需要VirtualizingPanel的自定义实现。

但我不明白你想要什么。如果需要网格，则行或列中的所有项目将具有相同的高度或宽度。你想要虚拟化VariableSizedWrapGrid吗？

Answer 2

查看VariableSizedWrapGrid

尝试将此xaml添加到GridView声明中：

<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <VariableSizedWrapGrid />
    </ItemsPanelTemplate>
</GridView.ItemsPanel>

GridView宽度基于ItemsSource

2 个答案: