c# - Change ZIndex of an ListBox Element -

my problem

when create new elements in listbox newer ones overlay old ones since don't have same zindex , therefore prevent selection. in listbox use transparent rectangles on canvas itemtemplate , itemspaneltemplate.

i want change zindex of elements same value user can pick element on hovers mouse.

screenshot

screenshot 1: how should work , when zindex correct

screenshot 2: happens when zindex not correct

my xaml code looks this:

<cc:listboxnodragselection itemssource="{binding rectangles}" background="{dynamicresource  bg}" selecteditem="{binding selected}"                                borderthickness="0">         <listbox.itemspanel>             <itemspaneltemplate>                 <canvas x:name="mockupcanvas" background="transparent">                     <canvas.contextmenu>                         <contextmenu>                             <menuitem header="new rectangle" command="{binding addnewrectangletocollectioncommand}"/>                             <menuitem header="delete selected rectangle" command="{binding trydeleterectanglefromcollectioncommand}"/>                         </contextmenu>                     </canvas.contextmenu>                 </canvas>             </itemspaneltemplate>         </listbox.itemspanel>         <listbox.itemcontainerstyle>             <style targettype="listboxitem">                 <setter property="canvas.left" value="{binding rectangle.x}"></setter>                 <setter property="canvas.top" value="{binding rectangle.y}"></setter>                 <setter property="canvas.zindex" value="1"/>             </style>         </listbox.itemcontainerstyle>         <listbox.itemtemplate>             <datatemplate>                 <dockpanel height="auto" width="{binding rectangle.width}">                     <label dockpanel.dock="top" content="{binding rectangle.name}" foreground="{dynamicresource foreground}" ishittestvisible="false"/>                     <rectangle width="{binding rectangle.width}" height="{binding rectangle.height}"  dockpanel.dock="bottom"                                fill="transparent" stroke="white" strokethickness="3" radiusx="10" radiusy="10" />                 </dockpanel>             </datatemplate>         </listbox.itemtemplate>     </cc:listboxnodragselection> 

as can see try set zindex same value each rectangle doesn not seem work @ all.

help appreciated!

here's issue msdn

members of children collection have equal zindex values rendered in order in appear in visual tree.

setting z-index can much. newer items in collection default rendered on top of older elements. if you're looking use mouse positions select elements, maybe using hit tests determine element want