【UWP】列表项宽度自适应的实现

目的

在UWP开发中，我们常常用到两个显示列表的控件：ListView和GridView。而这两个列表控件在PC等大屏幕上如果能多列“智能”调整自己的大小（通常是根据当前窗口大小调整宽度），那么用户就会在同一屏幕内接收到更多信息，同时空间的利用率得以提高，也会提高应用的视觉体验。这是我的第一篇博客，向大家分享一下列表项宽度自适应的实现。

实现思路及方法

我们最初的想法可能是，定义列表项模板，给模板里的Panel起个名字，在窗口的SizeChanged事件里加入调整其宽度的代码。这种想法最朴素，然而在操作中遇到了一些问题：我们不能在后台代码里直接访问DataTemplete里的元素。而且，当同一页面中存在多个列表时，给大家都分配一个名字也比较傻，而且后台代码会堆积，不利于维护。

这个时候，数据绑定就可以大显身手了。

我们可以在Xaml里定义一个随便什么元素（当然，它只起到一个“桥”的作用，不能影响当前布局。（废话））这里，我们定义一个Border即可：

<Border x:Name="width"/>

然后，创建一个我们想要实现自适应的列表,注意其中的绑定

<GridView  x:Name="testlist">
　　<GridView.ItemTemplate>
　　　　<DataTemplate>
　　　　　　<Grid Width="{Binding ElementName=width,Path=Width}">
               ......                                    
　　　　　　</Grid>
　　　　</DataTemplate>
　　</GridView.ItemTemplate>
</GridView>

接下来我们所要做的只有一步：在后台的SizeChanged事件中加入对width宽度的调整即可。这里为了方便，我们把它写成一个方法，可以放在自己App的Helper类里供应用内所有列表调用。这个方法长成这个样子：

  class WidthFit
    {
        /// <summary>
        /// 获取自适应列表项宽度
        /// </summary>
        /// <param name="width">当前窗口宽度</param>
        /// <param name="max">列表项最大宽度</param>
        /// <param name="min">列表项最小宽度</param>
        /// <param name="offset">偏移量</param>
        /// <returns></returns>
        public static double GetWidth(double width, int max, int min, int offset = 8)
        {
            if (offset < 0 || offset > 12)
            {
                offset = 8;
            }
            double w = 1;
            int column = 1;
            int maxcolumn = (int)width / min;
            double i2 = width / min;
            for (int i = 1; i <= maxcolumn; i++)
            {
                if (Math.Abs(i - i2) < 1) 
                {
                    column = (int)Math.Truncate(i2) == 0 ? 1 : (int)Math.Truncate(i2);
                }
            }
            w = width / column;
            w -= offset * column;
            return w;
        }
    }

 

代码很易读，在这里不做过多说明。只说明一下，offset这个参数用来设定宽度的偏移量，因为我们的列表项之间、列表与父面板间通常会有间距，这个间距也要被考虑到，否则实际显示的列数可能会减少，很不美观。

这样，我们可以方便地调用此方法：

private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
2 {
　　width.Width = WidthFit.GetWidth(ActualWidth, 600, 300);
4 }

实现的效果就不贴出来了，大家可以动手试一试。

还有什么没提到……

ListView能实现这种效果吗？能。具体做法也很简单，更改一下ListView默认的ItemPanel即可，余下的工作与GridView完全一样。

<ListView.Style>
    <Style TargetType="ListView">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid  Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ListView.Style>        

到了要说“但是”的时候了。上面提到的GetWidth方法有一个小缺陷：可能会造成看上去像是“显示的列数受到损失”的情况（当然啦，这个概率很小）。我们发现，这个Bug出现在列数发生变动的临界值附近。而原因其实也很简单，此时我们定义的最大宽度小于当前窗口宽度与计算出的列数的比，因而无法铺满窗口的宽度，看上去就像是少了一列一样。这个小缺陷当然也易于修正，大家可以在GetWidth方法里做点文章，怠惰一点的话，也可以直接使最大宽度设置得大一点。

 

明明快到考期了，可我还是“死猪不怕开水烫，越到考期我越浪”，强行水了我的第一篇博客。如果有什么错误与不周到的地方还望大佬们指正。我去补作业了……