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

Question

我正在编写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> 

Answer 1

我该如何使用GridView代替ListView，并根据宽度变化更改GridView的ItemsPanel。

通过使用宽度与屏幕大小（320）一样的项目宽度的GridView，您可以使其像行为视图一样工作，并且如果GridView变得更宽，则内容会自动为您生成两列。唯一不要忘记的是将ItemsPanel的默认滚动方向从水平改为垂直。