WPF实现半圆形导航菜单

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

实现效果如下:

WPF实现半圆形导航菜单_第1张图片

思路:

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

步骤:

1、扇形自定义控件CircularSectorControl

窗体布局xaml:


    
    
      
        
      
    

交互逻辑:

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:


    
      
      
    
    
      
      
    
  
  
    
      
      
        
          
        
      
      
        
          
        
      
      
        
          
        
      
    
    
      
        
      
    
    
      
      
    

交互逻辑:

//委托
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:


  
    
  

交互逻辑:

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实现半圆形导航菜单)