GridView有两列Win Phone 8.1

Question

我目前正在学习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>中应该包含哪些元素！

Answer 1

Gridview在Windows Phone应用程序中运行良好。以下是应用商店中我的某个应用的代码。您需要设置DataTemplate最外层'Grid'的大小。除非在加载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>

您必须使用边距来获得正确的间距。