表面撥號互動

Surface Dial 與 Surface Studio 的圖片
Surface Dial 搭配 Surface Studio 與 Pen （可在 Microsoft Store 購買）。

概觀

Windows 滾輪裝置，例如 Surface Dial，是一類新的輸入裝置，為 Windows 及 Windows 應用程式帶來一系列引人入勝且獨特的使用者互動體驗。

這很重要

本主題中，我們特別指的是 Surface Dial 的互動，但相關資訊適用於所有 Windows 滾輪裝置。

表面表盤的外型基於旋轉動作（或手勢），設計為輔助多模態輸入裝置，輔助主要裝置的輸入。在大多數情況下，使用者在執行任務時（例如用筆書寫），會由非慣用手操作裝置。它並非設計用於精確的指標輸入（如觸控、筆或滑鼠）。

Surface Dial同時支援按住動作和點擊動作。按住只有一個功能：顯示指令選單。如果選單是啟用狀態，旋轉和點擊的輸入會由選單處理。否則，輸入會被傳送到你的應用程式進行處理。

和所有 Windows 輸入裝置一樣，你可以自訂並調整 Surface Dial 的互動體驗，以符合你應用程式的功能。

小提示

Surface Dial 與新版 Surface Studio 一起使用，能帶來更具特色的使用者體驗。

除了預設的長按選單體驗外，Surface Dial也可以直接放置在Surface Studio的螢幕上。這讓一個特殊的「螢幕上」選單得以實現。

系統透過偵測 Surface Dial 的接觸點位置與範圍，利用這些資訊處理裝置的遮蔽，並顯示一個環繞 Dial 外部的更大版本選單。同樣的資訊也可以被你的應用程式用來調整使用者介面，以配合裝置的存在以及預期的使用方式，例如使用者的手和手臂位置。

Surface Dial 離屏功能選單

Surface Dial 螢幕選單

系統整合

Surface Dial與Windows緊密整合，並支援選單內建工具：系統音量、捲動、放大縮小及復原/重做。

這組內建工具會根據當前系統情境調整，包括：

使用者在 Windows 桌面時的系統亮度調整工具
媒體播放時的上一/下一音軌功能

除了這些一般平台支援外，Surface Dial 也與 Windows Ink 平台控制項（InkCanvas 和 InkToolbar）緊密整合。

Surface Dial與Surface Pen

當這些控制項與 Surface Dial 一起使用時，還能提供修改墨水屬性及控制墨水工具列尺模板的額外功能。

當你在使用墨水工具列的繪圖應用程式中開啟 Surface Dial 選單時，選單現在包含控制筆型和筆刷厚度的工具。啟用尺子後，選單中會新增一個對應工具，讓裝置控制尺子的位置與角度。

Surface Dial 選單，配有 Windows Ink 工具列的選擇筆工具

搭載筆劃大小工具的 Windows Ink 工具列之 Surface Dial 選單

Surface Dial選單搭配 Windows Ink 工具列的尺子工具

使用者自定義

使用者可透過 Windows 設定 -> 裝置 -> 滾輪 頁面自訂撥號體驗的部分面向，包括預設工具、震動（或觸覺回饋）及書寫（或慣用手）操作。

在自訂 Surface Dial 使用者體驗時，應確保特定功能或行為已可供使用者啟用。

自訂工具

在此，我們討論 UX 與開發者在 Surface Dial 選單中自訂工具的指引。

自訂工具的使用者體驗指引

確保你的工具符合當前情境 當你清楚且直覺地說明工具的功能以及 Surface Dial 互動如何運作時，你能幫助使用者快速學習並專注於任務。

盡量減少應用程式工具的數量
Surface Dial選單可容納七項。若有八項或以上，使用者需要轉動旋鈕來查看溢出選單中可用的工具，這使得選單難以瀏覽，工具不容易發現和選擇。

我們建議為你的應用程式或應用程式情境提供單一的客製化工具。這樣你就能根據使用者的操作設定該工具，而不必啟用 Surface Dial 選單並選擇工具。

