带有两列的 GridView Win Phone 8.1答案

【问题标题】：GridView with two columns Win Phone 8.1带有两列的 GridView Win Phone 8.1
【发布时间】：2015-06-12 13:14:45
【问题描述】：

我目前正在学习 Windows Phone 8.1 应用程序开发。我正在浏览这个Channel 9 series 的视频教程。它们很有用，但不幸的是适用于 Windows Phone 8，不是 8.1，所以有些东西我无法理解。我被困在such a situation。

我希望有以下由一些数据驱动的布局：

到目前为止，我有以下代码：

<Pivot x:Uid="Pvt">
  <PivotItem Header="{Binding Animals.Title}">
    <GridView ItemsSource="{Binding Animals.Items}">
      <GridView.ItemTemplate>
        <DataTemplate>
          <!-- not sure what would go in here -->
        </DataTemplate>
      </GridView.ItemTemplate>
    </GridView>
  </PivotItem>
</Pivot>

但不确定我应该在 <DataTemplate> 中包含什么元素！

【问题讨论】：

Windows Phone 8 中没有 GridView
这就是我说8.1的原因？我想使用 LongListSelector（就像视频系列中的 Bob）但不能，因为它对我来说不存在。

标签： xaml windows-phone-8.1

【解决方案1】：

Gridview 在 Windows Phone 应用程序中运行良好。这是我在应用商店中的一款应用的代码。您需要设置 DataTemplate 最外层“网格”的大小。除非您在加载 UI 后进行一些动态调整，否则您将无法使网格完全适合屏幕。

<GridView Grid.Row="2" Margin="0,0,0,0"
        ItemsSource="{Binding InfoTypeList}"
        SelectionMode="None"
        IsItemClickEnabled="True"
        ItemClick="GridView_ItemClick">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Left" Width="120" Height="120">
                    <Border Background="{ThemeResource PhoneAccentBrush}">
                        <Image Source="{Binding ImagePath}" Stretch="Uniform" Margin="10,10,10,20"/>
                    </Border>
                    <StackPanel VerticalAlignment="Bottom">
                        <TextBlock Text="{Binding Name}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" FontSize="18" HorizontalAlignment="Center" FontWeight="SemiBold" IsTextScaleFactorEnabled="False"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemContainerStyle>
            <Style TargetType="FrameworkElement">
                <Setter Property="Margin" Value="20 20 0 0"/>
            </Style>
        </GridView.ItemContainerStyle>
    </GridView>

编辑：我玩弄了它，您可以通过将 GridView 包装在 Viewbox 中，然后通过将其添加到 GridView 来限制行数，使其看起来更像您的图片（使项目适合屏幕）：

            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="2" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>

您必须调整边距以获得正确的间距。

【讨论】：