为 UWP 应用程序自适应呈现 ListView 项目

Question

我正在编写一个 UWP 应用程序，并在多个区域执行搜索并在 ListView 中呈现结果，其中 ItemTemplate 在 DataTemplate 中定义。这里没有什么特别的 - 如果你愿意的话，只是 returns 单个 "column" 中的项目列表。

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

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

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

    <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 的默认滚动方向从水平更改为垂直。

为 UWP 应用程序自适应呈现 ListView 项目

Adaptive rendering of ListView items for UWP app

xaml

listview

windows-mobile

uwp