styles - WPF Scrollbar over content -

i working on custom style scrollbar on scrollviewer. working fine want scrollbar on top of content controls width won't break because of scrollbar.

as can see here control on top breaks because of scrollbar. guys know how make scrollbars background kind of transparent control behind scrollbar?

resource

 <window.resources>     <style x:key="listboxstyle" targettype="listbox">         <style.resources>                           <style x:key="scrollbarthumbvertical" targettype="{x:type thumb}">                 <setter property="overridesdefaultstyle" value="true"/>                 <setter property="istabstop" value="false"/>                 <setter property="template">                     <setter.value>                         <controltemplate targettype="{x:type thumb}">                             <rectangle x:name="rectangle" fill="#cdcdcd" height="{templatebinding height}" snapstodevicepixels="true" width="{templatebinding width}"/>                             <controltemplate.triggers>                                 <trigger property="ismouseover" value="true">                                     <setter property="fill" targetname="rectangle" value="#a6a6a6"/>                                 </trigger>                                 <trigger property="isdragging" value="true">                                     <setter property="fill" targetname="rectangle" value="#606060"/>                                 </trigger>                             </controltemplate.triggers>                         </controltemplate>                     </setter.value>                 </setter>             </style>              <style targettype="repeatbutton">                 <setter property="template">                     <setter.value>                         <controltemplate targettype="repeatbutton">                             <grid>                                 <contentpresenter></contentpresenter>                             </grid>                         </controltemplate>                     </setter.value>                 </setter>             </style>              <style targettype="{x:type scrollbar}">                 <setter property="stylus.ispressandholdenabled" value="false"/>                 <setter property="stylus.isflicksenabled" value="false"/>                                                        <setter property="borderthickness" value="1,0"/>                 <setter property="template">                     <setter.value>                         <controltemplate targettype="{x:type scrollbar}">                             <grid x:name="bg" width="8" margin="0,15,0,15" background="transparent" snapstodevicepixels="true">                                 <grid.rowdefinitions>                                     <rowdefinition  maxheight="0"/>                                     <rowdefinition height="0.00001*"/>                                     <rowdefinition height="0"/>                                 </grid.rowdefinitions>                                 <border borderbrush="{templatebinding borderbrush}" borderthickness="0" background="transparent" grid.row="1"/>                                 <repeatbutton height="0" width="0" x:name="part_lineupbutton" command="{x:static scrollbar.lineupcommand}" isenabled="{templatebinding ismouseover}"/>                                                                                                            <track x:name="part_track" isdirectionreversed="true" isenabled="{templatebinding ismouseover}" grid.row="1">                                     <track.decreaserepeatbutton>                                         <repeatbutton command="{x:static scrollbar.pageupcommand}" background="transparent" borderbrush="transparent" borderthickness="0" />                                     </track.decreaserepeatbutton>                                     <track.increaserepeatbutton>                                         <repeatbutton command="{x:static scrollbar.pagedowncommand}" background="transparent" borderbrush="transparent" borderthickness="0" />                                     </track.increaserepeatbutton>                                     <track.thumb>                                         <thumb style="{staticresource scrollbarthumbvertical}"/>                                     </track.thumb>                                 </track>                                 <repeatbutton x:name="part_linedownbutton" height="0" width="0" command="{x:static scrollbar.linedowncommand}" isenabled="{templatebinding ismouseover}" grid.row="2"/>                                                               </grid>                                             </controltemplate>                     </setter.value>                 </setter>                                </style>              <style targettype="{x:type scrollviewer}">                 <setter property="template">                     <setter.value>                         <controltemplate  targettype="{x:type scrollviewer}">                             <grid x:name="grid"  horizontalalignment="right">                                                                   <scrollcontentpresenter   x:name="part_scrollcontentpresenter" cancontentscroll="{templatebinding cancontentscroll}" canhorizontallyscroll="false" canverticallyscroll="false" contenttemplate="{templatebinding contenttemplate}" content="{templatebinding content}" margin="{templatebinding padding}" />                                 <scrollbar x:name="part_verticalscrollbar" horizontalalignment="right" automationproperties.automationid="verticalscrollbar" cursor="arrow"  maximum="{templatebinding scrollableheight}" minimum="0" visibility="{templatebinding computedverticalscrollbarvisibility}" value="{binding verticaloffset, mode=oneway, relativesource={relativesource templatedparent}}" viewportsize="{templatebinding viewportheight}"/>                             </grid>                         </controltemplate>                     </setter.value>                 </setter>             </style>         </style.resources>     </style> </window.resources> 

xaml

<listbox style="{staticresource listboxstyle}" height="400" width="150" scrollviewer.horizontalscrollbarvisibility="hidden">     <textblock text="29/6/2014 9:58:00 datetime value" margin="10"></textblock>     <textblock text="29/6/2014 9:58:00 datetime value" margin="10"></textblock>     <textblock text="29/6/2014 9:58:00 datetime value" margin="10"></textblock>     <textblock text="29/6/2014 9:58:00 datetime value" margin="10"></textblock>     <textblock text="29/6/2014 9:58:00 datetime value" margin="10"></textblock>     <textblock text="29/6/2014 9:58:00 datetime value" margin="10"></textblock>     <textblock text="29/6/2014 9:58:00 datetime value" margin="10"></textblock>     <textblock text="29/6/2014 9:58:00 datetime value" margin="10"></textblock>     <textblock text="29/6/2014 9:58:00 datetime value" margin="10"></textblock>     <textblock text="29/6/2014 9:58:00 datetime value" margin="10"></textblock>     <textblock text="29/6/2014 9:58:00 datetime value" margin="10"></textblock>     <textblock text="29/6/2014 9:58:00 datetime value" margin="10"></textblock> </listbox> 

result