c# - WPF show "dummy" control until focused/clicked -

i have list of heavy controls, don't want render before user interacts them (one @ time). want show placeholder each control until placeholder clicked (preferably focused) , render real control.

what i've tried looks this:

            <contentcontrol x:name="thecontrol">             <textbox x:name="textblock" text="placeholder right here."/>             <contentcontrol.style>                 <style targettype="contentcontrol">                     <style.triggers>                         <datatrigger binding="{binding isfocused, elementname=textblock}" value="true">                             <setter property="content" >                                 <setter.value>                                     <grid x:name="thegrid">                                         <grid.columndefinitions>                                             <columndefinition width="auto" sharedsizegroup="codecolumn"/>                                             <columndefinition width="*"/>                                         </grid.columndefinitions>                                         <textblock>heavy control part1</textblock>                                         <textblock grid.column="1">heavy control part2</textblock>                                     </grid>                                 </setter.value>                             </setter>                         </datatrigger>                     </style.triggers>                 </style>             </contentcontrol.style>         </contentcontrol> 

anyone knows better approach or i'm missing?

i don't know if better solution, can create heavy control in code , remove/add children after gotfocus event.

add gotfocus event textblock , put textblock in grid

        <grid name="mygrid">             <grid.columndefinitions>                 <columndefinition width="100*" />             </grid.columndefinitions>             <grid.rowdefinitions>                 <rowdefinition height="100*"/>             </grid.rowdefinitions>             <textbox x:name="textblock" grid.column="0" grid.row="0"  text="placeholder right here." gotfocus="textblock_gotfocus" />         </grid> 

then in cs file

    private void textblock_gotfocus(object sender, routedeventargs e)     {         createnewcontrol();     }      private void createnewcontrol()     {         grid myothergrid = new grid();          rowdefinition newrow1 = new rowdefinition();         newrow1.height = new gridlength(100.0);         rowdefinition newrow2 = new rowdefinition();         newrow2.height = new gridlength(100.0);          columndefinition newcolumn1 = new columndefinition();         newcolumn1.width = new gridlength(50.0);         columndefinition newcolumn2 = new columndefinition();         newcolumn2.width = new gridlength(50.0);          myothergrid.rowdefinitions.add(newrow1);         myothergrid.rowdefinitions.add(newrow2);         myothergrid.columndefinitions.add(newcolumn1);         myothergrid.columndefinitions.add(newcolumn2);          textbox myothertextblock1 = new textbox();         myothertextblock1.text = "new block 1";          textbox myothertextblock2 = new textbox();         myothertextblock2.text = "new block 1";          myothergrid.children.add(myothertextblock1);         grid.setrow(myothertextblock1, 0);         grid.setcolumn(myothertextblock1, 0);          myothergrid.children.add(myothertextblock2);         grid.setrow(myothertextblock2, 1);         grid.setcolumn(myothertextblock2, 1);          mygrid.children.remove(textblock);         mygrid.children.add(myothergrid);     }