WPF實現(xiàn)環(huán)(圓)形菜單的示例代碼
更新時間：2022年07月29日 16:52:32 作者：驚鏵
這篇文章主要介紹了如何利用WPF繪制一個簡單的環(huán)形菜單，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)或工作有一定幫助，需要的可以參考一下
前言
需要實現(xiàn)環(huán)（圓）形菜單。
效果預(yù)覽（更多效果請下載源碼體驗）：
實現(xiàn)代碼
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="關(guān)閉"/>
<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開發(fā)者" 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="關(guān)閉"/>
<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開發(fā)者" FontSize="40"
Foreground="#A9CC32" FontWeight="Bold"
Canvas.Top="50"/>
<Image Source="Images/gzh.png" Canvas.Left="140" Canvas.Bottom="40"/>
</Canvas>
</Grid>
</Viewbox>
</Window>到此這篇關(guān)于WPF實現(xiàn)環(huán)(圓)形菜單的示例代碼的文章就介紹到這了,更多相關(guān)WPF菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
C#的優(yōu)勢在于window下的開發(fā)，不僅功能強大而且開發(fā)周期短。而python則有眾多的第三方庫，可以避免自己造輪子，利用C#來做界面，而具體實現(xiàn)使用python來實現(xiàn)可以大大提高開發(fā)效率。本文介紹如何使用pythonnet來執(zhí)行python腳本，希望對大家有所幫助2023-03-03
這篇文章主要介紹了C# 多線程編程技術(shù)基礎(chǔ)知識，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2020-02-02
今天小編就為大家分享一篇關(guān)于string與stringbuilder兩者的區(qū)別，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
C# 兩種方式反編譯修改源碼（dnspy,ildasm & ilasm）
這篇文章主要介紹了C# 兩種方式反編譯修改源碼（dnspy,ildasm & ilasm），幫助大家更好的理解和使用c#語言，感興趣的朋友可以了解下2020-11-11
這篇文章主要給大家介紹了C#9新特性的實際運用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了如何使用C# 捕獲進程輸出，幫助大家更好的理解和使用c#,感興趣的朋友可以了解下2020-08-08
C#使用反射（Reflect）獲取dll文件中的類型并調(diào)用方法
這篇文章主要為大家詳細(xì)介紹了C#使用反射（Reflect）獲取dll文件中的類型并調(diào)用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了c#系列 list，list 本質(zhì)是一個數(shù)組，。就跟我們操作系統(tǒng)一樣，提前申請內(nèi)存大小。所以我們程序一般都有一個申請內(nèi)存，實際使用內(nèi)存，內(nèi)存碎片這幾個概念，下面?zhèn)z看文章詳細(xì)內(nèi)容吧2021-10-10
這篇文章主要介紹了c#判斷代碼是否執(zhí)行超時的幾種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了關(guān)于for循環(huán)的經(jīng)典案例，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05