c# - Acrobat-like PopUp in WPF -

im working on simple imageviewer.

now came mind, might nice feature, context-sensitve actions zooming , rotating.

to implement these functions not problem, contextmenu is.

i've decided not use contextmenu-element, instead im going use popup.

reasons popup:

• less styling
• better positioning
• isopen bindable (contextmenu not bindable on isopen against articles regarding this)

here comes trouble:

<image x:name="part_imgcurrent" verticalalignment="center" horizontalalignment="center" stretch="uniform" grid.row="0" grid.column="0"                                     source="{binding elementname=part_previewpanel, path=selecteditem.source}">                                                                     <image.layouttransform>                                     <rotatetransform angle="0"></rotatetransform>                                 </image.layouttransform>                                 <image.triggers>                                     <eventtrigger routedevent="loaded">                                         <beginstoryboard>                                             <storyboard>                                                 <doubleanimation storyboard.targetname="part_imgcurrent" storyboard.targetproperty="opacity" from="0" to="1" duration="0:0:3" />                                             </storyboard>                                         </beginstoryboard>                                     </eventtrigger>                                  </image.triggers>                                </image>                             <popup ishittestvisible="false" focusable="false" placementtarget="{binding elementname=part_imgcurrent}" allowstransparency="true" staysopen="true"                                     isopen="{binding elementname=part_imgcurrent, path=ismouseover, mode=oneway}"                                    placement="right" horizontaloffset="-42" verticaloffset="2">                                 <stackpanel opacity="0.5" verticalalignment="stretch">                                     <button content="ugly button" height="40" width="40"></button>                                     <button content="ugly button" height="40" width="40"></button>                                     <button content="ugly button" height="40" width="40"></button>                                 </stackpanel>                             </popup> 

as can see, im binding isopen of popup ismouseover on image results in funny disco-blinkenlights-behavior when try click button inside popup.

what has title?

acrobatreader has

this behavior im looking for. how thing called?

or had ever similar issues , provide solution?

sorry delay, thought had second got busy again. anyway, here's 1 of several ways can think of accomplishing goal, give shot. sort of assumed may not images want , if threw resource stuff in dictionary , kept naming consistent (or better, target nested uielement) use on place. notice grid acting image in example.

i make things open future added interactions , stuff, in case make image source background brush grid or place child. way if decide add other objects in there or other effects , stuff you've got start point.

anyway digress, try out concept example below , see if it's you're after. if not, said there's several other ways can think of accomplish goal let me know. :)

<!-- hittestvisibility area -->         <grid x:name="imageplaceholder"               height="500" width="500"                background="lightblue">             <grid.resources>                 <storyboard x:key="onmouseenter">                     <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)"                                                     storyboard.targetname="fakepopup">                         <discreteobjectkeyframe keytime="0" value="{x:static visibility.visible}"/>                     </objectanimationusingkeyframes>                 </storyboard>                 <storyboard x:key="onmouseleave">                     <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)"                                                     storyboard.targetname="fakepopup">                         <discreteobjectkeyframe keytime="0" value="{x:static visibility.collapsed}"/>                     </objectanimationusingkeyframes>                 </storyboard>             </grid.resources>             <grid.triggers>                 <eventtrigger routedevent="uielement.mouseenter">                     <beginstoryboard storyboard="{staticresource onmouseenter}"/>                 </eventtrigger>                 <eventtrigger routedevent="uielement.mouseleave">                     <beginstoryboard storyboard="{staticresource onmouseleave}"/>                 </eventtrigger>             </grid.triggers>               <!-- overlay -->             <border name="fakepopup" visibility="collapsed"                     margin="0,0,0,25" background="slategray"                      height="50" cornerradius="20" padding="10"                      horizontalalignment="center" verticalalignment="bottom">                  <stackpanel orientation="horizontal">                     <button content="eins bier"/>                     <button content="zwei bier" margin="10,0"/>                     <button content="drei bier"/>                 </stackpanel>              </border>          </grid> 

i went storyboards attached parent instead of direct triggers targetname said, because think of bunch of other instances features might want added make sense. simple adding transition duration nice fade effect or maybe translate y slide while fading etc, etc, etc.

anyway, hope helps. cheers!