WPF开发者QQ群: 340500857
有小伙伴需要实现圆形菜单。
效果如下:
一、Xaml代码如下
<Window x:Class="WpfRoundMenu.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:WpfRoundMenu"
mc:Ignorable="d"
Title="MainWindow" Height="400" Width="400" ResizeMode="NoResize" Background="{x:Null}"
WindowStartupLocation="CenterScreen" WindowStyle="None" AllowsTransparency="True">
<Window.Resources>
<Style x:Key="ButtonMenu" TargetType="Button">
<Setter Property= "Opacity" Value="0.8"/>
<Setter Property="Cursor" Value ="Hand"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
OpacityMask="{TemplateBinding OpacityMask}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="1"/>
</Trigger>
<Trigger Property="IsEnabled" Value= "False">
<Setter Property="Opacity" Value="0.3"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Grid x:Name="gMenu" MouseDown="gMenu_MouseDown">
<Grid.Background>
<RadialGradientBrush>
<GradientStop Color="White" Offset="0.9"/>
<GradientStop Offset="1"/>
<GradientStop x:Name="ColoCirkle" Color="#7F434343" Offset="0.91"/>
</RadialGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Button x:Name="btn1" Foreground="{x:Null}" BorderBrush="#FF009AD6" Background="#FF716E6E" Style="{StaticResource ButtonMenu}" Grid.ColumnSpan="2" Margin="68,35,66,0" Grid.Column="1" MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave">
<Button.OpacityMask>
<ImageBrush ImageSource="Images/Color.png"/>
</Button.OpacityMask>
</Button>
<Button x:Name="btn2" Foreground="{x:Null}" BorderBrush="#FF007642" Background="#FF6E7170" Style="{StaticResource ButtonMenu}" Margin="0,64,34,67" Grid.Column="3" Grid.Row="1" Grid.RowSpan="2" MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave">
<Button.OpacityMask>
<ImageBrush ImageSource="Images/Eraser.png"/>
</Button.OpacityMask>
</Button>
<Button x:Name="btn3" Foreground="{x:Null}" BorderBrush="#FF656097" Background="#FF716E6E" Style="{StaticResource ButtonMenu}" Margin="68,0,66,46" Grid.Column="1" Grid.Row="3" Grid.ColumnSpan="2" MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave">
<Button.OpacityMask>
<ImageBrush ImageSource="Images/Revoke.png"/>
</Button.OpacityMask>
</Button>
<Button x:Name="btn4" Foreground="{x:Null}" BorderBrush="#FFEE73CC" Background="#FF716E6E" Style="{StaticResource ButtonMenu}" Margin="34,64,0,67" Grid.Row="1" Grid.RowSpan="2" MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave">
<Button.OpacityMask>
<ImageBrush ImageSource="Images/Pen.png"/>
</Button.OpacityMask>
</Button>
<Grid x:Name="gClose" Grid.ColumnSpan="2" Grid.Column="1" Margin="20,21,19,20" Grid.Row="1" Grid.RowSpan="2">
<Grid.Background>
<RadialGradientBrush>
<GradientStop Color="#FFE7E7E7" Offset="0.854"/>
<GradientStop Offset="1"/>
<GradientStop Color="#FFBCBCBC" Offset="0.856"/>
</RadialGradientBrush>
</Grid.Background>
<Button Margin="58,59,59,52" x:Name="btn5" Foreground="{x:Null}" BorderBrush="#FFFF6B6B" Background="#FF716E6E" Style="{StaticResource ButtonMenu}"
MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave">
<Button.OpacityMask>
<ImageBrush ImageSource="Images/Close.png"/>
</Button.OpacityMask>
</Button>
</Grid>
</Grid>
</Grid>
</Window>
二、Xaml.cs代码如下
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
namespace WpfRoundMenu
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
Storyboard storyboard;
ColorAnimation SetAnimButton(Color color,string objName)
{
ColorAnimation anim = new ColorAnimation();
anim.Duration = new Duration(TimeSpan.FromSeconds(0.2));
anim.To = color;
Storyboard.SetTargetName(anim, objName);
Storyboard.SetTargetProperty(anim, new PropertyPath("(Button.Background).(SolidColorBrush.Color)"));
return anim;
}
ColorAnimation SetAnimcirkie(Color color)
{
ColorAnimation anim = new ColorAnimation();
anim.Duration = new Duration(TimeSpan.FromSeconds(0.2));
anim.To = color;
Storyboard.SetTargetName(anim, "ColoCirkle");
Storyboard.SetTargetProperty(anim,new PropertyPath(GradientStop.ColorProperty));
return anim;
}
private void Button_MouseEnter(object sender, MouseEventArgs e)
{
Button btn = (Button)sender;
Color background = ((SolidColorBrush)btn.BorderBrush).Color;
storyboard = new Storyboard();
storyboard.Children.Add(SetAnimButton(background,btn.Name));
storyboard.Children.Add(SetAnimcirkie(background));
storyboard.Begin(this);
}
private void Button_MouseLeave(object sender, MouseEventArgs e)
{
Button btn = (Button)sender;
storyboard = new Storyboard();
storyboard.Children.Add(SetAnimButton(Color.FromRgb(113, 110, 110),btn.Name));
storyboard.Children.Add(SetAnimcirkie(Color.FromArgb(150, 67,67,67)));
storyboard.Begin(this);
}
private void gMenu_MouseDown(object sender, MouseButtonEventArgs e)
{
DragMove();
}
}
}
WPF开发者QQ群: 340500857
blogs: https://www.cnblogs.com/yanjinhua
Github:https://github.com/yanjinhuagood
出处:https://www.cnblogs.com/yanjinhua
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
转载请著名作者 出处 https://github.com/yanjinhuagood