欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

WPF ListBox的进阶使用(一)

程序员文章站 2022-06-11 16:14:50
公司项目有个需求,UI界面支持动态平均分割界面,想了想便想到用ListBox来实现,用UniformGrid作为ListBox的ItemsPanelTemplate,通过动态改变UniformGrid的Columns属性,可以动态分割界面。具体实现如下所示: 对应的ViewModel层代码: 软件运 ......

公司项目有个需求,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 }

软件运行的效果:

WPF ListBox的进阶使用(一)WPF ListBox的进阶使用(一)WPF ListBox的进阶使用(一)