UWP 圆形菜单

Posted 2020-10-28 猫叔Vincent的后花园

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了UWP 圆形菜单相关的知识，希望对你有一定的参考价值。

用过Surface dial的童鞋们都很熟悉，当使用Dial的时候，那个圆形菜单很漂亮，那么我们在普通的uwp中是否也可以实现吗？

答案是肯定的。

其实这是来源于GayHub的一个开源项目，做的很不错。

https://github.com/CatalystCode/radial-menu

下面就一步一步来操作演示下：

1、新建一个项目，打开Nuget，搜索“RadialMenuControl”

安装最新的即可，或者使用命令行

PM> Install-Package RadialMenuControl

在xaml中引用

    xmlns:userControl="using:RadialMenuControl.UserControl"
    xmlns:component="using:RadialMenuControl.Components"

接下来就可以设计菜单了。

注意在圆形菜单外，加一层 Floating 包裹以下，否则圆形菜单位置是固定的，无法移动。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <userControl:Floating IsBoundByScreen="True">
            <userControl:RadialMenu 
                x:Name="MyRadialMenu"
                InnerNormalColor="GreenYellow"
                InnerHoverColor="Yellow"
                InnerTappedColor="Red"
                InnerReleasedColor="Azure"
                OuterDisabledColor="Orange"
                OuterHoverColor="Red"
                OuterTappedColor="Azure"
                OuterNormalColor="OrangeRed"
                Diameter="300"
                StartAngle="-36"
                CenterButtonForeground="Blue"
                CenterButtonFontSize="30"
                CenterButtonIcon="&#x1f369;">
                <userControl:RadialMenu.Buttons>
                    <component:RadialMenuButton Icon="&#xE80F;" IconFontFamily="Segoe MDL2 Assets" Label="Submenu V" Type="Simple" Tapped="Submenu_Tapped">
                        <component:RadialMenuButton.Submenu>
                            <userControl:RadialMenu x:Name="MyRadialSubmenu">
                                <userControl:RadialMenu.Buttons>
                                    <component:RadialMenuButton Icon="&#xE7F0;" IconFontFamily="Segoe MDL2 Assets" Label="New" Type="Simple"/>
                                    <component:RadialMenuButton Icon="&#xE7EF;" IconFontFamily="Segoe MDL2 Assets" Label="Open" Type="Simple"/>
                                    <component:RadialMenuButton Icon="&#xE8B4;" IconFontFamily="Segoe MDL2 Assets" Label="Save" Type="Simple"/>
                                </userControl:RadialMenu.Buttons>
                            </userControl:RadialMenu>
                        </component:RadialMenuButton.Submenu>
                    </component:RadialMenuButton>
                    <component:RadialMenuButton Icon="&#xE899;" IconFontFamily="Segoe MDL2 Assets" Label="Meter V" Type="Simple"/>
                    <component:RadialMenuButton Icon="&#xE774;" IconFontFamily="Segoe MDL2 Assets" Label="Toggle V" Type="Toggle"/>
                    <component:RadialMenuButton Icon="&#xE77C;" IconFontFamily="Segoe MDL2 Assets" Label="Radio V1" Type="Radio"/>
                    <component:RadialMenuButton Icon="&#xE8B8;" IconFontFamily="Segoe MDL2 Assets" Label="Radio V2" Type="Radio"/>
                </userControl:RadialMenu.Buttons>
            </userControl:RadialMenu>
        </userControl:Floating>
        
    </Grid>