xaml - wpf customControl binding itemscontrol DataTemplate button -

i new wpf stuck binding on customcontrol click button.

i have textbox has watermark , selcteditems properties. control if selecteditems != null display them in control this:

link picture [http://s29.postimg.org/p25qgqzwn/image.jpg][1]

now need wire x buttons delete item selecteditems source. trying in onapplytemplate method dont know how button in itemscontrol attach mouse click event.

my xaml

<style targettype="{x:type local:textboxpicker}">     <setter property="background" value="{dynamicresource {x:static systemcolors.windowbrushkey}}"/>     <setter property="borderbrush" value="{staticresource textbox.static.border}"/>     <setter property="foreground" value="{dynamicresource {x:static systemcolors.controltextbrushkey}}"/>     <setter property="borderthickness" value="1"/>     <setter property="keyboardnavigation.tabnavigation" value="none"/>     <setter property="horizontalcontentalignment" value="left"/>     <setter property="focusvisualstyle" value="{x:null}"/>     <setter property="allowdrop" value="true"/>     <setter property="scrollviewer.panningmode" value="verticalfirst"/>     <setter property="stylus.isflicksenabled" value="false"/>     <setter property="watermarktemplate" value="{staticresource defaultwatermarktemplate}"/>     <setter property="selecteditemstemplate" value="{staticresource defaultselecteditemstemplate}" />     <setter property="template">         <setter.value>             <controltemplate targettype="{x:type local:textboxpicker}">                 <grid>                     <border x:name="border" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}" snapstodevicepixels="true">                         <scrollviewer x:name="part_contenthost" focusable="false" horizontalscrollbarvisibility="hidden" verticalscrollbarvisibility="hidden"/>                     </border>                     <border borderbrush="red" borderthickness="1">                         <contentcontrol x:name="part_watermarkhost"                                 content="{templatebinding watermark}"                                 contenttemplate="{templatebinding watermarktemplate}"                                 verticalalignment="{templatebinding verticalcontentalignment}"                                 horizontalalignment="{templatebinding horizontalcontentalignment}"                                 ishittestvisible="false"                                 margin="{templatebinding padding}"                                 visibility="collapsed" />                     </border>                      <border borderbrush="green" borderthickness="1">                         <itemscontrol x:name="part_selecteditemshost"                                 itemssource="{templatebinding selecteditems}"                                 itemtemplate="{templatebinding selecteditemstemplate}"                                 verticalalignment="stretch"                                 horizontalalignment="stretch"                                                                                                       margin="{templatebinding padding}"                                 visibility="visible">                             <itemscontrol.itemspanel>                                 <itemspaneltemplate>                                     <wrappanel>                                     </wrappanel>                                 </itemspaneltemplate>                             </itemscontrol.itemspanel>                         </itemscontrol>                      </border>                 </grid>                ....             </controltemplate>         </setter.value>     </setter> 

and itemtemplate looking this

xaml:

<datatemplate x:key="defaultselecteditemstemplate" >     <border x:name="selecteditemborder" borderbrush="gray" borderthickness="1" cornerradius="5" background="{dynamicresource {x:static systemcolors.controlbrushkey}}" margin="5,1,1,1">         <grid>             <grid.columndefinitions>                 <columndefinition width="*"/>                 <columndefinition width="15"/>             </grid.columndefinitions>             <!--<textblock grid.column="0" text="{binding relativesource={relativesource self}, path=ime}" margin="5,0,3,0"></textblock>-->             <textblock grid.column="0" text="{binding}" margin="5,0,3,0"></textblock>             <button x:name="part_selecteditembutton" borderthickness="0" grid.column="1" >x</button>         </grid>     </border> </datatemplate> 

.cs code

    public override void onapplytemplate()     {         base.onapplytemplate();         itemscontrol selecteditem = gettemplatechild("part_selecteditemshost") itemscontrol;          if (selecteditem != null)         {             selecteditem.mouseleftbuttondown += new mousebuttoneventhandler(selecteditemborder_mouseleftbuttondown);              // blind click on x buttons in itemscontrol         }      } 

so how can bind click on "x" button on items in code-behind ?

first viewmodel observablecollection , command execute x:

private observablecollection<string> items = new observablecollection<string>() { "one", "two", "three" };     public observablecollection<string> items     {                 {             return items;         }         set         {             items = value;             notifypropertychanged();         }     }      public command<string> deleteitem     {                 {             return new command<string>((item) =>             {                 if (items.contains(item))                 {                     items.remove(item);                 }                 notifypropertychanged("items");             });         }     } 

now xaml:

resources, binded 'parent' datacontext, easy way know binding going:

<page.resources>     <datatemplate x:key="defaultselecteditemstemplate" >         <border x:name="selecteditemborder" borderbrush="gray" borderthickness="1" cornerradius="5"  margin="5,1,1,1">             <grid>                 <grid.columndefinitions>                     <columndefinition width="*"/>                     <columndefinition width="15"/>                 </grid.columndefinitions>                 <!--<textblock grid.column="0" text="{binding relativesource={relativesource self}, path=ime}" margin="5,0,3,0"></textblock>-->                 <textblock grid.column="0" text="{binding}" margin="5,0,3,0"></textblock>                 <button x:name="part_selecteditembutton" borderthickness="0" grid.column="1" command="{binding datacontext.deleteitem, elementname=itemscontrolinstance}" commandparameter="{binding}">x</button>             </grid>         </border>     </datatemplate> </page.resources> 

and itemscontrol:

<itemscontrol x:name="itemscontrolinstance" itemtemplate="{staticresource defaultselecteditemstemplate}" itemssource="{binding items}"/>