訓練
學習路徑
Use advance techniques in canvas apps to perform custom updates and optimization - Training
Use advance techniques in canvas apps to perform custom updates and optimization
使用視覺效果回饋向使用者顯示何時偵測、解釋和處理他們的互動。 視覺效果回饋可藉由鼓勵互動來協助使用者。 它表示互動的成功,這可提高使用者的控制感。 它還傳遞系統狀態並減少錯誤。
重要 API:Windows.Devices.Input、Windows.UI.Input、Windows.UI.Core
接觸點視覺效果對於需要準確性和精確度的觸控互動特別重要。 例如,您的應用程式應該清楚指出點選的位置,讓使用者知道他們是否錯過了目標、錯過了多少,以及他們必須做出哪些調整。
使用可用的預設 XAML 平台控制項可確保應用程式在所有裝置和所有輸入情況下都能正常運作。 如果您的應用程式具有需要自訂回饋的自訂互動,則應確保回饋合適,可跨輸入裝置,並且不會分散使用者對其任務的注意力。 這可能是遊戲或繪圖應用程式中的特定問題,其中視覺效果回饋可能與關鍵 UI 衝突或妨礙關鍵 UI。
重要
不建議變更內建手勢的互動行為。
跨裝置的回饋
視覺效果回饋通常會隨輸入裝置 (觸控、觸控板、滑鼠、畫筆/手寫筆、鍵盤等等) 而異。 例如,滑鼠的內建回饋通常涉及移動和變更游標,而觸控和畫筆需要接觸點視覺效果,鍵盤輸入和瀏覽使用焦點矩形和醒目提示。
使用 ShowGestureFeedback 來設定平台手勢的回饋行為。
如果自訂回饋 UI,請確保提供支援且適合所有輸入模式的回饋。
以下是 Windows 中內建接觸點視覺效果的一些範例。
![]() |
![]() |
![]() |
![]() |
---|---|---|---|
觸控視覺效果 | 滑鼠/觸控板視覺效果 | 畫筆視覺效果 | 鍵盤視覺效果 |
所有 Windows 應用程式都會圍繞應用程式中的可互動控制項,提供更明確的焦點視覺效果。 這些新的焦點視覺效果是完全可自訂的,而且能視需要停用。
對於 Xbox 和電視使用的典型 10 英呎體驗,Windows 支援顯示焦點,這是一種光源效果,可在透過遊戲台或鍵盤輸入讓可設定焦點的元素 (例如:按鈕) 獲得焦點時,動畫顯示元素的框線。
高可見度焦點視覺效果有兩個部分:主要框線和次要框線。 主要框線的粗細為 2px,圍繞在次要框線「外」。 次要框線的粗細為 1px,圍繞在主要框線「內」。
若要變更任一框線類型 (主要或次要) 的粗細,請分別使用 FocusVisualPrimaryThickness 或 FocusVisualSecondaryThickness:
<Slider Width="200" FocusVisualPrimaryThickness="5" FocusVisualSecondaryThickness="2"/>
邊界是 Thickness 類型的屬性,因此可以將邊距自訂為只在控制項的某些側出現。 如下所示:
邊界是控制項的視覺界限與焦點視覺效果次要框線的起始位置之間的空間。 預設邊界是位於控制項界限 1px 的距離之外。 您可以針對個別控制項編輯這個邊界,方法是變更 FocusVisualMargin 屬性:
<Slider Width="200" FocusVisualMargin="-5"/>
邊界為負值時,將使框線遠離控制項的中心;邊界為正值時,則將使框線向控制項的中心靠攏。
若要完全關閉控制項上的焦點視覺效果,只需停用 UseSystemFocusVisuals:
<Slider Width="200" UseSystemFocusVisuals="False"/>
應用程式開發人員想要擁有焦點視覺效果的粗細、邊界,或是否希望擁有,是根據每個控制項決定的。
焦點視覺效果只有兩個色彩屬性:主要框線色彩和次要框線色彩。 這些焦點視覺框線色彩可以在頁面層級上變更個別控件,並在全應用程式層級全域變更:
若要對整個應用範圍呈現品牌焦點視覺效果,請覆寫統筆刷:
<SolidColorBrush x:Key="SystemControlFocusVisualPrimaryBrush" Color="DarkRed"/>
<SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="Pink"/>
若要根據每個控制項變更色彩,只要編輯所需控制項的焦點視覺效果屬性:
<Slider Width="200" FocusVisualPrimaryBrush="DarkRed" FocusVisualSecondaryBrush="Pink"/>
訓練
學習路徑
Use advance techniques in canvas apps to perform custom updates and optimization - Training
Use advance techniques in canvas apps to perform custom updates and optimization