UWP 应用的 ListView 项的自适应呈现答案

【问题标题】：Adaptive rendering of ListView items for UWP appUWP 应用的 ListView 项的自适应呈现
【发布时间】：2016-01-13 02:09:25
【问题描述】：

我正在编写一个 UWP 应用程序，并且有几个区域在其中执行搜索并将结果呈现在 ListView 中，其中 ItemTemplate 在 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>

【问题讨论】：

标签： xaml listview windows-mobile uwp

【解决方案1】：

如何使用 GridView 而不是 ListView，并根据宽度变化更改 GridView 的 ItemsPanel。

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

【讨论】：