WPF实现半圆形导航菜单实现半圆形导航菜单
主要为大家详细介绍了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">
评论0