Nested items control. But child item control should display based on specific condtion in wpf -

wpf: in items control, want display items control. but, want display child items control values specific set of items of parent items control based on conditions shown in image below. please let me know, how can this. nested items control specific condition

more details:

i’ve items control, based on items in items control; draw rectangular boxes in ui. i.e. each item in items control represents 1 rectangular box , these rectangular boxes represented in sequence (one after other in ui).

now, i’ve 1 more collection of numbers (such 10,20,30,40 etc.). these numbers want represent time scale below particular consecutive rectangular boxes. i.e. let’s say, i’ve 10 items in parent items control there 10 rectangular boxes represented in ui. now, want represent 1 time scale @ bottom of 4th , 5th rectangular box based on parent item type (i.e. 4th , 5th box have 1 common time scale 10 100 (it’s not independent time scale i.e. 1 horizontal line below 4th , 5th items i.e. horizontal line starts below 4th , ends below 5th item. , line shows values 10 100 in sequence)). similarly, might need represent 1 more common time scale below 8th, 9th , 10th items (i.e. horizontal line starts 10 , might end value 200.).

this diagram explains details

the basic idea be, have sub-collection part of items , common attached information instead of stretching information on range of items.

i suppose have viewmodel, holding items. can implement collection of subitems , single item common base class (itembase below)

public class itembase : baseviewmodel { }  public class subitemcollection : itembase {     private ienumerable<itembase> _subitems;     public ienumerable<itembase> subitems     {         { return _subitems; }         set { _subitems = value; notifypropertychanged(); }     }     private string _commontext;     public string commontext     {         { return _commontext; }         set { _commontext = value; notifypropertychanged(); }     } }  public class leafitem : itembase {     private string _text;     public string text     {         { return _text; }         set { _text = value; notifypropertychanged(); }     } } 

i use baseviewmodel base class, things inotifypropertychanged handled.

in xaml, define template each item-type resource. collection type, display additional information below items

<window.resources>     <datatemplate datatype="{x:type local:leafitem}">         <border margin="3" padding="3" borderthickness="1" borderbrush="red" verticalalignment="top">             <textblock text="{binding text}"/>         </border>     </datatemplate>      <datatemplate datatype="{x:type local:subitemcollection}">         <stackpanel>             <itemscontrol itemssource="{binding subitems}" borderbrush="green">                 <itemscontrol.itemspanel>                     <itemspaneltemplate>                         <stackpanel orientation="horizontal"/>                     </itemspaneltemplate>                 </itemscontrol.itemspanel>             </itemscontrol>             <separator borderbrush="blue" borderthickness="1"/>             <textblock text="{binding commontext}"/>         </stackpanel>     </datatemplate> </window.resources> 

finally, somewhere in xaml, populate list of itembase elements

    <itemscontrol itemssource="{binding items}" borderbrush="green">         <itemscontrol.itemspanel>             <itemspaneltemplate>                 <dockpanel lastchildfill="false"/>             </itemspaneltemplate>         </itemscontrol.itemspanel>     </itemscontrol> 

you can test following data context:

public class myviewmodel : baseviewmodel {     private itembase _items;     public itembase items     {         { return _items; }         set { _items = value; notifypropertychanged(); }     } }   public partial class mainwindow : window {     private void window_loaded(object sender, routedeventargs e)     {         if (!system.componentmodel.designerproperties.getisindesignmode(this))         {             data = new myviewmodel();             data.items = new itembase[]             {                 new leafitem()                 {                     text="item 1"                 },                 new subitemcollection()                 {                     subitems = new itembase[]{                         new leafitem()                         {                             text="subitems 2.1"                         },                         new leafitem()                         {                             text="subitems 2.2"                         }                     },                     commontext = "extra"                 },                 new leafitem()                 {                     text="item 3"                 }             };             datacontext = data;         }     } // ...