Question

我正在编写一个UWP应用程序并且有几个区域执行搜索，结果在ListView中呈现，其中ItemTemplate在DataTemplate中定义。这里没有什么花哨的东西 - 如果你愿意的话，只需在一个＆＃34;列＃34;中返回一个项目列表。

有三种支持的屏幕状态（或宽度），320,640和1024.我希望将这些搜索结果呈现在两个＆＃34;列中＃34;当屏幕状态为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。

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

为UWP应用

1 个答案: