码迷,mamicode.com
首页 > 其他好文 > 详细

UWP 圆形菜单

时间:2018-03-22 22:42:44      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:需要   ase   use   代码   azure   catalyst   dial   https   hup   

用过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>

 

那个StartAngle可以不设置,也可以根据实际情况调节。

 

CenterButtonIcon  这个图标还没弄明白需要什么字体,我用“http://modernicons.io/segoe-mdl2/cheatsheet/” 不起作用的。

 

component:RadialMenuButton

这个类型可以指定她的Type,Simple就是原始的,Toggle就是和开关一样的,Radio就是单选咯,Custom自定义。

 

 

其他的也没啥好说的,可以自己看xaml代码即可

下面是我的效果截图

技术分享图片

技术分享图片

 

 

 技术分享图片

 

 

我做的示例代码:

 

https://github.com/hupo376787/RadialMenu

UWP 圆形菜单

标签:需要   ase   use   代码   azure   catalyst   dial   https   hup   

原文地址:https://www.cnblogs.com/hupo376787/p/8621067.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!