動態更新工具集合
由於 Surface Dial 選單項目不支援停用狀態，你應該根據使用者情境（當前檢視或焦點視窗）動態新增或移除工具（包括內建的預設工具）。如果某個工具與目前活動無關或是多餘，就移除它。

這很重要

當你將項目加入選單時，請確保該項目尚未存在。

不要移除內建的系統音量設定工具
音量控制通常是使用者必須的。他們可能在使用 App 時聽音樂，所以音量和下一首歌的工具應該都能從 Surface Dial 選單中存取。（當媒體播放時，下一個軌道工具會自動加入選單。）

菜單組織要保持一致
這有助於使用者在使用應用程式時發現並學習可用的工具，並提升切換工具時的效率。

提供與內建圖示一致的高品質圖示
圖示能傳達專業與卓越，並激發使用者的信任。

提供高品質的 64 x 64 像素 PNG 影像（44 x 44 為最小支援尺寸）
確保背景是透明的
圖示應該會佔滿大部分圖片
白色圖示應該有黑色邊框，才能在高對比模式下清楚看見

帶有 alpha 背景的圖示

圖示顯示在輪盤選單上，搭配預設主題

圖示顯示於圓盤選單上，採用高對比白主題

使用簡潔且具描述性的名稱
工具名稱會與工具圖示一同顯示在工具選單中，螢幕閱讀器也會使用。

名稱應該保持簡短，以便放入輪盤選單中央的圓圈內。
名稱應明確標示主要行動（可隱含互補行動）：
- 滾動展示兩個旋轉方向的效果
- 復原指定主要動作，但重做（互補動作）可被推斷並被使用者輕易發現

開發人員指導方針

您可以透過完整的 Windows 執行環境 API 套件，客製化 Surface Dial 體驗，以補充應用程式的功能。

如前所述，預設的 Surface Dial 選單預先填入一組內建工具，涵蓋廣泛的基本系統功能（系統音量、系統亮度、捲動、縮放、復原，以及當系統偵測到持續播放音訊或影片時的媒體控制）。然而，這些預設工具可能無法提供你應用程式所需的功能。

在接下來的章節中，我們將說明如何在 Surface Dial 選單中新增自訂工具，並指定哪些內建工具會被公開使用。

從 RadialController 自訂下載更完整的範例版本。

新增自訂工具

在這個範例中，我們加入了一個基本的自訂工具，可以將旋轉事件和點擊事件的輸入資料傳遞給某些 XAML UI 控制項。

首先，我們在 XAML 中宣告我們的 UI（只有滑桿和切換按鈕）。

Radial 控制器範例截圖，水平滑桿設在左側。
範例應用程式介面

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <StackPanel x:Name="HeaderPanel" 
    Orientation="Horizontal" 
    Grid.Row="0">
      <TextBlock x:Name="Header"
        Text="RadialController customization sample"
        VerticalAlignment="Center"
        Style="{ThemeResource HeaderTextBlockStyle}"
        Margin="10,0,0,0" />
  </StackPanel>
  <StackPanel Orientation="Vertical" 
    VerticalAlignment="Center" 
    HorizontalAlignment="Center"
    Grid.Row="1">
      <!-- Slider for rotation input -->
      <Slider x:Name="RotationSlider"
        Width="300"
        HorizontalAlignment="Left"/>
      <!-- Switch for click input -->
      <ToggleSwitch x:Name="ButtonToggle"
        HorizontalAlignment="Left"/>
  </StackPanel>
</Grid>

接著，在程式碼後置中，我們在 Surface Dial 選單中新增一個自訂工具，並定義 RadialController 輸入處理器。

我們透過呼叫 CreateForCurrentView 取得 Surface Dial（myController）的 RadialController 物件參考。

接著，我們透過呼叫 RadialControllerMenuItem.CreateFromIcon 來建立一個 RadialControllerMenuItem （myItem）實例。

接著，我們將該項目附加到菜單項目集合中。

我們宣告 RadialController 物件的輸入事件處理程序（ButtonClicked 和 RotationChanged）。

