WPF ListView Display Cascading information

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.