WPF实现半圆形导航菜单
更新时间:2020年11月3日 15:19 点击:1395
本文实例为大家分享了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)); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
下一篇: WPF实现手风琴式轮播图切换效果
相关文章
- 本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考,具体如下:先来看如下运行效果截图:在线演示地址如下:http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08
- 本文实例讲述了JS基于Mootools实现的个性菜单效果代码。分享给大家供大家参考,具体如下:这里演示基于Mootools做的带动画的垂直型菜单,是一个初学者写的,用来学习Mootools的使用有帮助,下载时请注意要将外部引用的mootools...2015-10-23
- 本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考,具体如下:这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自己修改CSS代码,这个滑动门将每一...2015-10-21
c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)
这篇文章主要介绍了c# WPF中通过双击编辑DataGrid中Cell的示例(附源码),帮助大家更好的理解和学习使用c#,感兴趣的朋友可以了解下...2021-03-03- 本文实例讲述了jQuery实现有动画淡出效果的二级折叠菜单代码。分享给大家供大家参考,具体如下:这里介绍jQuery实现有动画淡出效果的二级折叠菜单代码,相当不错,因考虑功能的实现,所以没有怎么美化,不过这样也好,可以给大家更...2015-10-21
- 这篇文章主要为大家详细介绍了jQuery实现下拉菜单滑动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-09
- 本文实例讲述了jQuery实现可关闭固定于底(顶)部的工具条菜单效果。分享给大家供大家参考,具体如下:这是一款可关闭始终在页面底部的工具条菜单,浮动在页面顶部的大家见的比较多了,本款从形式上来说与其它的没什么差别,只是浮...2015-11-08
- 二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 实现效果:当选择大类时,小类下拉框里的选项内容也随着改...2015-10-30
- 最近在网上看到了新版的360安全卫士,感觉界面还不错,于是用WPF制作了一个,时间有限,一些具体的控件没有制作,用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
- 本文主要对介绍利用Vue.js 的递归组件,实现了一个最基本的树形菜单。具有很好的参考价值,下面就跟着小编一起来看下吧...2017-01-09
- 由于业务需要,要求实现树形菜单,且菜单数据由后台返回,下面这篇文章主要给大家介绍了关于js如何构造elementUI树状菜单的数据结构的相关资料,需要的朋友可以参考下...2021-05-13
- 这是一款精美的多级下拉菜单美化,可以完美替代“select”来实现下拉菜单的效果。而且支持多级菜单,有加载等待效果,有层级分类展示。复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "ht...2015-03-15
- 这篇文章主要为大家详细介绍了jquery插件实现悬浮的菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-23
- 这篇文章主要为大家详细介绍了使用jQuery.Pin垂直滚动时固定导航的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-27
- 本文实例讲述了JS实现不使用图片仿Windows右键菜单效果代码。分享给大家供大家参考,具体如下:这里演示JS不使用图片仿Windows右键菜单效果,这款代码灵活使用了文鼎字,配合CSS和JS做出了这个和系统右键菜单很相似的东东。...2015-10-23
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
首先是数据库的设计。分类表叫cate.我做的是分类数据的二级联动,数据需要的字段有:id,name(中文名),pid(父id). 父id的设置: 若数据没有上一级,则父id为0,若有上级,则父id为上一级的id。数据库有内容后,就可以开始写代码,进...2014-05-31- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下来通过本文给大家介绍BootStrap 附加导航组件的知识,感兴趣的朋友一起学习吧...2016-07-29
- 这篇文章主要介绍了jQuery实现的导航下拉菜单效果,涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2016-07-06
- 这篇文章主要介绍了基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载,需要的朋友参考下...2016-01-08
- 这篇文章主要为大家详细介绍了WPF仿三星手机充电界面实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25