最後，我們定義事件處理程序。

public sealed partial class MainPage : Page
{
    RadialController myController;

    public MainPage()
    {
        this.InitializeComponent();
        // Create a reference to the RadialController.
        myController = RadialController.CreateForCurrentView();

        // Create an icon for the custom tool.
        RandomAccessStreamReference icon =
          RandomAccessStreamReference.CreateFromUri(
            new Uri("ms-appx:///Assets/StoreLogo.png"));

        // Create a menu item for the custom tool.
        RadialControllerMenuItem myItem =
          RadialControllerMenuItem.CreateFromIcon("Sample", icon);

        // Add the custom tool to the RadialController menu.
        myController.Menu.Items.Add(myItem);

        // Declare input handlers for the RadialController.
        myController.ButtonClicked += MyController_ButtonClicked;
        myController.RotationChanged += MyController_RotationChanged;
    }

    // Handler for rotation input from the RadialController.
    private void MyController_RotationChanged(RadialController sender,
      RadialControllerRotationChangedEventArgs args)
    {
        if (RotationSlider.Value + args.RotationDeltaInDegrees > 100)
        {
            RotationSlider.Value = 100;
            return;
        }
        else if (RotationSlider.Value + args.RotationDeltaInDegrees < 0)
        {
            RotationSlider.Value = 0;
            return;
        }
        RotationSlider.Value += args.RotationDeltaInDegrees;
    }

    // Handler for click input from the RadialController.
    private void MyController_ButtonClicked(RadialController sender,
      RadialControllerButtonClickedEventArgs args)
    {
        ButtonToggle.IsOn = !ButtonToggle.IsOn;
    }
}

當我們執行應用程式時，會用 Surface Dial 來與它互動。首先，我們長按開啟選單並選擇自訂工具。啟用自訂工具後，可以透過旋轉旋鈕調整滑桿控制，點擊旋鈕即可切換開關。

Radial 控制器範例截圖，橫向滑桿設在中間。
範例應用程式的使用者介面是透過 Surface Dial 自訂工具啟動的

指定內建工具

你可以使用 RadialControllerConfiguration 類別來自訂應用程式內建選單項目的集合。

例如，如果你的應用程式沒有捲動或縮放區域，也不需要復原/重做功能，這些工具可以從選單中移除。這樣在選單上就有空間，可以為您的應用程式新增自訂工具。

這很重要

Surface Dial 選單必須至少包含一個選單項目。如果在新增自訂工具前移除所有預設工具，預設工具會被恢復，工具會附加到預設集合中。

根據設計指引，我們不建議移除媒體控制工具（音量及上一首/下一首曲目），因為使用者在執行其他工作時常會播放背景音樂。

在這裡，我們說明如何設定 Surface Dial 選單，只包含音量和下一首與前一首曲目的媒體功能控制。

public MainPage()
{
  ...
  //Remove a subset of the default system tools
  RadialControllerConfiguration myConfiguration = 
  RadialControllerConfiguration.GetForCurrentView();
  myConfiguration.SetDefaultMenuItems(new[] 
  {
    RadialControllerSystemMenuItemKind.Volume,
      RadialControllerSystemMenuItemKind.NextPreviousTrack
  });
}

自訂互動

如前所述，Surface Dial 支援三種手勢（按住、旋轉、點擊），並有相應的預設互動方式。

確保基於這些手勢的自訂互動，對所選動作或工具有意義。

備註

互動體驗取決於 Surface Dial 選單的狀態。如果選單是啟用狀態，它會處理輸入;否則，你的應用程式會幫忙。

按住

這個手勢會啟動並顯示 Surface Dial（撥號）選單，這個手勢沒有相關的應用程式功能。

預設情況下，選單會顯示在使用者螢幕的中央。不過，使用者可以抓取它並將其移動到任何地方。

備註

當 Surface Dial 放置在 Surface Studio 的螢幕上時，選單會顯示在螢幕上 Surface Dial 所在位置的中央。

旋轉

表面撥盤主要設計用於旋轉，以進行平滑且漸進式的類比數值或控制調整互動。

該裝置可順時針或逆時針旋轉，並能提供觸覺反饋以指示離散距離。

備註

使用者可在 Windows 設定 -> 裝置 -> 方向盤 頁面中停用觸覺回饋。

自訂互動的使用者體驗 (UX) 指南

具有連續或高旋轉靈敏度的工具應關閉觸覺反饋

觸覺回饋與主動工具的旋轉靈敏度相匹配。我們建議對於具有持續或高旋轉靈敏度的工具關閉觸覺回饋，因為使用者體驗可能會感到不適。

慣用手不應該影響旋轉的互動

Surface Dial 無法偵測使用的是左手還是右手，不過使用者可以在Windows 設定 - 裝置 - 手寫筆和 Windows Ink 中設定書寫（或慣用手）手。

所有旋轉互動都應考慮位置

透過配合並調整互動方式，最大化顧客滿意度，以符合在地與特殊的左右排版的需求。

撥號選單內建的工具與指令遵循以下輪換互動指引：

左側

向上

Out

表面表盤圖片

正確

向下

概念方向	映射到表面表盤	順時針旋轉	逆時針旋轉
水平	基於 Surface Dial 頂部的左右映射	正確	左側
垂直	根據表面表盤左側的上下映射	向下	向上
Z軸	在內（或更靠近）對應到上方/右側向外（或更遠）對應至下/左	In	Out

開發人員指導方針

當使用者旋轉裝置時， RadialController.RotationChanged 事件會根據相對於旋轉方向的 delta（RadialControllerRotationChangedEventArgs.RotationDeltaInDegrees）觸發。資料的靈敏度（或解析度）可透過 RadialController.RotationResolutionInDegrees 屬性設定。

備註

預設情況下，只有當裝置旋轉至少 10 度時，才會將旋轉輸入事件傳送到 RadialController 物件。每一個輸入事件都會使裝置震動。

一般來說，我們建議當旋轉解析度設定為低於5度時，關閉觸覺回饋。這為持續互動提供了更流暢的體驗。

你可以透過設定 RadialController.UseAutomaticHapticFeedback 屬性來啟用或停用自訂工具的觸覺回饋。

備註

你無法改變系統工具（例如音量控制）的觸覺回饋行為。對於這些工具，觸覺回饋只能由使用者在方向盤設定頁面中停用。

這裡有一個如何自訂旋轉資料解析度以及啟用或關閉觸覺回饋的範例。

private void MyController_ButtonClicked(RadialController sender, 
  RadialControllerButtonClickedEventArgs args)
{
  ButtonToggle.IsOn = !ButtonToggle.IsOn;

  if(ButtonToggle.IsOn)
  {
    //high resolution mode
    RotationSlider.LargeChange = 1;
    myController.UseAutomaticHapticFeedback = false;
    myController.RotationResolutionInDegrees = 1;
  }
  else
  {
    //low resolution mode
    RotationSlider.LargeChange = 10;
    myController.UseAutomaticHapticFeedback = true;
    myController.RotationResolutionInDegrees = 10;
  }
}

Click

點擊表面撥號類似於點擊滑鼠左鍵（裝置的旋轉狀態不會影響此動作）。

UX 指導

如果使用者無法輕易從結果中恢復，請不要將動作或指令對應到此手勢

應用程式根據使用者點擊 Surface Dial 所採取的任何操作都必須是可逆的。務必讓使用者能輕鬆穿越應用程式回溯堆疊並還原先前的應用程式狀態。

像靜音/取消靜音或顯示/隱藏這類二進位操作，能提供良好的點擊手勢使用者體驗。

模式工具不應透過點擊 Surface Dial 來啟用或停用。

有些應用程式/工具模式可能會與依賴旋轉的互動衝突或停用。像是 Windows Ink 工具列中的尺子這類工具，應透過其他介面功能切換開關（Ink 工具列內建 ToggleButton 控制）。

對於模態工具，將目前活躍的 Surface 旋鈕選單項目映射到目標工具或先前選擇的選單項目。

開發人員指導方針

當點擊 Surface Dial 時，會觸發 RadialController.ButtonClicked 事件。 RadialControllerButtonClickedEventArgs 包含Contact 屬性，該屬性包含 Surface Studio 螢幕上 Surface Dial 接觸點的位置及其邊界區域。若表面撥號未與螢幕接觸，則此特性為零。

螢幕上

如前所述，Surface Dial可與Surface Studio搭配使用，以特殊的螢幕模式顯示Surface Dial選單。

在此模式下，你可以進一步整合並自訂你的 Dial 互動體驗與應用程式。僅有 Surface Dial 與 Surface Studio 才能實現的獨特體驗範例包括：

根據表面撥號的位置顯示情境工具（如色彩調色盤），使它們更容易被找到和使用
根據 Surface Dial 放置的介面設定啟用工具
根據Surface Dial的位置放大螢幕區域
根據螢幕位置的獨特遊戲互動

螢幕互動的使用者體驗指導

應用程式應該會在螢幕上偵測到 Surface Dial 時回應

視覺回饋有助於讓使用者知道你的應用程式已在 Surface Studio 螢幕上偵測到該裝置。

根據裝置位置調整 Surface Dial 相關的介面

裝置（以及使用者的身體）可能會根據使用者放置的位置遮擋關鍵介面。

根據使用者互動調整 Surface Dial 相關的介面

除了硬體遮擋外，使用者在使用裝置時，手和手臂還可能遮擋螢幕的一部分。

遮蔽區域取決於使用哪隻手操作裝置。由於此裝置主要設計為用於非慣用手，Surface Dial 相關的介面應根據使用者在 Windows 設定裝置筆與 Windows 墨水中選擇的書寫手設定進行調整。

互動應回應表面撥號的位置，而非移動

裝置的腳部設計成能黏附螢幕而非滑動，因為它並非精密指向裝置。因此，我們預期使用者會更常是將 Surface Dial 提起並放置，而非拖曳它在螢幕上移動。

利用螢幕位置判斷使用者意圖

根據使用者介面情境設定主動工具，例如與控制器、畫布或視窗的距離，能透過減少執行任務所需的步驟來提升使用者體驗。

開發人員指導方針

當 Surface Dial 放置在 Surface Studio 的數位化面板上時，會觸發 RadialController.ScreenContactStarted 事件，並提供聯絡資訊（RadialControllerScreenContactStartedEventArgs.Contact）給你的應用程式。

同樣地，如果在接觸 Surface Studio 的數位化面板時點擊 Surface Dial，會觸發 RadialController.ButtonClicked 事件，並提供聯絡資訊（RadialControllerButtonClickedEventArgs.Contact）給你的應用程式。

聯絡資訊（RadialControllerScreenContact）包含應用程式座標空間中 Surface Dial 中心的 X/Y 座標（RadialControllerScreenContact.Position），以及裝置獨立像素（DIPs）中的邊界矩形（RadialControllerScreenContact.Bounds）。這些資訊對於提供啟用工具的上下文以及提供使用者與裝置相關的視覺回饋非常有用。

在以下範例中，我們建立了一個基本的應用程式，包含四個不同的區塊，每個區塊包含一個滑桿和一個切換。接著我們會根據表面撥盤在螢幕上的位置來決定哪些滑桿和切換鍵由表面撥盤控制。

首先，我們在 XAML 中宣告我們的 UI（四個區塊，每個區塊都有滑桿和切換按鈕）。

