c# - How to change the MenuItem Header according to the value selected in its submenu? -
<window x:class="menukinect.mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" title="mainwindow" height="350" width="525"> <window.resources> <style targettype="{x:type menuitem}"> <setter property="foreground" value="white" /> <setter property="fontsize" value="12" /> <setter property="template"> <setter.value> <controltemplate targettype="{x:type menuitem}"> <border x:name="border" background="{templatebinding background}" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}"> <grid> <grid.columndefinitions> <columndefinition x:name="col0" minwidth="17" width="auto" sharedsizegroup="menuitemiconcolumngroup"/> <columndefinition width="auto" sharedsizegroup="menutextcolumngroup"/> <columndefinition width="auto" sharedsizegroup="menuitemigtcolumngroup"/> <columndefinition x:name="col3" width="14"/> </grid.columndefinitions> <!-- contentpresenter show icon if needed --> <contentpresenter grid.column="0" margin="4,0,6,0" x:name="icon" verticalalignment="center" contentsource="icon"/> <!-- glyph checkmark if needed checkable menu --> <grid grid.column="0" visibility="hidden" margin="4,0,6,0" x:name="glyphpanel" verticalalignment="center"> <path x:name="glyphpanelpath" verticalalignment="center" fill="{templatebinding foreground}" data="m0,2 l0,4.8 l2.5,7.4 l7.1,2.8 l7.1,0 l2.5,4.6 z" flowdirection="lefttoright"/> </grid> <!-- content menu text etc --> <contentpresenter grid.column="1" margin="{templatebinding padding}" x:name="headerhost" recognizesaccesskey="true" contentsource="header"/> <!-- content menu igt --> <contentpresenter grid.column="2" margin="8,1,8,1" x:name="igthost" contentsource="inputgesturetext" verticalalignment="center"/> <!-- arrow drawn path points next level of menu --> <grid grid.column="3" margin="4,0,6,0" x:name="arrowpanel" verticalalignment="center"> <path x:name="arrowpanelpath" horizontalalignment="right" verticalalignment="center" fill="{templatebinding foreground}" data="m0,0 l0,8 l4,4 z"/> </grid> <!-- popup body of menu expands down or across depending on level of item --> <popup isopen="{binding path=issubmenuopen, relativesource={relativesource templatedparent}}" placement="right" x:name="submenupopup" focusable="false" popupanimation="{dynamicresource {x:static systemparameters.menupopupanimationkey}}"> <!--<border x:name="submenuborder" borderbrush="{binding path=foreground, relativesource={relativesource ancestortype={x:type menu}}}" borderthickness="1" padding="2,2,2,2">--> <grid x:name="submenu" grid.issharedsizescope="true"> <!-- stackpanel holds children of menu. set isitemshost=true --> <stackpanel isitemshost="true" keyboardnavigation.directionalnavigation="cycle"/> </grid> <!--</border>--> </popup> </grid> </border> <!-- these triggers re-configure 4 arrangements of menuitem show different levels of menu via role --> <controltemplate.triggers> <!-- role = toplevelheader : root menu item in menu; popup expands down --> <trigger property="role" value="toplevelheader"> <setter property="padding" value="6,1,6,1"/> <setter property="placement" value="bottom" targetname="submenupopup"/> <setter property="minwidth" value="0" targetname="col0"/> <setter property="width" value="auto" targetname="col3"/> <setter property="visibility" value="collapsed" targetname="icon"/> <setter property="visibility" value="collapsed" targetname="glyphpanel"/> <setter property="visibility" value="collapsed" targetname="igthost"/> <setter property="visibility" value="collapsed" targetname="arrowpanel"/> </trigger> <!-- role = toplevelitem : child menu item top level without child items--> <trigger property="role" value="toplevelitem"> <setter property="padding" value="6,1,6,1"/> <setter property="visibility" value="collapsed" targetname="arrowpanel"/> </trigger> <!-- role = submenuheader : child menu item not have children --> <trigger property="role" value="submenuheader"> <setter property="dockpanel.dock" value="top"/> <setter property="padding" value="0,2,0,2"/> </trigger> <!-- role = submenuitem : child menu item has children--> <trigger property="role" value="submenuitem"> <setter property="dockpanel.dock" value="top"/> <setter property="padding" value="0,2,0,2"/> <setter property="visibility" value="collapsed" targetname="arrowpanel"/> </trigger> <trigger property="issuspendingpopupanimation" value="true"> <setter property="popupanimation" value="none" targetname="submenupopup"/> </trigger> <!-- if no icon present collapse icon content --> <trigger property="icon" value="{x:null}"> <setter property="visibility" value="collapsed" targetname="icon"/> </trigger> <!-- glyphpanel contains checkmark --> <trigger property="ischecked" value="true"> <setter property="visibility" value="visible" targetname="glyphpanel"/> <setter property="visibility" value="collapsed" targetname="icon"/> </trigger> <!-- using system colors menu highlight , isenabled--> <trigger property="ishighlighted" value="true"> <!--<setter property="background" value="red" targetname="border"/>--> <setter property="foreground" value="white"/> </trigger> <trigger property="isenabled" value="false"> <setter property="foreground" value="lightgray"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> <style.triggers> <trigger property="ismouseover" value="true"> <!--<setter property="background" value="red" />--> <setter property="foreground" value="#ffa4ddfa"/> </trigger> </style.triggers> </style> </window.resources> <grid> <menu height="23" name="menu1" width="171" margin="10,10,0,0" horizontalalignment="center" verticalalignment="top" background="#ff004165"> <!--<menu.bitmapeffect> <dropshadowbitmapeffect /> </menu.bitmapeffect>--> <menuitem header="settings"> <menuitem x:name="headerlogouttime" header="logout time" background="#ff004165" click="headerlogouttime_click"> <menuitem x:name="header10min" header="10 min" background="#ff004165" ></menuitem> <menuitem x:name="header20min" header="20 min" background="#ff004165" ></menuitem> <menuitem x:name="header30min" header="30 min" background="#ff004165" ></menuitem> <menuitem x:name="header40min" header="40 min" background="#ff004165" ></menuitem> <menuitem x:name="header50min" header="50 min" background="#ff004165" ></menuitem> </menuitem> <menuitem header="logout" background="#ff004165"></menuitem> </menuitem> </menu> </grid> </window> i have made code according given picture,i have used menu , submenu,now want in above picture,that when select item of submenu i.e,10 or 20 or 30,it should append header logouttime , should displayed when hover on item,how this?i want displayed in image..please help
try code:
xaml
<grid> <grid.resources> <style x:key="mymenuitem" basedon="{staticresource {x:type menuitem}}" targettype="{x:type menuitem}"> <eventsetter event="click" handler="headerlogouttime_click" /> <eventsetter event="mouseenter" handler="headermin_mouseenter" /> <setter property="background" value="#ff004165" /> </style> </grid.resources> <menu height="23" name="menu1" width="171" margin="10,10,0,0" horizontalalignment="center" verticalalignment="top" background="#ff004165"> <menuitem header="settings"> <menuitem x:name="headerlogouttime" header="logout time: 00 min" background="#ff004165"> <menuitem x:name="header10min" header="10 min" style="{staticresource mymenuitem}" /> <menuitem x:name="header20min" header="20 min" style="{staticresource mymenuitem}" /> <menuitem x:name="header30min" header="30 min" style="{staticresource mymenuitem}" /> <menuitem x:name="header40min" header="40 min" style="{staticresource mymenuitem}" /> <menuitem x:name="header50min" header="50 min" style="{staticresource mymenuitem}" /> </menuitem> <menuitem header="logout" background="#ff004165" /> </menuitem> </menu> </grid> code-behind
public partial class mainwindow : window { public mainwindow() { initializecomponent(); } private void headerlogouttime_click(object sender, routedeventargs e) { setmenuitemheader(sender menuitem); } private void headermin_mouseenter(object sender, mouseeventargs e) { setmenuitemheader(sender menuitem); } private void setmenuitemheader(menuitem menuitem) { var sb = new stringbuilder(); if (menuitem != null) { headerlogouttime.header = ""; headerlogouttime.header = sb.append("logout time: ").append(headerlogouttime.header).append(menuitem.header); } } } clarification
in mymenuitem style define click , mouseenter handlers menuitems, contains in headerlogouttime, here set background color.
in headerlogouttime_click , in headermin_mouseenter handlers, of stringbuilder setting new value menuitem header. class stringbuilder chosen enhance performance working strings.
edit: add line separator
to display line, in picture, use separator control style:
<style x:key="separatorstylekey" targettype="{x:type separator}"> <setter property="overridesdefaultstyle" value="true" /> <setter property="snapstodevicepixels" value="true" /> <setter property="background" value="white" /> <setter property="height" value="1" /> <setter property="template"> <setter.value> <controltemplate targettype="{x:type separator}"> <rectangle snapstodevicepixels="{templatebinding snapstodevicepixels}" height="{templatebinding height}" width="{templatebinding width}" fill="{templatebinding background}" /> </controltemplate> </setter.value> </setter> </style> and use this:
<menuitem header="settings"> <menuitem x:name="headerlogouttime" header="logout time: 00 min" background="#ff004165"> <menuitem x:name="header10min" header="10 min" style="{staticresource mymenuitem}" /> <separator style="{staticresource separatorstylekey}" /> <menuitem x:name="header20min" header="20 min" style="{staticresource mymenuitem}" /> <separator style="{staticresource separatorstylekey}" /> <menuitem x:name="header30min" header="30 min" style="{staticresource mymenuitem}" /> <separator style="{staticresource separatorstylekey}" /> <menuitem x:name="header40min" header="40 min" style="{staticresource mymenuitem}" /> <separator style="{staticresource separatorstylekey}" /> <menuitem x:name="header50min" header="50 min" style="{staticresource mymenuitem}" /> </menuitem> <menuitem header="logout" background="#ff004165" /> </menuitem>
Comments
Post a Comment