檢視區與內容

直接操作 會使用 檢視區內容連絡人 來描述 UI 的互動式元素。

檢視區是視窗中的區域,可接收和處理使用者互動的輸入。 檢視區代表使用者在特定時間可以看到的內容區域, (也稱為內容剪輯) 。 檢視區有數個函式:

  • 它會管理互動狀態 (例如,當內容準備好進行操作時、內容正在進行操作時、當內容處於慣性動畫) ,並將輸入對應至輸出轉換時。
  • 它包含會移動以回應使用者互動的內容。 這可能是 HTML div 元素, (捲動) 、可移動流覽的清單 (Windows 8開始畫面) ,或選取控制項的快顯視窗。

檢視區是藉由呼叫 CreateViewport來建立。 您可以在單一視窗中建立多個檢視區,以產生豐富的 UI 體驗。

內容 代表為了回應互動而轉換的專案。 換句話說,內容是使用者移動或縮放時移動或縮放的內容。 有兩種類型的內容:

  • 主要內容 是檢視區中回應輸入操作和慣性的單一內建元素。 主要內容會與檢視區同時建立,而且無法從檢視區新增或移除。 您可以使用貼齊點自訂主要內容的行為, (稍後) 討論。
  • 次要內容 會相對於主要內容的動作移動。 次要內容會與檢視區分開建立,而且可以從檢視區新增或移除。 所有次要內容轉換都會根據主要內容的轉換來計算。 您可以套用特定規則,以根據專案在建立期間由其 CLSID 識別的預定用途來變更轉換的計算方式。

在此圖表中,顯示移動流覽前後的單一連絡人已用來移動流覽主要內容。 即使使用者未直接與移動流覽指標互動, (次要內容) ,次要內容仍會在主要內容移動流覽時移動。 這會提供使用者移動流覽距離的視覺提示。

顯示移動流覽前後的圖表

設定檢視區

建立檢視區之後。 使用 互動組態來設定其行為。 互動組態會指定支援哪些操作,例如移動流覽。

移動流覽 會隨著水準或垂直軸變更內容的位置,或同時變更為使用者移動流覽。 當您在這兩個軸上設定翻譯時,內容會以任意方向自由移動。

若要限制內容的動作,請設定 滑軌,通常是在水準軸和垂直軸上。 如果使用者的互動主要是沿著單一軸 (由下一個圖表中的藍色區域表示) ,則移動流覽會變成 滑軌 ,而內容只會沿著滑軌軸移動。 如果使用者已移動流覽,且目前處於滑軌,並在內容處於慣性時執行第二個移動流覽,則新的移動流覽會繼續受到滑軌。

顯示滑軌移動流覽中檢視區內內容的圖表

範例:檢視區設定為水準和垂直移動流覽。 在第一個框架中,連絡人會關閉。 第二個是起始垂直移動流覽,而連絡人會鎖定到垂直滑軌。 最後,移動流覽一旦滑軌,只會使用對角移動流覽的垂直元件來移動內容。

如果使用者以不是在滑軌偵測區域中的對角移動流覽, (白色區域) ,則移動流覽會 無條件 ,且內容會在兩個軸中自由移動。

此圖顯示移動在未帶軌的移動流覽中的內容

縮放 會隨著使用者英吋或延展而變更內容的縮放比例。 內容縮放的點 (稱為縮放中心) 位於連絡人的中心。 如果您已設定水準或垂直對齊,縮放中心會變更以保留對齊方式。

顯示具有指定對齊方式之內容的縮放圖表

您可以藉由指定解除鎖定中心來覆寫此行為,這會在連絡人的中心設定縮放中心。

顯示縮放中心解除鎖定內容縮放的圖表

