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 }
软件运行的效果: