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