脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → C#教程 → WPF菜单

WPF实现环(圆)形菜单的示例代码

 更新时间：2022年07月29日 16:52:32   作者：驚鏵  
这篇文章主要介绍了如何利用WPF绘制一个简单的环形菜单，文中的示例代码讲解详细，对我们学习或工作有一定帮助，需要的可以参考一下

前言 

需要实现环（圆）形菜单。

效果预览（更多效果请下载源码体验）：

实现代码

1.CircularMenuItemCustomControl.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;

namespace WpfCircularMenu
{

    [TemplatePart(Name = RotateTransformTemplateName, Type = typeof(RotateTransform))]
    public class CircularMenuItemCustomControl : Control
    {
        private static readonly Type _typeofSelf = typeof(CircularMenuItemCustomControl);
        private const string RotateTransformTemplateName = "PART_RotateTransform";
        private RotateTransform _angleRotateTransform;
        public double Angle
        {
            get { return (double)GetValue(AngleProperty); }
            set { SetValue(AngleProperty, value); }
        }

        public static readonly DependencyProperty AngleProperty =
            DependencyProperty.Register("Angle", typeof(double), typeof(CircularMenuItemCustomControl), new UIPropertyMetadata(OnAngleChanged));

        private static void OnAngleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            CircularMenuItemCustomControl control = (CircularMenuItemCustomControl)d;
            control.UpdateAngle();
        }
        void UpdateAngle()
        {
            if (_angleRotateTransform == null) return;
            _angleRotateTransform.Angle = Angle;
        }
        public string MenuTxt
        {
            get { return (string)GetValue(MenuTxtProperty); }
            set { SetValue(MenuTxtProperty, value); }
        }

        public static readonly DependencyProperty MenuTxtProperty =
            DependencyProperty.Register("MenuTxt", typeof(string), typeof(CircularMenuItemCustomControl), new PropertyMetadata(string.Empty));



        public Brush BackgroundColor
        {
            get { return (Brush)GetValue(BackgroundColorProperty); }
            set { SetValue(BackgroundColorProperty, value); }
        }
        public static readonly DependencyProperty BackgroundColorProperty =
           DependencyProperty.Register("BackgroundColor", typeof(Brush), typeof(CircularMenuItemCustomControl), new PropertyMetadata(null));

        public ImageSource IconImage
        {
            get { return (ImageSource)GetValue(IconImageProperty); }
            set { SetValue(IconImageProperty, value); }
        }
        public static readonly DependencyProperty IconImageProperty = 
            DependencyProperty.Register("IconImage", typeof(ImageSource), typeof(CircularMenuItemCustomControl), new PropertyMetadata(null));
       
        static CircularMenuItemCustomControl()
        {
            DefaultStyleKeyProperty.OverrideMetadata(_typeofSelf, new FrameworkPropertyMetadata(_typeofSelf));
        }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            _angleRotateTransform = GetTemplateChild(RotateTransformTemplateName) as RotateTransform;
            UpdateAngle();
        }
       

    }
}

2.CircularMenuItemCustomControlStyle.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfCircularMenu">
    <Style TargetType="{x:Type local:CircularMenuItemCustomControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:CircularMenuItemCustomControl">
                    <Grid VerticalAlignment="Center">
                        <Grid.RenderTransform>
                            <RotateTransform x:Name="PART_RotateTransform" Angle="{TemplateBinding Angle}" CenterX="200" CenterY="200"></RotateTransform>
                        </Grid.RenderTransform>
                        <Path x:Name="PART_Path" Data="M 200,200 0,200 A 200,200 0 0 1 58.6,58.6z" 
                                  Fill="{TemplateBinding BackgroundColor}" VerticalAlignment="Center"/>
                        <Image Source="{TemplateBinding IconImage}" RenderTransformOrigin="0.5,0.5"
                                   Margin="60,70,0,0" 
                                   HorizontalAlignment="Left" 
                                   VerticalAlignment="Center" 
                                   Width="40" Height="40" >
                            <Image.RenderTransform>
                                <RotateTransform Angle="-70"/>
                            </Image.RenderTransform>
                        </Image>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="PART_Path" Property="Fill" Value="#009AD8"/>
                            <Setter Property="Cursor" Value="Hand"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>
</ResourceDictionary>

3.MainWindow.xaml

<Window x:Class="WpfCircularMenu.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:WpfCircularMenu"
        mc:Ignorable="d"
        Title="MainWindow" Height="850" Width="1200"
        Background="Black"
        SnapsToDevicePixels="True" 
        TextOptions.TextFormattingMode="Display" 
        UseLayoutRounding="True">
    <Window.Resources>
        <Storyboard x:Key="CheckedStoryboard">
            <DoubleAnimation Storyboard.TargetName="PART_EllipseGeometry"
                             Storyboard.TargetProperty="RadiusX"
                             Duration="00:00:0.4" To="200"/>
            <DoubleAnimation Storyboard.TargetName="PART_EllipseGeometry"
                             Storyboard.TargetProperty="RadiusY"
                             Duration="00:00:0.4" To="200"/>
        </Storyboard>
        <Storyboard x:Key="UncheckedStoryboard">
            <DoubleAnimation Storyboard.TargetName="PART_EllipseGeometry"
                             Storyboard.TargetProperty="RadiusX"
                             Duration="00:00:0.3" To="0"/>
            <DoubleAnimation Storyboard.TargetName="PART_EllipseGeometry"
                             Storyboard.TargetProperty="RadiusY"
                             Duration="00:00:0.3" To="0"/>
        </Storyboard>
    </Window.Resources>
    <Viewbox>
        <Grid Height="768" Width="1024">
            <Canvas>
                <ItemsControl ItemsSource="{Binding MenuArray,RelativeSource={RelativeSource AncestorType=local:MainWindow}}"
                              Canvas.Left="150" Canvas.Top="150">
                    <ItemsControl.Clip>
                        <EllipseGeometry x:Name="PART_EllipseGeometry" RadiusX="0" RadiusY="0" Center="200,200"></EllipseGeometry>
                    </ItemsControl.Clip>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <local:CircularMenuItemCustomControl Angle="{Binding Angle}" MenuTxt="{Binding Title}" 
                                                              BackgroundColor="{Binding FillColor}" IconImage="{Binding IconImage}"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Grid/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
               
                <ToggleButton Canvas.Left="300" Canvas.Top="300" Cursor="Hand">
                    <ToggleButton.Template>
                        <ControlTemplate TargetType="ToggleButton">
                            <Grid>
                                <Ellipse x:Name="PART_Ellipse" Width="100" Height="100" Fill="#009AD8" ToolTip="关闭"/>
                                <Path x:Name="PART_Path" Data="M734.618 760.269c-24.013 24.013-62.925 24.013-86.886 0l-135.731-155.136-135.731 155.085c-24.013 24.013-62.925 24.013-86.886 0-24.013-24.013-24.013-62.925 0-86.886l141.21-161.28-141.261-161.382c-24.013-24.013-24.013-62.874 0-86.886s62.874-24.013 86.886 0l135.782 155.187 135.731-155.187c24.013-24.013 62.874-24.013 86.886 0s24.013 62.925 0 86.886l-141.21 161.382 141.21 161.28c24.013 24.013 24.013 62.925 0 86.938z"
                                      Fill="White" Stretch="Fill" Width="20" Height="20" RenderTransformOrigin="0.5,0.5" IsHitTestVisible="False">
                                </Path>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="false">
                                    <Setter TargetName="PART_Path" Property="RenderTransform">
                                        <Setter.Value>
                                            <RotateTransform Angle="45"/>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="ToolTip" TargetName="PART_Ellipse" Value="展开"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </ToggleButton.Template>
                    <ToggleButton.Triggers>
                        <EventTrigger RoutedEvent="ToggleButton.Checked">
                            <BeginStoryboard Storyboard="{StaticResource CheckedStoryboard}"/>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                            <BeginStoryboard Storyboard="{StaticResource UncheckedStoryboard}"/>
                        </EventTrigger>
                    </ToggleButton.Triggers>
                </ToggleButton>
                <TextBlock Text="微信公众号：WPF开发者" FontSize="40"
                           Foreground="#A9CC32" FontWeight="Bold"
                           Canvas.Top="50"/>
                <Image Source="Images/gzh.png" Canvas.Left="140" Canvas.Bottom="40"/>
            </Canvas>
        </Grid>
    </Viewbox>
</Window>

4.MainWindow.xaml.cs

<Window x:Class="WpfCircularMenu.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:WpfCircularMenu"
        mc:Ignorable="d"
        Title="MainWindow" Height="850" Width="1200"
        Background="Black"
        SnapsToDevicePixels="True" 
        TextOptions.TextFormattingMode="Display" 
        UseLayoutRounding="True">
    <Window.Resources>
        <Storyboard x:Key="CheckedStoryboard">
            <DoubleAnimation Storyboard.TargetName="PART_EllipseGeometry"
                             Storyboard.TargetProperty="RadiusX"
                             Duration="00:00:0.4" To="200"/>
            <DoubleAnimation Storyboard.TargetName="PART_EllipseGeometry"
                             Storyboard.TargetProperty="RadiusY"
                             Duration="00:00:0.4" To="200"/>
        </Storyboard>
        <Storyboard x:Key="UncheckedStoryboard">
            <DoubleAnimation Storyboard.TargetName="PART_EllipseGeometry"
                             Storyboard.TargetProperty="RadiusX"
                             Duration="00:00:0.3" To="0"/>
            <DoubleAnimation Storyboard.TargetName="PART_EllipseGeometry"
                             Storyboard.TargetProperty="RadiusY"
                             Duration="00:00:0.3" To="0"/>
        </Storyboard>
    </Window.Resources>
    <Viewbox>
        <Grid Height="768" Width="1024">
            <Canvas>
                <ItemsControl ItemsSource="{Binding MenuArray,RelativeSource={RelativeSource AncestorType=local:MainWindow}}"
                              Canvas.Left="150" Canvas.Top="150">
                    <ItemsControl.Clip>
                        <EllipseGeometry x:Name="PART_EllipseGeometry" RadiusX="0" RadiusY="0" Center="200,200"></EllipseGeometry>
                    </ItemsControl.Clip>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <local:CircularMenuItemCustomControl Angle="{Binding Angle}" MenuTxt="{Binding Title}" 
                                                              BackgroundColor="{Binding FillColor}" IconImage="{Binding IconImage}"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Grid/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
               
                <ToggleButton Canvas.Left="300" Canvas.Top="300" Cursor="Hand">
                    <ToggleButton.Template>
                        <ControlTemplate TargetType="ToggleButton">
                            <Grid>
                                <Ellipse x:Name="PART_Ellipse" Width="100" Height="100" Fill="#009AD8" ToolTip="关闭"/>
                                <Path x:Name="PART_Path" Data="M734.618 760.269c-24.013 24.013-62.925 24.013-86.886 0l-135.731-155.136-135.731 155.085c-24.013 24.013-62.925 24.013-86.886 0-24.013-24.013-24.013-62.925 0-86.886l141.21-161.28-141.261-161.382c-24.013-24.013-24.013-62.874 0-86.886s62.874-24.013 86.886 0l135.782 155.187 135.731-155.187c24.013-24.013 62.874-24.013 86.886 0s24.013 62.925 0 86.886l-141.21 161.382 141.21 161.28c24.013 24.013 24.013 62.925 0 86.938z"
                                      Fill="White" Stretch="Fill" Width="20" Height="20" RenderTransformOrigin="0.5,0.5" IsHitTestVisible="False">
                                </Path>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="false">
                                    <Setter TargetName="PART_Path" Property="RenderTransform">
                                        <Setter.Value>
                                            <RotateTransform Angle="45"/>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="ToolTip" TargetName="PART_Ellipse" Value="展开"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </ToggleButton.Template>
                    <ToggleButton.Triggers>
                        <EventTrigger RoutedEvent="ToggleButton.Checked">
                            <BeginStoryboard Storyboard="{StaticResource CheckedStoryboard}"/>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                            <BeginStoryboard Storyboard="{StaticResource UncheckedStoryboard}"/>
                        </EventTrigger>
                    </ToggleButton.Triggers>
                </ToggleButton>
                <TextBlock Text="微信公众号：WPF开发者" FontSize="40"
                           Foreground="#A9CC32" FontWeight="Bold"
                           Canvas.Top="50"/>
                <Image Source="Images/gzh.png" Canvas.Left="140" Canvas.Bottom="40"/>
            </Canvas>
        </Grid>
    </Viewbox>
