UWP 列表項寬度自適應的實現

在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=""
>
5...... 
6grid
>
7datatemplate
>
8gridview.itemtemplate
>
9gridview
>

1
class
widthfit217
double w = 1;18
int column = 1;19
int maxcolumn = (int)width /min;
20double i2 = width /min;
21for (int i = 1; i <= maxcolumn; i++)
2227
}28 w = width /column;
29 w -= offset *column;
30return
w;31
}32 }

**很易讀，在這裡不做過多說明。只說明一下，offset這個引數用來設定寬度的偏移量，因為我們的列表項之間、列表與父面板間通常會有間距，這個間距也要被考慮到，否則實際顯示的列數可能會減少，很不美觀。

這樣，我們可以方便地呼叫此方法：

1
private
void page_sizechanged(object
sender, sizechangedeventargs e)
2

實現的效果就不貼出來了，大家可以動手試一試。

listview能實現這種效果嗎？能。具體做法也很簡單，更改一下listview預設的itempanel即可，餘下的工作與gridview完全一樣。

1
<
listview.style
>
2<
style 
targettype
="listview"
>
3<
setter 
property
="itemspanel"
>
4<
setter.value
>
5<
itemspaneltemplate
>
6<
itemswrapgrid 
orientation
="horizontal"
/>
7itemspaneltemplate
>
8setter.value
>
9setter
>
10style
>
11listview.style
>

到了要說「但是」的時候了。上面提到的getwidth方法有乙個小缺陷：可能會造成看上去像是「顯示的列數受到損失」的情況（當然啦，這個概率很小）。我們發現，這個bug出現在列數發生變動的臨界值附近。而原因其實也很簡單，此時我們定義的最大寬度小於當前視窗寬度與計算出的列數的比，因而無法鋪滿視窗的寬度，看上去就像是少了一列一樣。這個小缺陷當然也易於修正，大家可以在getwidth方法裡做點文章，怠惰一點的話，也可以直接使最大寬度設定得大一點。

明明快到考期了，可我還是「死豬不怕開水燙，越到考期我越浪」，強行水了我的第一篇部落格。如果有什麼錯誤與不周到的地方還望大佬們指正。我去補作業了……

UWP 列表項寬度自適應的實現

移動端常見列表項自適應

UWP 拖拽列表項的排序功能實現

css 實現中部區塊自適應寬度

UWP 列表項寬度自適應的實現

移動端常見列表項自適應

UWP 拖拽列表項的排序功能實現

css 實現中部區塊自適應寬度

相關推薦