UWP响应:景观

时间:2016-01-30 15:12:27

标签: listview responsive-design windows-10 multiple-columns uwp

我正在编写一个显示列表中包含热点的列表视图的应用程序,如果窗口很宽(Win10)或手机处于打开状态,我希望列表在多列中显示数据景观(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>

1 个答案:

答案 0 :(得分:1)

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