带有两列的 GridView Win Phone 8.1 [英] GridView with two columns Win Phone 8.1

问题描述

我目前正在学习 Windows Phone 8.1 应用开发.我正在浏览这个 第 9 频道系列的视频教程.它们很有用，但不幸的是适用于 Windows Phone 8，不是 8.1，所以有些事情我无法理解.我被困在 这种情况.

I am currently learning Windows Phone 8.1 app development. I am going through this Channel 9 series of video tutorials. They are useful but unfortunately are for Windows Phone 8, not 8.1 and so there are some things I can't follow. I am stuck in such a situation.

我想有以下由一些数据驱动的布局:

I want to have the following layout driven by some data:

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

So far I have the following code:

<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>

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

But not sure what element I'm supposed to have in the <DataTemplate>!

推荐答案

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

Gridview works fine in Windows Phone apps. Here is code from one of my apps in the app store. You need to set the size of the outer most 'Grid' of the DataTemplate. You won't be able to get the grids to fit the screen exactly unless you do some dynamic sizing after the UI is loaded.

<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 来限制行数，使其看起来更像您的图片(使项目适合屏幕):

I played around with it and you can get it to look more like your picture (fit the items to the screen) by wrapping your GridView in a Viewbox and then limiting the number of rows by adding this to your GridView:

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

您将不得不调整您的边距以获得正确的间距.

You will have to play around with your margins to get the correct spacing.

这篇关于带有两列的 GridView Win Phone 8.1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！