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));
}

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

(0)

相关推荐

  • C#自定义控件添加右键菜单的方法

    C#自定义控件添加右键菜单非常简单,主要用到控件,像control定义右键菜单,用items.add()叠加右键菜单内容,用click事件处理函数. 1.control是要定义右键菜单的控件. private void control_MouseDown(object sender, MouseEventArgs e) {    if (e.Button == MouseButtons.Right)    {        ContextMenu menu = new rightClickMen

  • C#页码导航显示及算法实现代码

    页码导航,先看显示效果: 算法要求: 1.页数小于等于1时不显示: 2.页数大于10时,自动缩短. 具体代码如下: 复制代码 代码如下: /// <summary> /// 获取分页导航 /// </summary> /// <param name="intPageIndex">页码</param> /// <param name="intPageCount">页数</param> /// &l

  • 使用c#开发公众平台自定义菜单功能

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="cm.aspx.cs" Inherits="guotaotao_weixin.cm" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

  • asp.net(C#)生成无限级别菜单

    首先,创建数据库表的代码如下: 无限级树的数据库表代码 复制代码 代码如下: if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[work_sysmenu]') and OBJECTPROPERTY(id, N'IsUserTable') = 1) drop table [dbo].[work_sysmenu] GO CREATE TABLE [dbo].[work_sysmenu] ( [flowid] [

  • c# TreeView添加右键快键菜单有两种方法

    一种就是使用TreeView的ContextMenuStrip属性,添加一个新ContextMenuStrip,这个方法非常的简答直接,缺点是右键菜单是整个控件响应的,也就是说即使没有右键选中节点也是会触发快捷菜单的显示 这种方法里获取哪一个的node选中是通过这个方法: 复制代码 代码如下: TreeNode curNode = this.trvFolder.GetNodeAt(e.X, e.Y) 另一种是创建ContextMenuStrip,并且使用TreeView的NodeMouseCli

  • 基于C#实现的仿windows左侧伸缩菜单效果

    本文所述为基于C#实现的折叠菜单,风格仿照Windows打开我的电脑后左侧的伸缩菜单效果,并且同样是蓝色的效果,看着和windows的效果一样漂亮,可以实现折叠.展开等功能.这在学习C#界面编程的时候能用上,其主要实现代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq

  • C#实现Winform动态添加菜单的方法

    本文实例讲述了C#实现Winform动态添加菜单的方法.分享给大家供大家参考.具体分析如下: 最近在做WINFORM开发,一直都在为主界面的点击事件及动态加载菜单苦脑.现在已解决这个问题了,可以实现数据库或都XML等配置完成动态生成菜单及事件加载.代码如下: private void Form1_Load(object sender, EventArgs e) { //添加菜单一 ToolStripMenuItem subItem; subItem = AddContextMenu("入库&qu

  • WPF实现半圆形导航菜单

    本文实例为大家分享了WPF实现半圆形导航菜单的具体代码,供大家参考,具体内容如下 实现效果如下: 思路: 扇形自定义控件组合成半圆型菜单,再通过clip实现菜单的展开和折叠. 步骤: 1.扇形自定义控件CircularSectorControl 窗体布局xaml: <Grid x:Name="mainGrid" MouseEnter="MainGrid_MouseEnter" MouseLeave="MainGrid_MouseLeave"

  • AngularJS+Bootstrap3多级导航菜单的实现代码

    将介绍如何用AngularJS构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀web前端框架.在当前如此多的web框架下,AngularJS能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板.Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒.用angularjs就像写后台代码,更规范,更结构化,更可控. 本文将介绍如何实现多限级导航菜单. 目录 1.静态多级菜单实现 2.动态多级菜单实现 1. 静态多级

  • WordPress中制作导航菜单的PHP核心方法讲解

    WordPress 3.0 引入导航菜单功能, 让页面的导航和链接的管理变得简单易用. WP 向用户提供了菜单管理页面和多种调用方法, 我们先来看一下一般WordPress 的导航菜单都具有哪些功能. 管理菜单页面 页面路径: Appearance > Menus 由从界面来看, 能够创建多个菜单, 并且可以向菜单中添加自定义链接, 页面链接和分类链接. 但有一点需要注意, 如果将页面链接和分类链接加入, 被带入菜单的仅是链接, 而不是页面和分类本身, 也就是说, 子页面和子分类不会成为菜单的一

  • CSS网页布局入门教程12:纵向导航菜单

    纵向导航菜单也是网站应用中的一种重要形式,所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式.先看一下效果吧! 如图所示的效果,我们先看一下代码结构: <div id="nav">    <h1>CSS</h1>        <h2><a href="#">css入门</a></h2>        <h2><a href="#&quo

  • jQuery实现鼠标悬停背景翻转的黑色导航菜单代码

    本文实例讲述了jQuery实现鼠标悬停背景翻转的黑色导航菜单代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现的鼠标悬停背景翻转的黑色导航菜单菜单,预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了:当然,在实际使用中,不会出现这样的问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-bg-cha-black-nav-menu/ 具体代码如下: <!DOCTYPE html

  • jQuery实现简单漂亮的Nav导航菜单效果

    本文实例讲述了jQuery实现简单漂亮的Nav导航菜单效果.分享给大家供大家参考,具体如下: 自己写的一个简单的导航菜单,先看效果: 鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项. 页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等,另一个 div 则是底部的蓝条,需要给第一项和最后一项设置不同的 class ,样式需要用到: <div id="nav"> <div class="navItem ind

  • jquery实现个人中心导航菜单效果和美观都非常不错

    之前为大家介绍了一款jquery和css3实现的很酷的菜单导航.这是一款由jquery开发的导航菜单.适合放在门户网站的个人用户中心后台.效果和美观都非常不错.我们先一起看看效果图: 源码下载 一起看下实现的代码: html代码: <nav class="animated bounceInDown"> <ul> <li><a href="#profile"> <div class="fa fa-user

  • 基于jquery实现百度新闻导航菜单滑动动画

    本文实例为大家分享jquery实现百度新闻导航菜单滑动动画,供大家参考,具体内容如下 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

  • 一款基jquery超炫的动画导航菜单可响应单击事件

    今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 源码下载 html代码: <ul> <li><a href="http://www.w2bc.com">First</a></li> <li><a href="http://www.w2bc.com"&g

  • javascript 树形导航菜单实例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

随机推荐