WPF自定义MenuItem样式的实现方法

一、前言

默认的menuitem样式比较普通，这次自定义menuitem的样式也只是对menuitem的颜色风格进行变化。需要其他功能的变化，大家可以根据样式代码进行扩展。

menuitem的样式代码：

<!--menuitem-->
    <style targettype="menuitem">
      <setter property="template">
        <setter.value>
          <controltemplate targettype="menuitem">
            <grid tooltip="{templatebinding header}" height="24" background="#fbfbfd" width="{templatebinding width}">
              <grid.columndefinitions>
                <columndefinition width="30" />
                <columndefinition width="*" minwidth="80"/>
              </grid.columndefinitions>
              <border background="#ebebed"/>
              <border x:name="_border"  grid.columnspan="2"/>
              <image x:name="_imgicon" width="12" height="12" stretch="uniform" source="{binding icon,relativesource={relativesource templatedparent}}" />
              <textblock foreground="#2d2d30" grid.column="1" margin="5 0 15 0" verticalalignment="center" x:name="_txt" text="{binding header,relativesource={relativesource templatedparent}}" />
              <path visibility="collapsed" x:name="_path" grid.column="1" horizontalalignment="right" margin="5 13 5 0"  data="m0,4 4,0 0,-4 z" fill="#7e8a92"/>
              <popup placement="right" x:name="submenupopup" allowstransparency="true"  focusable="false" isopen="{templatebinding issubmenuopen}" >
                <scrollviewer  scrollviewer.verticalscrollbarvisibility="auto" scrollviewer.horizontalscrollbarvisibility="disabled">
                  <border background="#ffc787" name="submenuborder" borderbrush="lightgray" borderthickness="1" snapstodevicepixels="true"  >
                    <stackpanel  isitemshost="true"  keyboardnavigation.directionalnavigation="cycle" />
                  </border>
                </scrollviewer>
              </popup>

            </grid>
            <controltemplate.triggers>
              <trigger property="hasitems" value="true">
                <setter targetname="_path" property="visibility" value="visible"/>
              </trigger>
              <trigger property="ismouseover" value="true">
                <setter targetname="_border" property="background" value="#ffc787"/>
                <setter targetname="_txt" property="foreground" value="white"/>
                <setter targetname="_path" property="fill" value="white"/>
              </trigger>
              <trigger property="isenabled" value="false">
                <setter targetname="_txt" property="foreground" value="gray"/>
              </trigger>
            </controltemplate.triggers>
          </controltemplate>
        </setter.value>
      </setter>
    </style>

引用示例：

<grid>
      <grid.contextmenu>
        <contextmenu>
          <menuitem header="菜单一">
            <menuitem header="子菜单"/>
          </menuitem>
          <menuitem header="菜单二"></menuitem>
        </contextmenu>

      </grid.contextmenu>
    </grid>

显示效果：

所有代码已经上传到github：https://github.com/cmfgit/wpfdemo.git

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。