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

  • 问题

  • 先看下设计图:

    我使用的是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也是需要设置宽度和高度的,这样还是会遇到上面的那个问题。

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

    2015年4月21日 10:50

答案

  • 我忘记了一点:

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

    你可以试一下。

    • 已标记为答案 Aran.Wang 2015年4月22日 5:48
    2015年4月22日 2:21
  • 很感谢你的回复,你的方法和我想的差不多,最终还是要根据容器宽度去设定每项的宽度。

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

    • 已标记为答案 Aran.Wang 2015年4月22日 5:48
    2015年4月22日 5:48

全部回复

  • 首先设置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的道理也是一样。

    2015年4月21日 13:27
  • 感谢你的回复,如果这样设置样式的话,每一项的宽高还是没有给定值,它会很小 怎么办?
    2015年4月21日 14:19
  • 我忘记了一点:

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

    你可以试一下。

    • 已标记为答案 Aran.Wang 2015年4月22日 5:48
    2015年4月22日 2:21
  • 很感谢你的回复,你的方法和我想的差不多,最终还是要根据容器宽度去设定每项的宽度。

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

    • 已标记为答案 Aran.Wang 2015年4月22日 5:48
    2015年4月22日 5:48