本文实例为大家分享了WPF实现半圆形导航菜单的具体代码，供大家参考，具体内容如下
实现效果如下：
思路：
扇形自定义控件组合成半圆型菜单，再通过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&＃63;.Invoke(true);
}
else
{
this.bottomTB.Text = "+";
Storyboard stbHide = (Storyboard)FindResource("stbHide");
stbHide.Begin();
ShowClickEvent&＃63;.Invoke(false);
}
}
3、主窗体调用
窗体布局xaml：
京公网安备 11010802041100号