i have menu has nested menu items within them when hovered on main menu start point opens menu structure. however, have moved menu bottom of our silverlight app top of page , cannot seem find way change opening direction when hovering on starting menu point.
currently, opens above starting menu point , require menu open below it.
<stackpanel x:name="toolbarlogo" grid.column="0" verticalalignment="top" horizontalalignment="left" background="{staticresource toolbarbackgroundbrush}" orientation="horizontal"> <viblend:menu visibility="visible" canvas.zindex="99" orientation="horizontal" verticalalignment="bottom" animationtype="bounds" x:name="menulogo" margin="25,0,0,0" style="{staticresource thememenustyle}" horizontalalignment="left" padding="5,0,5,0"> <viblend:menuitem width="129" dropdownwidth="125" fontsize="11" horizontalalignment="center" verticalalignment="bottom" style="{staticresource thememenuitemstyle}" padding="10,5,5,5"> <viblend:menuitem.headertemplate> <datatemplate> <grid> <image source="/reactsl;component/assets/images/icons/reactlogoplus.png" width="100" height="30"/> </grid> </datatemplate> </viblend:menuitem.headertemplate> <viblend:menuitem tag="reacthome" x:name="mi_reacthomem" width="125" fontsize="11" style="{staticresource thememenuitemstyle}" horizontalalignment="center" padding="2,5,5,5" shortcutkey="b" shortcutmodifierkeys="control" > <viblend:menuitem.headertemplate> <datatemplate> <grid> <grid.columndefinitions> <columndefinition width="30"></columndefinition> <columndefinition></columndefinition> </grid.columndefinitions> <textblock grid.column="1" text="home" foreground="white" verticalalignment="center"></textblock> <image source="{staticresource homeicon}" horizontalalignment="left" grid.column="0" width="25" height="25" margin="1"></image> </grid> </datatemplate> </viblend:menuitem.headertemplate> </viblend:menuitem> <viblend:menuitem width="125" fontsize="11" name="ssrsreportsmenuitem" style="{staticresource thememenuitemstyle}" horizontalalignment="center" padding="2,5,5,5"> <viblend:menuitem.headertemplate> <datatemplate> <grid> <grid.columndefinitions> <columndefinition width="30"></columndefinition> <columndefinition></columndefinition> </grid.columndefinitions> <textblock grid.column="1" text="ssrs reports" foreground="white" verticalalignment="center"></textblock> <image source="{staticresource reporticon}" horizontalalignment="left" grid.column="0" width="25" height="25" margin="1"></image> </grid> </datatemplate> </viblend:menuitem.headertemplate> </viblend:menuitem> <viblend:menuitem width="125" fontsize="11" name="crystalreportsmenuitem" style="{staticresource thememenuitemstyle}" horizontalalignment="center" padding="2,5,5,5"> <viblend:menuitem.headertemplate> <datatemplate> <grid> <grid.columndefinitions> <columndefinition width="30"></columndefinition> <columndefinition></columndefinition> </grid.columndefinitions> <textblock grid.column="1" text="crystal reports" foreground="white" verticalalignment="center"></textblock> <image source="{staticresource reporticon}" horizontalalignment="left" grid.column="0" width="25" height="25" margin="1"></image> </grid> </datatemplate> </viblend:menuitem.headertemplate> </viblend:menuitem> </viblend:menu> the following style applied menu , and menu items
<style targettype="viblend:menu" x:key="thememenustyle"> <setter property="horizontalcontentalignment" value="stretch" /> <setter property="verticalcontentalignment" value="center" /> <setter property="verticalalignment" value="top"/> <setter property="padding" value="3" /> <setter property="tabnavigation" value="local" /> <setter property="orientation" value="horizontal"></setter> <setter property="borderbrush" value="transparent"/> <setter property="horizontaltemplate"> <setter.value> <itemspaneltemplate> <stackpanel x:name="layoutroot" orientation="horizontal" verticalalignment="bottom" /> </itemspaneltemplate> </setter.value> </setter> <setter property="verticaltemplate"> <setter.value> <itemspaneltemplate> <stackpanel x:name="layoutroot" orientation="vertical" verticalalignment="top" /> </itemspaneltemplate> </setter.value> </setter> <setter property="template"> <setter.value> <controltemplate targettype="viblend:menu"> <border borderthickness="{templatebinding borderthickness}" borderbrush="{templatebinding borderbrush}" background="transparent" x:name="background" opacity="1"> <itemspresenter x:name="itemshost" verticalalignment="top"> </itemspresenter> </border> </controltemplate> </setter.value> </setter> </style> <style targettype="viblend:menuitem" x:key="thememenuitemstyle"> <setter property="horizontalcontentalignment" value="stretch" /> <setter property="verticalcontentalignment" value="center" /> <setter property="verticalalignment" value="top" /> <setter property="padding" value="9,3,9,3" /> <setter property="tabnavigation" value="local" /> <setter property="rootnormalforebrush" value="{staticresource menuitemrootforegroundbrush}"/> <setter property="roothighlightforebrush" value="{staticresource menuitemroothighlightforegroundbrush}"/> <setter property="disabledforebrush" value="{staticresource menuitemdisabledforegroundbrush}"/> <setter property="normalforebrush" value="{staticresource menuitemforegroundbrush}"/> <setter property="highlightforebrush" value="{staticresource menuitemhighlightforegroundbrush}"/> <setter property="template"> <setter.value> <controltemplate targettype="viblend:menuitem"> <grid verticalalignment="top"> <vsm:visualstatemanager.visualstategroups> <vsm:visualstategroup x:name="popupstates"> <vsm:visualstategroup.transitions> <vsm:visualtransition generatedduration="00:00:00.1" to="popupopened"/> <vsm:visualtransition generatedduration="00:00:00.1" to="popupclosed"/> <vsm:visualtransition generatedduration="00:00:00.1" to="popupcollapsed"/> <vsm:visualtransition generatedduration="00:00:00.2" to="popupexpanded"/> </vsm:visualstategroup.transitions> <vsm:visualstate x:name="popupexpanded"> <storyboard x:name="expandingstoryboard"> <doubleanimation storyboard.targetname="animationpresenter" storyboard.targetproperty="percentage" to="1.0" duration="0:0:0.2"/> </storyboard> </vsm:visualstate> <vsm:visualstate x:name="popupcollapsed"> <storyboard x:name="collapsingstoryboard"> <doubleanimation storyboard.targetname="animationpresenter" storyboard.targetproperty="percentage" to="0.0" duration="0:0:0.1" /> </storyboard> </vsm:visualstate> <vsm:visualstate x:name="popupopened"> <storyboard x:name="openingstoryboard"> <doubleanimation storyboard.targetname="popupchild" storyboard.targetproperty="opacity" to="1.0" duration="0:0:0.1" /> </storyboard> </vsm:visualstate> <vsm:visualstate x:name="popupclosed"> <storyboard x:name="closingstoryboard"> <doubleanimation storyboard.targetname="popupchild" storyboard.targetproperty="opacity" to="0.0" duration="0:0:0.1" /> </storyboard> </vsm:visualstate> </vsm:visualstategroup> <vsm:visualstategroup x:name="commonstates"> <vsm:visualstategroup.transitions> <vsm:visualtransition generatedduration="00:00:00.2"/> </vsm:visualstategroup.transitions> <vsm:visualstate x:name="normal" > <storyboard> <doubleanimation duration="0" storyboard.targetname="imagemargin" storyboard.targetproperty="opacity" to="1"/> <doubleanimation duration="0" storyboard.targetname="backgroundgradientover" storyboard.targetproperty="opacity" to="0"/> <doubleanimation duration="0" storyboard.targetname="innerbackgroundgradientover" storyboard.targetproperty="opacity" to="0"/> </storyboard> </vsm:visualstate> <vsm:visualstate x:name="headermouseover"> <storyboard> <doubleanimation duration="0" storyboard.targetname="headerbackground" storyboard.targetproperty="opacity" to="1"/> </storyboard> </vsm:visualstate> <vsm:visualstate x:name="mouseover"> <storyboard> <doubleanimation duration="0" storyboard.targetname="backgroundgradientover" storyboard.targetproperty="opacity" to="1"/> <doubleanimation duration="0" storyboard.targetname="imagemargin" storyboard.targetproperty="opacity" to="0"/> <doubleanimation duration="0" storyboard.targetname="innerbackgroundgradientover" storyboard.targetproperty="opacity" to="1"/> </storyboard> </vsm:visualstate> <vsm:visualstate x:name="disabled"> <storyboard> <objectanimationusingkeyframes duration="0" storyboard.targetname="background" storyboard.targetproperty="(uielement.visibility)"> <discreteobjectkeyframe keytime="0" value="collapsed"/> </objectanimationusingkeyframes> </storyboard> </vsm:visualstate> </vsm:visualstategroup> <vsm:visualstategroup x:name="selectionstates"> <vsm:visualstategroup.transitions> <vsm:visualtransition generatedduration="00:00:00.2"/> </vsm:visualstategroup.transitions> <vsm:visualstate x:name="unselected"> <storyboard> <doubleanimation duration="5" storyboard.targetname="background" storyboard.targetproperty="opacity" to="0"/> <doubleanimation duration="5" storyboard.targetname="backgroundgradientselecteddisabled" storyboard.targetproperty="opacity" to="0"/> </storyboard> </vsm:visualstate> <vsm:visualstate x:name="selected"> <storyboard> <doubleanimation duration="5" storyboard.targetname="background" storyboard.targetproperty="opacity" to="1"/> <doubleanimation duration="5" storyboard.targetname="backgroundgradientselecteddisabled" storyboard.targetproperty="opacity" to="1"/> </storyboard> </vsm:visualstate> </vsm:visualstategroup> <vsm:visualstategroup x:name="focusstates"> <vsm:visualstate x:name="focused"/> <vsm:visualstate x:name="unfocused"/> </vsm:visualstategroup> </vsm:visualstatemanager.visualstategroups> <rectangle stroke="{staticresource menuimagemarginstrokebrush}" fill="{staticresource menuimagemarginbrush}" x:name="imagemargin" width="27" strokethickness="0" horizontalalignment="left" radiusx="1" radiusy="1" opacity="1"></rectangle> <rectangle fill="{staticresource menuheaderitembackgroundbrush}" x:name="headerbackground" radiusx="1" radiusy="1" stroke="{staticresource menuheaderitemstrokebrush}" opacity="0"></rectangle> <rectangle fill="{staticresource toolbarhoverbackgroundbrush}" radiusx="5" radiusy="5" x:name="innerbackgroundgradientover" stroke="{staticresource menuhighlightstrokebrush}" opacity="0"></rectangle> <rectangle margin="1" fill="{staticresource toolbarhoverbackgroundbrush}" x:name="backgroundgradientover" radiusx="5" radiusy="5" stroke="#ff09638e" opacity="1"></rectangle> <rectangle x:name="backgroundgradientselecteddisabled" radiusx="1" radiusy="1" opacity="0"> <rectangle.fill> <lineargradientbrush endpoint="0.5,1" startpoint="0.5,0"> <gradientstop color="#ffefefef" offset="0.046"/> <gradientstop color="#ffefefef" offset="0.194"/> <gradientstop color="#ffefefef" offset="0.507"/> <gradientstop color="#ffefefef" offset="0.521"/> <gradientstop color="#ffefefef" offset="0.811"/> <gradientstop color="#ffefefef" offset="0.982"/> </lineargradientbrush> </rectangle.fill> <rectangle.stroke> <lineargradientbrush endpoint="0.5,0" startpoint="0.5,1"> <gradientstop color="#ffefefef"/> <gradientstop color="#ffefefef" offset="1"/> </lineargradientbrush> </rectangle.stroke> </rectangle> <rectangle stroke="{staticresource menuseparatorstroke}" fill="{staticresource menuseparatorbrush}" x:name="separatorbackground" margin="1,1,1,1" height="1" strokethickness="0" radiusx="1" radiusy="1" opacity="0"></rectangle> <rectangle stroke="{staticresource menuselectedstrokebrush}" fill="{staticresource menuselectedbrush}" x:name="background" strokethickness="1" radiusx="1" radiusy="1" opacity="0"></rectangle> <!--<path visibility="collapsed" height="10" horizontalalignment="left" margin="10,1,0,1.5" x:name="checkicon" width="10.5" opacity="0" fill="{staticresource menucheckiconbrush}" stretch="fill" data="m102.03442,598.79645 l105.22962,597.78918 l106.78825,600.42358 c106.78825,600.42358 108.51028,595.74304 110.21724,593.60419 c112.00967,591.35822 114.89314,591.42316 114.89314,591.42316 c114.89314,591.42316 112.67844,593.42645 111.93174,594.44464 c110.7449,596.06293 107.15683,604.13837 107.15683,604.13837 z"/>--> <stackpanel orientation="horizontal" verticalalignment="top"> <contentcontrol x:name="contentpresenter" fontfamily="segoe ui, microsoft sans serif, verdana" grid.column="0" content="{templatebinding header}" contenttemplate="{templatebinding headertemplate}" horizontalalignment="{templatebinding horizontalcontentalignment}" verticalalignment="top" margin="{templatebinding padding}"/> <path margin="10,0,0,0" horizontalalignment="right" x:name="arrow" fill="{staticresource menuarrowbrush}" verticalalignment="center" rendertransformorigin="0,1.2" stroke="{staticresource menuarrowbrush}" strokethickness="2" data="m 1,1.5 l 4.5,5 l 8,1.5" opacity="1"> <path.rendertransform> <transformgroup> <scaletransform/> <skewtransform/> <rotatetransform angle="-90"/> <translatetransform/> </transformgroup> </path.rendertransform> </path> </stackpanel> <popup x:name="popup" verticalalignment="top"> <border cornerradius="5,5,5,5" x:name="popupchild" borderthickness="0,0,0,0" background="transparent" opacity="0"> <border.borderbrush> <lineargradientbrush endpoint="0, 0.5" startpoint="1,0.5"> <gradientstop color="#ffb1c7d6" offset="0"/> <gradientstop color="#ffb1c7d6" offset="1"/> </lineargradientbrush> </border.borderbrush> <border cornerradius="5,5,5,5" height="{templatebinding dropdownheight}" x:name="popupchild2" borderthickness="1" borderbrush="{staticresource mainmenubackgroundbrush}" background="{staticresource mainmenubackgroundbrush}" opacity="1"> <utilitycontrols:scrollablepanel utilitycontrols:scrollablepanel.verticalscrollbarvisibility="{templatebinding verticalscrollbarvisibility}" x:name="scrollablepanel" horizontalscrollbarvisibility="disabled"> <itemspresenter margin="1" x:name="itemshost" verticalalignment="top"> </itemspresenter> </utilitycontrols:scrollablepanel> </border> </border> </popup> <!--<utilities:expandablecontentcontrol x:name="animationpresenter" verticalalignment="top"> </utilities:expandablecontentcontrol>--> </grid> </controltemplate> </setter.value> </setter> </style>
this guess: try set verticalalignment of menu root element top. seems me menu big stackpanel , therefore rendered beyond bottom resp. top of stackpanel (by design).
<viblend:menu verticalalignment="top" ...> ... </viblend:menu> 
Comments
Post a Comment