如何為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 來下載完整的代碼案例。