WPF ListBox的进阶使用（一）

公司项目有个需求，ui界面支持动态平均分割界面，想了想便想到用listbox来实现，用uniformgrid作为listbox的itemspaneltemplate，通过动态改变uniformgrid的columns属性，可以动态分割界面。具体实现如下所示：

 1 <window x:class="wpfdemo.mainwindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:comm="clr-namespace:wpfdemo.commoncontrols;assembly=wpfdemo.commoncontrols"
 5         xmlns:local="clr-namespace:wpfdemo"
 6         title="mainwindow" height="350" width="525">
 7     
 8     <grid>
 9         <listbox itemssource="{binding datasource}">
10             <listbox.itemspanel>
11                 <itemspaneltemplate>
12                     <uniformgrid columns="{binding colums}" isitemshost="true"/>
13                 </itemspaneltemplate>
14             </listbox.itemspanel>
15             <listbox.itemcontainerstyle>
16                 <style targettype="{x:type listboxitem}">
17                     <setter property="template">
18                         <setter.value>
19                             <controltemplate targettype="{x:type listboxitem}">
20                                 <border horizontalalignment="stretch" verticalalignment="stretch" background="green" borderbrush="yellow" borderthickness="1">
21                                     <textblock text="{binding cameraname}" horizontalalignment="center" verticalalignment="center"/>
22                                 </border>
23                             </controltemplate>
24                         </setter.value>
25                     </setter>
26                 </style>
27             </listbox.itemcontainerstyle>
28         </listbox>
29     </grid>
30 </window>

对应的viewmodel层代码：

 1 using system;
 2 using system.collections.generic;
 3 using system.componentmodel;
 4 using system.linq;
 5 using system.runtime.compilerservices;
 6 using system.text;
 7 using system.threading.tasks;
 8 
 9 namespace wpfdemo
10 {
11     public abstract class notifypropertybase : inotifypropertychanged
12     {
13         protected void setproperty<t>(ref t storage, t value, [callermembername] string propertyname = null)
14         {
15             if (object.equals(storage, value)) return;
16             storage = value;
17             this.onpropertychanged(propertyname);
18         }
19 
20         protected void onpropertychanged([callermembername] string propertyname = null)
21         {
22             if (this.propertychanged != null)
23             {
24                 this.propertychanged(this, new propertychangedeventargs(propertyname));
25             }
26         }
27 
28         public event propertychangedeventhandler propertychanged;
29     }
30 }

 1 using system;
 2 using system.collections.generic;
 3 using system.collections.objectmodel;
 4 using system.linq;
 5 using system.text;
 6 using system.threading.tasks;
 7 using system.windows.threading;
 8 
 9 namespace wpfdemo
10 {
11     public class mainwindowvm : notifypropertybase
12     {
13         private dispatchertimer timer;
14         public mainwindowvm()
15         {
16             datasource = new observablecollection<wndviewmodel>();
17             colums = 1;
18             timer = new dispatchertimer();
19             timer.interval = new timespan(0, 0, 1);
20             timer.tick += timer_tick;
21             timer.start();
22         }
23 
24         private int count = 0;
25         void timer_tick(object sender, eventargs e)
26         {
27             var temp = new wndviewmodel()
28             {
29                 cameraname = string.format("camera {0}", ++count),
30             };
31             datasource.add(temp);
32             console.writeline(temp.cameraname);
33             if (count <= 6)
34             {
35                 colums = count;
36             }
37             else if (count > 100)
38             {
39                 count = 0;
40                 datasource.clear();
41                 colums = 1;
42             }
43         }
44 
45         private int colums;
46         public int colums
47         {
48             get { return colums; }
49             set
50             {
51                 setproperty(ref colums, value);
52             }
53         }
54 
55         private observablecollection<wndviewmodel> datasource;
56         public observablecollection<wndviewmodel> datasource
57         {
58             get { return datasource; }
59             set
60             {
61                 setproperty(ref datasource, value);
62             }
63         }
64     }
65 }

软件运行的效果：