</Window>

到此这篇关于WPF实现环(圆)形菜单的示例代码的文章就介绍到这了,更多相关WPF菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 一文探索C#中实现双向链表的方法

    一文探索C#中实现双向链表的方法

    这篇文章主要为大家详细介绍了C#中的双向链表的实现,揭秘双向链表内实现诸多方法的那些事,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • C# 利用Selenium实现浏览器自动化操作的示例代码

    C# 利用Selenium实现浏览器自动化操作的示例代码

    这篇文章主要介绍了C# 利用Selenium实现浏览器自动化操作，帮助大家更好的理解和使用c#，感兴趣的朋友可以了解下
    2020-09-09
  • C#先判断是否存在再创建文件夹或文件与递归计算文件夹大小

    C#先判断是否存在再创建文件夹或文件与递归计算文件夹大小

    这篇文章介绍了C#先判断是否存在再创建文件夹或文件与递归计算文件夹大小的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-07-07
  • C#中SequenceEqual的具体使用

    C#中SequenceEqual的具体使用

    SequenceEqual是LINQ扩展方法之一,用于比较两个序列（如数组、列表等）的元素是否相等,本文就来介绍一下SequenceEqual的具体使用,感兴趣的可以了解一下
    2024-01-01
  • C# 创建EXCEL图表并保存为图片的实例

    C# 创建EXCEL图表并保存为图片的实例

    下面小编就为大家分享一篇C# 创建EXCEL图表并保存为图片的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • C#为控件添加自定义事件及自定义触发

    C#为控件添加自定义事件及自定义触发

    C#本身提供了很强大的控件库，但是很多控件库的功能只是一些基本的功能，本文主要介绍了C#为控件添加自定义事件及自定义触发，具有一定的参考价值，感兴趣的可以了解一下
    2022-04-04
  • C#使用CancellationTokenSource 取消 Task的方法

    C#使用CancellationTokenSource 取消 Task的方法

    因为涉及到了日常经常会碰到的取消任务操作，本文主要介绍了C#使用CancellationTokenSource 取消 Task，文中通过代码介绍的非常详细，感兴趣的可以了解一下
    2022-02-02
  • 使用C#判断文件是否为图片的多种方法

    使用C#判断文件是否为图片的多种方法

    在开发中,我们常需要判断一个文件是否为图片,这看似简单,但要实现得既高效又严谨,需要根据不同场景选择合适的方法,本文记录了几种常见的判断方式,并推荐使用 SixLabors.ImageSharp 来替代已被淘汰的 System.Drawing,需要的朋友可以参考下
    2024-10-10
  • 详解C#如何自定义书写中间件

    详解C#如何自定义书写中间件

    中间件是一种装配到应用管道以处理请求和响应的软件，是介于request与response处理过程之间的一个插件，本文主要介绍了如何自定义书写中间件，需要的可以参考下
    2023-08-08
  • C# winform实现多语言切换功能

    C# winform实现多语言切换功能

    这篇文章主要为大家详细介绍了如何使用C# winform实现多语言切换功能,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解下
    2024-02-02

最新评论