UWP 响应式：横向多列列表视图

Question

我正在编写一个应用程序，在列表中显示带有热点的列表视图，如果 window 很宽 (Win10) 或 phone 横向 (WP) 我在互联网上唯一能找到的是 HTML5 页面或在不同列中显示不同数据，但不能将数据分成 2 列

这是我目前拥有的代码：

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" DataContext="{Binding Source={StaticResource viewModelLocator}, Path=HotspotViewListViewModel }">
    <interactivity:Interaction.Behaviors>
        <core:EventTriggerBehavior EventName="Loaded">
            <core:InvokeCommandAction Command="{Binding PageLoadedCommand}"/>
        </core:EventTriggerBehavior>
    </interactivity:Interaction.Behaviors>

    <TextBlock Text="ListView" FontSize="32" HorizontalAlignment="Center" Margin="123,0,122,580" />

    <ListView Name="HotspotList" 
              VerticalAlignment="Stretch"
              ItemsSource="{Binding Hotspots}"
              SelectedItem="{Binding SelectedHotspot}" 
              Margin="10,60,10,10"
              >
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Left" Height="50"  VerticalAlignment="Top" Width="340" >
                    <Image HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Width="50" Source="ms-appx:///Assets/Square44x44Logo.png"/>
                    <TextBlock HorizontalAlignment="Left" Margin="55,0,0,0" TextWrapping="Wrap" Text="{Binding Location}" VerticalAlignment="Top" Width="275"/>
                    <TextBlock HorizontalAlignment="Left" Margin="55,25,0,0" TextWrapping="Wrap" Text="{Binding Street}" VerticalAlignment="Top" Width="130"/>
                    <TextBlock HorizontalAlignment="Left" Margin="200,25,0,0" TextWrapping="Wrap" Text="{Binding City, Converter={StaticResource cityConverter} }" VerticalAlignment="Top" Width="95"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>

        <interactivity:Interaction.Behaviors>
            <core:EventTriggerBehavior EventName="SelectionChanged">
                <core:InvokeCommandAction Command="{Binding EditHotspotCommand}" CommandParameter="{Binding ElementName=HotspotList, Path=SelectedItem}" />
            </core:EventTriggerBehavior>
        </interactivity:Interaction.Behaviors>

    </ListView>


</Grid>

Answer 1

显然我很愚蠢，我唯一要做的就是将 ListView 更改为 GridView

UWP 响应式：横向多列列表视图

UWP responsive: MultiColumn listview on landscape

listview

multiple-columns

responsive-design

windows-10

uwp