WPF实现半圆形导航菜单

更新时间：2020年08月28日 14:33:01 作者：RunnerDNA

这篇文章主要为大家详细介绍了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));
}

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

您可能感兴趣的文章:

Unity中使用反射机制调用函数
这篇文章主要为大家详细介绍了Unity中使用反射机制调用函数，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
深入学习C#网络编程之HTTP应用编程（上）
这篇文章主要介绍了如何学习C#网络编程之HTTP应用编程的相关知识，文中讲解的非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-06-06
c# 获取字符串的字节数的方法
本篇文章主要是对c#中获取字符串的字节数的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
C#中WebBroeser控件用法实例教程
这篇文章主要介绍了C#中WebBroeser控件用法,包括了常用属性、事件处理及应用实例,需要的朋友可以参考下
2014-09-09
C#中截取字符串的的基本方法详解
这篇文章主要介绍了C#中截取字符串的的基本方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
C# GDI在控件上绘图的方法
这篇文章主要介绍了C# GDI在控件上绘图的方法,包括了常见的鼠标事件及绘图操作,需要的朋友可以参考下
2014-09-09
C#中的类继承详解
大家好，本篇文章主要讲的是C#中的类继承详解，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下
2022-02-02
C#在新建线程中使用Timer无效问题及解决
这篇文章主要介绍了C#在新建线程中使用Timer无效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
C#画圆角矩形的方法
这篇文章主要介绍了C#画圆角矩形的方法,涉及C#绘图的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-05-05
c#程序定期把内存信息记录到log日志示例
这篇文章主要介绍了c#程序定期把内存信息记录到log日志示例,需要的朋友可以参考下
2014-04-04

WPF实现半圆形导航菜单

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具