【UWP】列表项宽度自适应的实现-CSDN博客

目的

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

实现思路及方法

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

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

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

1 <Border x:Name="width"/>

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

1 <GridView  x:Name="testlist">
2 　　<GridView.ItemTemplate>
3 　　　　<DataTemplate>
4 　　　　　　<Grid Width="{Binding ElementName=width,Path=Width}">
5                ......                                    
6 　　　　　　</Grid>
7 　　　　</DataTemplate>
8 　　</GridView.ItemTemplate>
9 </GridView>

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

 1   class WidthFit
 2     {
 3         /// <summary>
 4         /// 获取自适应列表项宽度
 5         /// </summary>
 6         /// <param name="width">当前窗口宽度</param>
 7         /// <param name="max">列表项最大宽度</param>
 8         /// <param name="min">列表项最小宽度</param>
 9         /// <param name="offset">偏移量</param>
10         /// <returns></returns>
11         public static double GetWidth(double width, int max, int min, int offset = 8)
12         {
13             if (offset < 0 || offset > 12)
14             {
15                 offset = 8;
16             }
17             double w = 1;
18             int column = 1;
19             int maxcolumn = (int)width / min;
20             double i2 = width / min;
21             for (int i = 1; i <= maxcolumn; i++)
22             {
23                 if (Math.Abs(i - i2) < 1) 
24                 {
25                     column = (int)Math.Truncate(i2) == 0 ? 1 : (int)Math.Truncate(i2);
26                 }
27             }
28             w = width / column;
29             w -= offset * column;
30             return w;
31         }
32     }

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

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

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

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

还有什么没提到……

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

 1 <ListView.Style>
 2     <Style TargetType="ListView">
 3         <Setter Property="ItemsPanel">
 4             <Setter.Value>
 5                 <ItemsPanelTemplate>
 6                     <ItemsWrapGrid  Orientation="Horizontal"/>
 7                 </ItemsPanelTemplate>
 8             </Setter.Value>
 9         </Setter>
10     </Style>
11 </ListView.Style>

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

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

转载于:https://www.cnblogs.com/DaweiX/p/6158198.html