首页 > 代码库 > 如何为Surface Dial设备开发自定义交互功能

如何为Surface Dial设备开发自定义交互功能

随着Surface Studio的发布,微软发布了与之相配套的外设硬件Surface Dial,用户可以将Surface Dail吸附在Surface Studio的屏幕上面,用旋转和点击的实体操作来操作应用程序。

技术分享

 

目前Surface Dial 可以支持的终端硬件有三款:

  • Surface Studio
  • Surface Book
  • Surface Pro 4

有上述之一硬件的小伙伴们可以尝试一下这款新鲜的产品。

 

下面,我用一款简单的UWP程序来介绍如何给Surface Dial这款外设开发自定义的交互逻辑。

 

前期准备:

  • 请确保您的计算机操作系统是最新的Win10 Anniversary Update版本
  • 请确保您的Visual Studio是VS2015 update3 版本
  • Surface Dial设备(可选)
  • Surface Studio, Surface Book 以及 Surface Pro 4 都是可选项,如果没有,并不影响案例代码的运行

 

运行例子:

如果您有surface dial设备,并且拥有Surface Studio, Surface Book或者Surface Pro4其中的任一一款终端,请在Visual Studio里面运行我们的案例代码,并且将Surface Dail吸附在屏幕上。您将会看到下面这个界面。

技术分享

此时,您可以选择Surface Dial,界面中的滑动条会跟着您的转动而变化,点击Surface Dial的按钮,界面中的开关控件会打开或者关闭。

 

使用代码:

您可以使用代码去自定义Surface Dail在您的应用程序里的旋转和点击操作。

控制Surface Dail的核心类是RadialController ,可以在Windows.UI.Input这个名字空间下找到该类。您可以调用RadialController.CreateForCurrentView() 来获取该类的实体。

 

RadialController类实体对外公布了几个事件,在这个例子里我们只关注ButtonClicked 事件和 RotationChanged事件。前者会在Surface Dail被点击的时候调用,而后者则是响应旋转操作。

 

下面是例子里的核心代码片段:

    public sealed partial class MainPage : Page 
    { 
        RadialController rdController = null; 
        public MainPage() 
        { 
            this.InitializeComponent(); 
 
            // get controller 
            rdController = RadialController.CreateForCurrentView(); 
 
            // process click event 
            rdController.ButtonClicked += RdController_ButtonClicked; 
 
            // process rotate event 
            rdController.RotationChanged += RdController_RotationChanged; 
        } 
 
        private void RdController_RotationChanged(RadialController sender, RadialControllerRotationChangedEventArgs args) 
        { 
            // change the slider according to the delta degree from rotating 
            var deltaRatio = args.RotationDeltaInDegrees / 360.0f; 
            this.slider.Value += this.slider.Maximum * deltaRatio; 
        } 
 
        private void RdController_ButtonClicked(RadialController sender, RadialControllerButtonClickedEventArgs args) 
        { 
            // switch the toggle to opposite status 
            this.btnToggle.IsOn = !this.btnToggle.IsOn; 
        } 
    }

 

最后,您可以通过访问 How to implement custom interactions for Surface Dial 来下载完整的代码案例。

 

如何为Surface Dial设备开发自定义交互功能