WPF datagrid semi-transparent selected cells (like Excel) -

in excel, bluish background selection color appears semi-transparent, user can still see true background color when cell selected. how can same effect achieved wpf datagrid?

in particular case, cell's background color binded view model. initial impression use trigger in cell style:

  <style.triggers>       <trigger property="isselected" value="true">             <setter property="background" value="????"></setter>       </trigger>   </style.triggers> 

then somehow value should calculate ... combination of blue , unselected background color? tried using brush of transparent blue, result not blend previous cell background color.

what have tried should work.

look @ example:

<grid x:name="layoutroot" datacontext="{binding source={staticresource sampledatasource}}">     <grid.rowdefinitions>         <rowdefinition height="*"/>         <rowdefinition height="10*"/>     </grid.rowdefinitions>     <rectangle fill="#ff0090ff"/>     <datagrid grid.row="1" itemssource="{binding testcollection}" background="purple">         <datagrid.resources>             <style targettype="datagridrow">                 <setter property="background" value="yellow"/>             </style>             <style targettype="datagridcell">                 <style.triggers>                     <trigger property="isselected" value="true">                         <setter property="background" value="#6f0090ff"/>                     </trigger>                 </style.triggers>             </style>         </datagrid.resources>     </datagrid> </grid> 

there blue rectangle. fill property set #ff0090ff. should notice fact call "unselected background color" background of datagridrow.

and now... background color of selected cell same fill of rectangle(#0090ff). changed alpha 50%(#6f0090ff). , see greenish expect.

update

when want preserve background of datagridcell have choose different approach. suggest create 1 more layer in datagridcell's controltemplate

this layer... may call example "selectedcellvisual" visible when cell selected.

so... have create controltemplate have change style of datagridcell previous example.

<style targettype="datagridcell" >                 <setter property="overridesdefaultstyle" value="true"/>                 <setter property="background" value="red"/>                 <setter property="borderbrush" value="transparent"/>                 <setter property="borderthickness" value="0"/>                 <setter property="template">                     <setter.value>                         <controltemplate targettype="{x:type datagridcell}">                             <border borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}" snapstodevicepixels="true">                                 <grid>                                     <rectangle x:name="selectedcellvisual" fill="#6f0090ff" visibility="collapsed"/>                                     <contentpresenter snapstodevicepixels="{templatebinding snapstodevicepixels}"/>                                 </grid>                             </border>                             <controltemplate.triggers>                                 <trigger property="isselected" value="true">                                     <setter targetname="selectedcellvisual" property="visibility" value="visible"/>                                 </trigger>                             </controltemplate.triggers>                         </controltemplate>                     </setter.value>                 </setter>             </style> 

now datagridcell has red background , when it's selected semi-transparent blue rectangle "selectedcellvisual" visible. transparent blue , red on background makes final violet color.

you should pay attention

<setter property="overridesdefaultstyle" value="true"/> 

it has there... because didn't change trigger isselected property changes cell's background. it's defined in default style. changes background , foreground properties. can notice in first example. foreground set white , there 1 pixel wide blue line around cell.