Usually we show a list of similar data in the ListView, such as the city name. However, the datatemplate of the ListView can be modified slightly to show cascading information. For example, you need to display the city name of the province and province in the ListView. First prepare the base class,
City class:
public class City:viewmodebase { private string _name; public string Name { get { return _name; } Set { if (_name! = value) { _name = value; OnPropertyChanged ("Name");}}}
Province class:
public class Province:viewmodebase { private string _name; public string Name { get { return _name; } Set { if (_name! = value) { _name = value; OnPropertyChanged ("Name"); }}} Private observablecollection<city> _citys; Public observablecollection<city> citys { get { return _citys; } Set { if (_citys! = value) { _citys = value; OnPropertyChanged ("Citys"); }}} Public province () { _citys = new observablecollection<city> (); } }
Making simulation data:
Observablecollection<province> _provinces = null; Public MainWindow () {InitializeComponent (); Province Provincejs = new province () {Name = "Jiangsu"}; PROVINCEJS.CITYS.ADD (New city () {Name = "nanjing"}); PROVINCEJS.CITYS.ADD (New city () {Name = "Suzhou"}); PROVINCEJS.CITYS.ADD (New city () {Name = "wuxi"}); PROVINCEJS.CITYS.ADD (New city () {Name = "Changzhou"}); PROVINCEJS.CITYS.ADD (New city () {Name = "Zhenjiang"}); PROVINCEJS.CITYS.ADD (New city () {Name = "Taizhou"}); PROVINCEJS.CITYS.ADD (New city () {Name = "Nantong"}); Province Provincezj = new province () {Name = "Zhejiang"}; PROVINCEZJ.CITYS.ADD (New city () {Name = "Hangzhou"}); PROVINCEZJ.CITYS.ADD (New city () {Name = "Ningbo"}); PROVINCEZJ.CITYS.ADD (New city () {Name = "Wenzhou"}); PROVINCEZJ.CITYS.ADD (New city () {Name = "jiaxing"}); PROVINCEZJ.CITYS.ADD (New city () {Name = "Huzhou"}); PROVINCEZJ.CITYS.ADD (New city () {Name = "Shaoxing"}); PROVINCEZJ.CITYS.ADD (New city () {Name = "Jinhua"}); PROVINCEZJ.CITYS.ADD (New city () {Name = "Quzhou"}); Province provincesd = new province () {Name = "Shandong"}; PROVINCESD.CITYS.ADD (New city () {Name = "Jinan"}); PROVINCESD.CITYS.ADD (New city () {Name = "Weifang"}); PROVINCESD.CITYS.ADD (New city () {Name = "Taian"}); _provinces = new observablecollection<province> (); _provinces. ADD (Provincejs); _provinces. ADD (PROVINCEZJ); _provinces. ADD (PROVINCESD); DataContext = _provinces; }
XAML:
<Window.Resources> <booleantovisibilityconverter x:key= "Booleantovisibilityconverter"/> </win Dow. resources> <Grid> <listview itemssource= "{Binding.}" Width= "height=" > <ListView.Template> <ControlTemplate> <scrollviewer verticalscrollbarvisibility= "Auto" horizontalscrollbarvisibility= "Auto" > < itemspresenter/> </ScrollViewer> </ControlTemplate> </listv Iew. template> <ListView.ItemsPanel> <ItemsPanelTemplate> <stack Panel isitemshost= "true" virtualizingstackpanel.isvirtualizing= "true" Virtualizingstackpanel.virtualizationmode= "Recycling"/> </ItemsPanelTemplate> </ListView.ItemsPanel> <listview.itemteMplate> <datatemplate datatype= "{x:type local:province}" > <Grid> <Grid.RowDefinitions> <rowdefinition height= "Auto"/> <rowdefinition height= "*"/> </Grid.RowDefinitions> <!--province--> <border grid.row= "0" background= "#e1e2e7" > <stackpanel orientation= "Horizontal" margin= "20,8" > <textblo CK text= "{Binding Name}" foreground= "#647081" fontsize= "/> <!--<togglebutton Co Ntent= "{Binding Name}" ischecked= "False" x:name= "_togglebutton" fontsize= "" foreground= "#647081"/>--> </StackPanel> </Border> <!--city list--> <! --<listbox grid.row= "1" itemssource= "{Binding citys}" visibility= "{Binding elementname= _togglebutton, Path=ischecked,converter={staticresource Booleantovisibilityconverter}} ">--> & Lt ListView grid.row= "1" itemssource= "{Binding citys}" > <ListView.Template> <ControlTemplate> <Grid> <ItemsPresenter/> </Grid> </contro Ltemplate> </ListView.Template> <ListView.ItemsPanel> <ItemsPanelTemplate> <stackpanel isitemshost= " True "/> </ItemsPanelTemplate> </listview.itemspanel& Gt <ListView.ItemTemplate> <datatemplate datatype= "{x:type local:city}" &G T <textblock text= "{Binding Name}" foreground= "#647081" fontsize= "/> </datatempla" Te> </ListView.ItemTemplate> </ListView> </Grid> </DataTemplate> </ListView.ItemTemplate> </ListView> </Grid>
Operating effect:
Display cascading information by binding a ListView in the ListView's DataTemplate.
Thank you for reading, code click here to download.
WPF ListView Display Cascading information