GridView with two columns Win Phone 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>!

回答1:

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>

EDIT: 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.

来源：https://stackoverflow.com/questions/30804051/gridview-with-two-columns-win-phone-8-1