WPF实现实现圆形菜单

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