Radial 控制器範例截圖，左側有四個橫向滑桿。
範例應用程式介面

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <StackPanel x:Name="HeaderPanel" 
        Orientation="Horizontal" 
        Grid.Row="0">
    <TextBlock x:Name="Header"
      Text="RadialController customization sample"
      VerticalAlignment="Center"
      Style="{ThemeResource HeaderTextBlockStyle}"
      Margin="10,0,0,0" />
  </StackPanel>
  <Grid Grid.Row="1" x:Name="RootGrid">
    <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid x:Name="Grid0"
      Grid.Row="0"
      Grid.Column="0">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider0"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle0"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
    <Grid x:Name="Grid1"
      Grid.Row="0"
      Grid.Column="1">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider1"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle1"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
    <Grid x:Name="Grid2"
      Grid.Row="1"
      Grid.Column="0">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider2"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle2"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
    <Grid x:Name="Grid3"
      Grid.Row="1"
      Grid.Column="1">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider3"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle3"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
  </Grid>
</Grid>

這是包含針對 Surface Dial 螢幕位置定義的處理程式的後置程式碼。

Slider ActiveSlider;
ToggleSwitch ActiveSwitch;
Grid ActiveGrid;

public MainPage()
{
  ...

  myController.ScreenContactStarted += 
    MyController_ScreenContactStarted;
  myController.ScreenContactContinued += 
    MyController_ScreenContactContinued;
  myController.ScreenContactEnded += 
    MyController_ScreenContactEnded;
  myController.ControlLost += MyController_ControlLost;

  //Set initial grid for Surface Dial input.
  ActiveGrid = Grid0;
  ActiveSlider = RotationSlider0;
  ActiveSwitch = ButtonToggle0;
}

private void MyController_ScreenContactStarted(RadialController sender, 
  RadialControllerScreenContactStartedEventArgs args)
{
  //find grid at contact location, update visuals, selection
  ActivateGridAtLocation(args.Contact.Position);
}

private void MyController_ScreenContactContinued(RadialController sender, 
  RadialControllerScreenContactContinuedEventArgs args)
{
  //if a new grid is under contact location, update visuals, selection
  if (!VisualTreeHelper.FindElementsInHostCoordinates(
    args.Contact.Position, RootGrid).Contains(ActiveGrid))
  {
    ActiveGrid.Background = new 
      SolidColorBrush(Windows.UI.Colors.White);
    ActivateGridAtLocation(args.Contact.Position);
  }
}

private void MyController_ScreenContactEnded(RadialController sender, object args)
{
  //return grid color to normal when contact leaves screen
  ActiveGrid.Background = new 
  SolidColorBrush(Windows.UI.Colors.White);
}

private void MyController_ControlLost(RadialController sender, object args)
{
  //return grid color to normal when focus lost
  ActiveGrid.Background = new 
    SolidColorBrush(Windows.UI.Colors.White);
}

private void ActivateGridAtLocation(Point Location)
{
  var elementsAtContactLocation = 
    VisualTreeHelper.FindElementsInHostCoordinates(Location, 
      RootGrid);

  foreach (UIElement element in elementsAtContactLocation)
  {
    if (element as Grid == Grid0)
    {
      ActiveSlider = RotationSlider0;
      ActiveSwitch = ButtonToggle0;
      ActiveGrid = Grid0;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
    else if (element as Grid == Grid1)
    {
      ActiveSlider = RotationSlider1;
      ActiveSwitch = ButtonToggle1;
      ActiveGrid = Grid1;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
    else if (element as Grid == Grid2)
    {
      ActiveSlider = RotationSlider2;
      ActiveSwitch = ButtonToggle2;
      ActiveGrid = Grid2;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
    else if (element as Grid == Grid3)
    {
      ActiveSlider = RotationSlider3;
      ActiveSwitch = ButtonToggle3;
      ActiveGrid = Grid3;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
  }
}

當我們執行應用程式時，會用 Surface Dial 來與它互動。首先，我們將裝置放在 Surface Studio 螢幕上，應用程式會偵測並關聯到右下角的區域（見圖片）。接著我們長按Surface Dial打開選單，選擇自訂工具。啟用自訂工具後，可以透過旋轉表面撥盤調整滑桿控制，點擊表面撥盤即可切換開關。

Radial 控制器範例截圖，左側有四個水平滑桿，第四個控制器被高亮標示。
範例應用程式的使用者介面是透過 Surface Dial 自訂工具啟動的