性是在觸控) 或鍵盤/滑鼠輸入 (例如按一下捲軸或按下方向鍵) 的情況下,移動流覽和縮放 (操作的漸進式減速。 當使用者操作內容時,操作不會在連絡人隨即解除之後立即停止。 相反地,內容會以目前的方向和速度繼續,逐漸變慢到停止。

貼齊點和界限

慣性動畫會在操作結束之後,因為手指在觸控) 或鍵盤/滑鼠動作 (例如方向鍵、頁面向上/向下、滑鼠滾輪捲動等) 的情況下,從螢幕中取出 (。

有兩個定義慣性動畫的資訊:

  • 動畫的其餘點 – 特定轉換元件的最終結束位置。
  • 動畫持續時間、曲線、速度 – 這些是由其餘點的類型所決定。

慣性動畫會受到貼齊點和界限的影響。 界限會指定內容的最大和最小待用點。 如果內容在慣性期間達到界限,將會套用界限動畫。 貼齊點定義于主要內容上,以修改其餘點並修改慣性動畫曲線本身。

當您的內容定期間距或設定SnapPoint時,您會使用SetSnapInterval定義貼齊點。 以下是貼齊點的範例:

顯示內容中設定貼齊點如何影響移動流覽的圖表

在圖表中,有一段內容包含一系列子內容區塊 – 新聞讀取器類型應用程式中的新聞專案,或方格檢視中的專案。 意圖是在慣性結束之後,將專案的左邊緣貼齊檢視區左邊緣。

貼齊點類型有兩組:

  • 選擇性與強制:選擇性貼齊點只有在慣性其餘點接近貼齊點時,才會貼齊慣性動畫。 強制貼齊點一律會將慣性動畫貼齊至指定的貼齊點。
  • 單一與多重:多個貼齊點類型可讓內容在接近其自然靜止點的貼齊點之前,先移動超過許多貼齊點。 單一貼齊點類型會選擇下一個最接近的貼齊點做為慣性動畫的其餘點。

下圖示范貼齊點類型如何修改慣性動畫的其餘位置。

顯示慣性與貼齊點互動方式的圖表

在此圖中,慣性起點標示為「開始」,而沒有貼齊點時的自然慣性結束位置會標示為「結束」。 垂直線會標示各種貼齊點。 下表描述每種貼齊點類型如何影響動畫的結束位置。

點類型 描述
強制單一 選擇貼齊點 P1,因為它是慣性方向的第一個貼齊點
強制倍數 選擇貼齊點 P2,因為它最接近慣性方向的終點
選擇性單一 選擇貼齊點 P1,因為它是慣性期間遇到的第一個貼齊點
選擇性多重 選擇貼齊點 P2,因為它接近自然端點

貼齊點位移和 RTL 案例

顯示 rtl 貼齊點使用狀況的圖表

您可以使用 SetSnapCoordinate API 來套用貼齊點位移和座標系統,這會使用指定的位移/座標系統來位移所有貼齊點或貼齊間隔。

在 RTL 案例中,座標系統非常有用,您可以在其中以反向方向描述內容左邊緣的貼齊點。 在上圖中, SetSnapCoordinate 會與 DIRECTMANIPULATION_MOTION_TRANSLATEXDIRECTMANIPULATION_COORDINATE_MIRRORED 旗標搭配使用,其會自動從內容的左邊緣位移貼齊點,並以從右至左的順序提供它們:S1 位於 0px,S2 位於 50px (,依此類) 。 使用 SetSnapCoordinate 設定的任何位移都會自動從內容的左邊緣進一步位移,包括正確的縮放比例。

您幾乎一律會搭配原始參數集使用SetSnapCoordinate,以避免在內容區域外設定貼齊點。

例如,如果檢視區為 200x200,且內容為 1000x200,且介面為 RTL,則檢視區會在第一次呈現檢視區時,其左邊緣為 x=800。 呼叫 SetSnapCoordinateSetSnapCoordinate(DIRECTMANIPULATION_MOTION_TRANSLATEX, DIRECTMANIPULATION_COORDINATE_MIRRORED, 1000.0) ,以指定應該從內容右邊緣開始,從右至左順序計算貼齊點。

行為

行為是可以附加至檢視區的物件,以修改直接操作如何處理檢視區主要或次要內容的輸出轉換。 行為物件可能會影響操作的一或多個層面,例如輸入的處理方式或慣性動畫的套用方式。 例如,自動捲動行為會藉由在主要內容一端執行捲動動畫來影響慣性動畫。 交叉投影片設定行為會影響直接操作輸入處理,以偵測執行交叉投影片動作的時機。

行為物件是藉由呼叫 CreateBehavior建立,並新增至檢視區,然後以非同步方式設定其行為。 從檢視區移除行為會移除其效果。

座標系統

直接操作採用三個主要座標系統:

  • 用戶端座標系統 - 描述用戶端視窗的矩形。 單位以圖元為單位。
  • 檢視區座標系統 - 描述用戶端內可處理輸入的區域矩形。 單位是使用 SetViewportRect) 的應用程式定義 (。
  • 內容座標系統 - 描述主要內容的矩形或大小。 單位是使用 SetContentRect) 來定義應用程式 (。

針對這三個系統,座標會相對於其各自的左上方原點來定義,並正向右和向下增加。 下圖說明這些座標系統。 使用者只能看到或操作檢視區矩形中內容的區段。

顯示內容、用戶端和檢視區座標互動方式的圖表

轉換

直接操作 會維護數個不同的轉換,這些轉換有助於整體顯示的輸出。

  • 內容轉換 – 根據操作或慣性, 直接操作 所計算的初始轉換。 它會擷取貼齊點、滑軌、預設超窗格 (操作) 、預設超平 (慣性) 和 ZoomToRect 動畫的效果。
  • 輸出轉換 - 最終的視覺效果或輸出轉換。 這是內容和同步轉換的組合。
  • 同步轉換 – 當您呼叫 SyncContentTransform時計算。 它可協助 直接操作 套用應用程式所提供的新內容轉換,同時維護現有的輸出轉換。
  • 顯示轉換 – 應用程式在後置處理過程中套用。 如需詳細資訊 ,請參閱 SyncDisplayTransform

因為輸出轉換的目的是要以視覺方式在畫面上位移表面, 所以直接操作 會在輸出轉換元件上執行必要的四捨五入,讓文字和其他內容一律在整數圖元界限轉譯/複合。 四捨五入機制取決於多個因素,包括動作的速度和遠端桌面的存在。 次要內容的舍入機制會比對主要內容的四捨五入機制,同時考慮兩者之間的動作差異。 GetOutputTransform的用戶端不應該相依于輸出轉換的確切舍入機制,因為各種因素會影響它。

注意

這表示內容轉換的元件可能不是整數,而且可能包含子圖元位移。 建議使用 直接操作 的用戶端使用 GetOutputTransform ,以在使用手動更新模式時計算要套用至內容的正確視覺轉換。 使用內建編輯器使用自動更新模式時,直接操作會自動代表用戶端套用此轉換。 此轉換是由直接操作所產生,以確保在撰寫視覺輸出時以視覺方式呈現美觀的結果。

檢視區狀態

當處理輸入時,檢視區會管理輸入與輸出轉換的互動狀態和對應。 呼叫 GetStatus來檢查檢視區的互動狀態。

顯示 directmanipulation 互動狀態的圖表

  • 建置 – 正在建立檢視區,且尚無法處理輸入。 若要處理輸入,請呼叫 IDirectManipulationViewport::Enable。 如果未呼叫 Enable ,檢視區會進入 [已停用] 狀態。

    注意

    這是互動的初始狀態。

  • 已啟用 – 檢視區已準備好處理輸入。 當連絡人關閉 (SetContact 呼叫) 且偵測到操作時,檢視區會轉換為執行中。

  • 執行 – 檢視區目前正在處理輸入和更新內容。 當連絡人隨即轉移時,如果已設定,檢視區就會轉換為慣性。

  • 慣性 – 內容正在慣性動畫中移動。 一旦慣性完成,檢視區就會轉換為 [就緒]。 如果檢視區上已設定自動停用,則會從慣性轉換為就緒,然後轉換為 Disabled。

  • 就緒 – 檢視區已準備好處理輸入。 當連絡人關閉 (SetContact 呼叫) 且偵測到操作時,檢視區會轉換為執行中。

  • Suspended – 當檢視區的輸入已升級為 SetContact 鏈結中的父系時,檢視區可能會變成 Suspended。 這會在多個檢視區中更詳細地討論 :點擊測試和檢視區階層

  • 已停用 – 檢視區不會處理輸入或進行回呼。 您可以藉由呼叫 IDirectManipulationViewport::D isable,從各種狀態停用檢視區。 如果已在檢視區上設定自動停用,則會在處理操作之後自動轉換為 [已停用]。 若要重新啟用已停用的檢視區,請呼叫 IDirectManipulationViewport::Enable

多個檢視區:點擊測試和檢視區階層ActivateConfigurationGetOutputTransformSyncDisplayTransform