关于WP8.1 RunTime框架下 GridView垂直两列排列数据的问题

Question

先看下设计图：

我使用的是GridView，代码如下：

  <GridView FontSize="16" x:Name="girdView_HotVideos"
                        SelectionMode="None"
                        IsItemClickEnabled="True"
                        ItemsSource="{Binding HotVideos}" 
                        ContainerContentChanging="GridView_ContainerContentChanging"
                        ItemClick="GridView_ItemClick" >
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2" />
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.ItemTemplate>
                            <DataTemplate>
                          
                                <Grid  Width="170" Height="170"  Margin="0,0,1,1"  >
                                    <Image  Source="{Binding RecommendCoverPic}"/>
                                    <Border VerticalAlignment="Bottom" Background="#99000000" >
                                        <StackPanel Margin="0,3"   Orientation="Horizontal" >
                                            <Border   Width="30" Height="30" Margin="3" CornerRadius="45">
                                                <Border.Background>
                                                    <ImageBrush>
                                                        <ImageBrush.ImageSource>
                                                            <BitmapImage UriSource="{Binding Media.User.Avatar}" DecodePixelHeight="30" DecodePixelWidth="30"/>
                                                        </ImageBrush.ImageSource>
                                                    </ImageBrush>
                                                </Border.Background>
                                                <Image Height="12" Width="12" Source="/Icons/vip.png" Visibility="{Binding Media.User.Verified, Converter={StaticResource VisibilityConverter}}" VerticalAlignment="Bottom" HorizontalAlignment="Right" />
                                            </Border>
                                            <TextBlock Text="{Binding RecommendCaption}" Foreground="White"  HorizontalAlignment="Stretch" VerticalAlignment="Center" TextTrimming="WordEllipsis" />
                                        </StackPanel>
                                    </Border>
                                </Grid>
                           
                        </DataTemplate>
                        </GridView.ItemTemplate>
                    </GridView>

有两个问题：

1、我如果设置DataTemplate里面的Gird 的宽度和高度，这样的话如果遇到大屏手机，就会变成三列，如果遇到小点的屏幕就会变成单列（宽度170），单列的时候每项右边会很空，我想知道怎么做才能想以前Silverlight框架下，它自己会自动放大和缩小来适应屏幕的大小！

2、如果我在DataTemplate里面的Grid外加一个ViewBox的话 ，ViewBox也是需要设置宽度和高度的，这样还是会遇到上面的那个问题。

我就是想弄成二列垂直布局数据，不使用硬编码写死每项的宽度和高度，然后遇到大屏和小屏会自动放大或者缩小，请问该怎么解决？

Answer 1

首先设置ItemStyle

<Style TargetType="GridViewItem">
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>

然后把做外层的Grid 宽度和高度去掉。<Grid  Margin="0,0,1,1"  >

GridViewItem默认的Style里面 内容的航向和纵向是居中的，只要设置成铺满即可。

ListView的道理也是一样。

Answer 2

感谢你的回复，如果这样设置样式的话，每一项的宽高还是没有给定值，它会很小 怎么办？

Answer 3

我忘记了一点：

<GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2" Loaded="WrapGrid_Loaded"/>
                </ItemsPanelTemplate>

加上Loaded事件，在里面根据宽度和分割的列数设置每个Item打大小。

private void WrapGrid_Loaded(object sender, RoutedEventArgs e)
        {
            WrapGrid wg = sender as WrapGrid;
            wg.ItemHeight = wg.ItemWidth = wg.ActualWidth / wg.MaximumRowsOrColumns;
        }

你可以试一下。

Answer 4

很感谢你的回复，你的方法和我想的差不多，最终还是要根据容器宽度去设定每项的宽度。

我是这样做的，我把里面的每项的宽度绑定到GridView的宽度上，然后写个绑定值转换器，在转换器里面去（GridView宽度-24）/2 ，然后每项的高度直接绑定自身的宽度，然后就搞定了