WPF实现半圆形导航菜单

本文实例为大家分享了wpf实现半圆形导航菜单的具体代码，供大家参考，具体内容如下

实现效果如下：

思路：

扇形自定义控件组合成半圆型菜单，再通过clip实现菜单的展开和折叠。

步骤：

1、扇形自定义控件circularsectorcontrol

窗体布局xaml：

<grid x:name="maingrid" mouseenter="maingrid_mouseenter" mouseleave="maingrid_mouseleave">
    <path x:name="sectorpath" data="m 200,200 0,200 a 200,200 0 0 1 58.6,58.6z" fill="{binding elementname=sector, path=backgroundcolor}"></path>
    <image source="{binding elementname=sector, path=displayimage}" stretch="fill" width="35" height="35" horizontalalignment="left" verticalalignment="bottom" margin="40,10">
      <image.rendertransform>
        <rotatetransform angle="-67.5"></rotatetransform>
      </image.rendertransform>
    </image>
</grid>

交互逻辑：

public static readonly dependencyproperty displayimageproperty = dependencyproperty.register("displayimage", typeof(imagesource), typeof(circularsectorcontrol), new propertymetadata(null));
 public imagesource displayimage
    {
      get { return (imagesource)getvalue(displayimageproperty); }
      set { setvalue(displayimageproperty, value); }
    }
 
    public static readonly dependencyproperty backgroundcolorproperty = dependencyproperty.register("backgroundcolor", typeof(solidcolorbrush), typeof(circularsectorcontrol), new propertymetadata(null));
    public solidcolorbrush backgroundcolor
    {
      get { return (solidcolorbrush)getvalue(backgroundcolorproperty); }
      set { setvalue(backgroundcolorproperty, value); }
    }
 
    public circularsectorcontrol()
    {
      initializecomponent();
    }
 
    private void maingrid_mouseenter(object sender, mouseeventargs e)
    {
      this.sectorpath.fill = new solidcolorbrush(color.fromrgb(246,111,111));
    }
 
    private void maingrid_mouseleave(object sender, mouseeventargs e)
    {
      this.sectorpath.fill = backgroundcolor;
}

2、半圆型菜单控件

窗体布局xaml：

<usercontrol.resources>
    <storyboard x:key="stbshow">
      <doubleanimation storyboard.targetname="myellipsegeometry"
               storyboard.targetproperty="radiusx"
               duration="0:0:0.5" from="0" to="200"
               fillbehavior="holdend"/>
      <doubleanimation storyboard.targetname="myellipsegeometry"
               storyboard.targetproperty="radiusy"
               duration="0:0:0.5" from="0" to="200"
               fillbehavior="holdend" />
    </storyboard>
    <storyboard x:key="stbhide">
      <doubleanimation storyboard.targetname="myellipsegeometry"
               storyboard.targetproperty="radiusx"
               duration="0:0:0.5" from="200" to="0"
               fillbehavior="holdend"/>
      <doubleanimation storyboard.targetname="myellipsegeometry"
               storyboard.targetproperty="radiusy"
               duration="0:0:0.5" from="200" to="0"
               fillbehavior="holdend" />
    </storyboard>
  </usercontrol.resources>
  <canvas x:name="maincanvas" cursor="hand" cliptobounds="true">
    <canvas x:name="sectorcanvas">
      <local:circularsectorcontrol backgroundcolor="#f44e4e" displayimage="images/1.png"></local:circularsectorcontrol>
      <local:circularsectorcontrol backgroundcolor="#f45757" displayimage="images/2.png">
        <local:circularsectorcontrol.rendertransform>
          <rotatetransform angle="45" centerx="200" centery="200"></rotatetransform>
        </local:circularsectorcontrol.rendertransform>
      </local:circularsectorcontrol>
      <local:circularsectorcontrol backgroundcolor="#f44e4e" displayimage="images/3.png">
        <local:circularsectorcontrol.rendertransform>
          <rotatetransform angle="90" centerx="200" centery="200"></rotatetransform>
        </local:circularsectorcontrol.rendertransform>
      </local:circularsectorcontrol>
      <local:circularsectorcontrol backgroundcolor="#f45757" displayimage="images/4.png">
        <local:circularsectorcontrol.rendertransform>
          <rotatetransform angle="135" centerx="200" centery="200"></rotatetransform>
        </local:circularsectorcontrol.rendertransform>
      </local:circularsectorcontrol>
    </canvas>
    <path>
      <path.data>
        <ellipsegeometry x:name="myellipsegeometry" radiusx="0" radiusy="0" center="200,200"></ellipsegeometry>
      </path.data>
    </path>
    <grid x:name="bottomgrid" canvas.left="150" canvas.top="150" mouseleftbuttondown="bottomgrid_mouseleftbuttondown">
      <path data="m 0,0 a 100,100 1 0 1 200,0z" fill="white" stretch="fill" width="100" height="50"/>
      <textblock x:name="bottomtb" text="+" fontsize="38" horizontalalignment="center" verticalalignment="center"></textblock>
    </grid>
</canvas>

交互逻辑：

//委托
public delegate void eventhandle(bool isshow);
public event eventhandle showclickevent;
 
 private storyboard storyboard = new storyboard();
 
    public roundmenucontrol()
    {
      initializecomponent();
      compositiontarget.rendering += updateellipse;
    }
 
    private void updateellipse(object sender, eventargs e)
    {
      this.sectorcanvas.clip = this.myellipsegeometry;
    }
 
    private void bottomgrid_mouseleftbuttondown(object sender, mousebuttoneventargs e)
    { 
      if (this.bottomtb.text == "+")
      {
        this.bottomtb.text = "-";
        storyboard stbshow = (storyboard)findresource("stbshow");
        stbshow.begin();
        showclickevent?.invoke(true);
      }
      else
      {
        this.bottomtb.text = "+";
        storyboard stbhide = (storyboard)findresource("stbhide");
        stbhide.begin();
        showclickevent?.invoke(false);
      }
}

3、主窗体调用

窗体布局xaml：

<window x:class="roundmenu.mainwindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:roundmenu"
    title="mainwindow" width="650" height="400" background="#f6c06d" windowstartuplocation="centerscreen">
  <grid>
    <local:roundmenucontrol x:name="roundmenu" margin="125,170,100,0"></local:roundmenucontrol>
  </grid>
</window>

交互逻辑：

public mainwindow()
 {
  initializecomponent();
    this.roundmenu.showclickevent += roundmenu_showclickevent;
  }
 
  private void roundmenu_showclickevent(bool isshow)
    {
      if (isshow)
        this.background = new solidcolorbrush(color.fromrgb(255, 128, 79));
      else
        this.background = new solidcolorbrush(color.fromrgb(246, 192, 109));
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。