UWP应用的ListView项的自适应渲染

Question

我正在编写一个UWP应用程序，它在几个区域中执行搜索并在ListView中呈现结果，其中ListTemplate是在DataTemplate内部定义的。 这里没有任何幻想-如果可以的话，只需在单个“列”中返回项目列表即可。

支持三种屏幕状态（或宽度）：320、640和1024。当屏幕状态为640或1024（宽状态）时，我想在两个“列”中呈现这些搜索结果。

我想使用自适应触发器来完成此任务，但我对如何智能地执行此操作一无所知。 有为每个设备系列创建不同视图的示例，但它们似乎过于依赖于检查设备系列。 最佳做法要求改为使用屏幕宽度阈值。 无论哪种方式，似乎都可以使用自适应触发器轻松实现。

任何见解或执行此操作的示例将不胜感激。 包含该代码是为了提供更多上下文并作为我的起点。

    <Page.Resources>
    <ResourceDictionary>
        <Style x:Key="TextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource LargeTextBlockStyle}">
            <Setter Property="Foreground" Value="{StaticResource TitleBrush}" />
        </Style>
        <DataTemplate x:Key="SearchResult">
            <StackPanel Width="{Binding ActualWidth, ElementName=Parent}">
                <Border Background="Gray" MinWidth="235">
                    <Grid Height="155">
                        <Image Source="{Binding SearchResultImage}"
                               Style="{StaticResource ImageStyle}" />
                        <Rectangle Fill="{StaticResource BackgroundBrush}" />
                        <StackPanel Margin="10,10,15,10" VerticalAlignment="Center">
                            <TextBlock Text="{Binding SearchResultName}"
                                       Style="{StaticResource TextBlockStyle}"
                                       VerticalAlignment="Center" />
                        </StackPanel>
                    </Grid>
                </Border>
                <Button Style="{StaticResource ButtonStyle}"
                        Command="{Binding ViewRecipeCommand, Source={StaticResource Locator}}"
                        CommandParameter="{Binding}">
                    <StackPanel Margin="0" Orientation="Horizontal" HorizontalAlignment="Center">
                        <SymbolIcon Symbol="Calendar" Margin="0,0,10,0" />
                        <TextBlock x:Uid="ViewRecipeCommandTextBlock"
                                   Text="View Recipe"
                                   Style="{StaticResource TextBlockStyle}" />
                    </StackPanel>
                </Button>
            </StackPanel>
        </DataTemplate>
    </ResourceDictionary>
</Page.Resources>

<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="10" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <StackPanel x:Name="HeaderStackPanel" Grid.Row="0" Margin="10">
        <TextBlock x:Uid="RecipesTitle" Text="All Recipes"
                   Style="{StaticResource TextBlockStyle}"
                   Margin="0,0,0,10" />
    </StackPanel>
    <ListView x:Name="ResultsListView" Grid.Row="2"
              ItemsSource="{Binding AllRecipes}"
              ItemTemplate="{StaticResource SearchResult}" />
</Grid>

Answer 1

我要做的是使用GridView而不是ListView，然后根据宽度更改来更改GridView的ItemsPanel。

通过使用项目宽度与屏幕尺寸（320）一样宽的GridView，您可以使其表现得像ListView，并且如果GridView变宽，则内容将自动为您生成两列。 唯一要记住的是将ItemsPanel的默认滚动方向从水平更改为垂直。