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

Question

I'm writing a UWP app and have several areas where searches are performed and results are rendered in a ListView where the ItemTemplate is defined inside a DataTemplate. Nothing fancy is going on here - just returns a list of items in a single "column", if you will.

There are three supported screen states (or widths), 320, 640, and 1024. I'd like to render these search results in two "columns" when the screen state is 640 or 1024 (wide states).

I'd like to use adaptive triggers for this task, but I'm at a loss of how to do this intelligently. There are examples of creating different views for each device family, but they seem too dependent on checking the device family. Best practices dictate using screen width thresholds instead. Either way, it seems this could easily be accomplished using adaptive triggers.

Any insight or examples of where this is done would be appreciated. The code is included to provide more context and to act as my starting point.

    <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

What I'd do to use a GridView instead a ListView, and change the GridView's ItemsPanel based on the width changes.

By using a GridView with an item width as wide as the screen size (320) you can get it to behave like a ListView, and if the GridView get's wider the content will automatically produce two columns for you. The only thing not to forget is to change the default scrolling direction of the ItemsPanel from horizontal to vertical.