Pou's IT Life

Surface Dial 支援 press 與hold, click, rotate 三種手勢：

• press 與 hold： 負責呈現該 App 或系統預設有支援 commands 的 menu。預設 menu 出現在畫面的中間或是 Dial 擺放在 screen 上的位置，可以隨意移動。出現 menu 的時候，轉動 Dial 可以切換可選用的 command，而 click 的動作代表選擇那個 command。
• rotate： Dial 被設計提供旋轉操作方式來選擇 command 或是調整 command 中的互動。
• click： 代表選擇 menu 中的項目或是 App 自定義的項目。也是模擬 left mouse button。

顯示的方式根據 Surface Dial 是否有放在 screen 上有不同的顯示方式，參考如下：

系統預設提供的 commands 有：system volume, scroll, zoom in/out, and undo/redo，在 Desktop 上還可以控制 system brightness；在播放音樂的話預設是 previous 與 next 。 更可以整合 Windows Ink Platform 的 controls (InkCanvas 與 InkToolbar)，詳細的説明可以參考<Surface Dial interactions>。 搭配 RadiaController 開發 App 專屬的 Dial commends menu。

• RadiaController

代表一個專門的輸入設備或配件。重要的屬性跟事件如下：

[範例程式] 利用 Dial 控制圖片的透明程度。 1. XAML 裏面放入一個 Slider 跟 Image 分別顯示 Dial 調整的幅度跟圖片結果。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Margin="10,5">
         <Slider x:Name="SliderOpacity" Minimum="0" Maximum="100" Header="Opacity" Margin="0,10" Value="100" />
    </StackPanel>
    <Image Grid.Row="1" x:Name="ImageControl" Source="ms-appx:///Assets/sample.jpg" Stretch="UniformToFill" />
</Grid>

2. 取得 RadialController 並加入一個專用的 item 。

RadialController dialController;

private void CreateDialControllerMenu()
{
    dialController = RadialController.CreateForCurrentView();

    // 建立一個 icon 給 menu item 使用
    RandomAccessStreamReference icon =
  RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/StoreLogo.png"));

    // 建立 menu item 并且設定 icon 跟 display text
    RadialControllerMenuItem opacityItem = RadialControllerMenuItem.CreateFromIcon("Opacity", icon);
    opacityItem.Invoked += MenuItem_Invoked;

    // 將 menu item 加入到 RadialController menu
    dialController.Menu.Items.Add(opacityItem); 

    // 處理 RotationChanged 的事件
    dialController.ButtonClicked += Controller_ButtonClicked;
    dialController.RotationChanged += Controller_RotationChanged;
}

如果加入多個 item 的話，在建立 RadialControllerMenuItem 時加入 Invoke 事件捕捉目前用戶使用的是哪一個 item。 3. 處理 RotationChanged 調整圖片的透明度

private void Controller_RotationChanged(RadialController sender, RadialControllerRotationChangedEventArgs args)
{
    // 更新 Slider 的 value 與調整 Image 的透明度
    SliderOpacity.Value += args.RotationDeltaInDegrees;
    ImageControl.Opacity = SliderOpacity.Value / 100;
}

這裏要注意，dial 預設的 RotationDeltaInDegrees 是 10 (往右轉(+10)；往左轉(-10))。 [補充]

• 如果想調整預設 Dial 的 commands, 可以到 Windows Settings -> Devices -> Wheel page, 如下圖：

• 自定義 App 支援 Dial 的行為有幾個 guide 需要注意：

1. 1. Ensure your tools correspond to the current context
   2. Minimize the number of app tools as much as possible 把重點功能提供在 Dial 上面讓用戶在對象上可以快速使用功能，或是提供讓用戶可以自訂的選項。
   3. Dynamically update the collection of tools 因爲 Dial menu items 不支援 disable state，所以建議根據目前 user 在的内容上動態加入或移除 tools (including built-in, default tools)。加入項目時要自己確認是否已經有存在的項目以免重複。
   4. Don’t remove the built-in system volume setting tool volume control 是 always user 需要的，因為可能同時聼音樂邊使用你的 App，所以不要拿掉 volume control 與 next track control (next track control 由系統發現有在 media 正在播放就會加入)
   5. Be consistent with menu organization
   6. Provide high-quality icons consistent with the built-in icons提供高畫質的 64x46 pixel PNG image (44x44 是最小需求) 確定背景色要是透明
      一個白色的圖示應該有一個黑色的輪廓，可見在高對比模式下
   7. Use concise and descriptive names
   8. Apps should respond when the Surface Dial is detected on-screen

• RadialControllerConfiguration 負責設定詳細的 RadialController Menu，例如：加入 menu item 或是清除。 有一個特別的 event: TrySelectDefaultMenuItem 可直接由 code 的方式選擇到 menu 裏面的項目。
• RadialControllerMenuItem 代表在 menu 裏面的一個 single custom tool 。

====== 新的設備如果有機會購買到的話，快來試看看吧！希望對大家有所幫助。謝謝。 References：

• Surface Dial interactions
• RadialController class
• Using the Surface Dial as a debug tool
• 新式應用程式 - 在 UWP 中運用音訊
• Audio graphs