第 21 章的摘要。 轉換
注意
這本書於2016年春季出版,此後一直沒有更新。 這本書中有很多仍然有價值,但一些材料已經過時,有些主題不再完全正確或完整。
Xamarin.Forms檢視會出現在畫面上,其父系所決定的位置和大小,通常是 Layout
或 Layout<View>
衍生專案。 轉換是可Xamarin.Forms修改該位置、大小或甚至方向的功能。
Xamarin.Forms 支援三種基本類型的轉換:
- 翻譯 - 水平或垂直移動專案
- Scale - 變更專案的大小
- 旋轉 - 繞著點或軸旋轉元素
在 Xamarin.Forms中,縮放比例為等向性;它會統一影響寬度和高度。 螢幕和 3D 空間的二維表面都支持旋轉。 沒有扭曲(或完全)轉換,也沒有一般化的矩陣轉換。
類別所VisualElement
定義的八個型別double
屬性支援轉換:
所有這些屬性都是由可系結的屬性所支援。 它們可以是數據系結和樣式的目標。 第 22 章。動畫示範這些屬性如何產生動畫效果,但本章中的一些範例示範如何使用定時器來建立這些屬性的Xamarin.Forms動畫效果。
轉換屬性只會影響元素的呈現方式,而且不會影響元素在版面配置中的感知方式。
翻譯轉換
和 TranslationY
屬性的非TranslationX
零值會水準或垂直移動專案。
TranslationDemo 程式可讓您使用控制 和 TranslationY
屬性的兩Slider
TranslationX
個專案Frame
來實驗這些屬性。 轉換也會影響該 Frame
的所有子系。
文字效果
翻譯屬性的其中一個常見用法是稍微位移文字的轉譯。 這會在 TextOffsets 範例中示範:
另一個效果是將的多個復本Label
轉譯為類似 3D 區塊,例如 BlockText 範例所示。
跳躍和動畫
ButtonJump 範例會使用翻譯在點選時移動 Button
,但主要目的是要Button
示範在轉譯按鈕的位置接收用戶輸入。
ButtonGlide 範例很類似,但使用定時器將 從一個點到另一個點產生動畫Button
效果。
調整轉換
轉換 Scale
可以增加或減少元素的轉譯大小。 預設值是 1秒。 值為 0 會導致項目不可見。 負值會導致元素顯示為旋轉 180 度。 屬性 Scale
不會影響 Width
專案的或 Height
屬性。 這些值保持不變。
您可以使用 SimpleScaleDemo 範例來Scale
實驗 屬性。
ButtonScaler 範例示範動畫屬性Button
與FontSize
動畫屬性之間的差異。Scale
屬性 FontSize
會影響在版面配置中感知 的方式 Button
; Scale
屬性不會。
ScaleToSize 範例會計算套Scale
用至Label
元素的屬性,使其在頁面內仍然適合時盡可能大。
錨定尺規
在前三個範例中縮放的專案,都會相對於元素的中心增加或減少大小。 換句話說,元素會在所有方向上增加或減少相同大小。 在縮放期間,只有專案中心點會維持在相同的位置。
您可以藉由設定 AnchorX
和 AnchorY
屬性來變更縮放的中心。 這些屬性相對於專案本身。 針對 AnchorX
,值為 0 表示元素的左邊,而 1 則指右邊。 同樣地 AnchorY
,0 是頂端,1 是底部。 這兩個屬性都有預設值0.5,也就是中心。
AnchoredScaleDemo 範例可讓您實驗 AnchorX
和 AnchorY
屬性以及 Scale
屬性。
在 iOS 上,使用 和屬性的非預設值AnchorX
AnchorY
通常與手機方向變更不相容。
旋轉轉換
屬性 Rotation
是以度為單位指定,並指出 順時針旋轉繞 由 AnchorX
和 AnchorY
所定義的項目點。 PlaneRotationDemo 可讓您試驗這三個屬性。
旋轉的文字效果
BoxViewCircle 範例示範使用 64 個微小旋轉BoxView
元素繪製圓形所需的數學。
RotatedText 範例會顯示多個Label
元素,其中多個元素具有相同的文字字串旋轉,以像輪輻一樣出現。
CircularText 範例會顯示一個文字字串,該字串會以圓形換行。
類比時鐘
Book.Toolkit 連結Xamarin.Forms庫包含一個AnalogClockViewModel
類別,可計算時鐘手的角度。 為了避免 ViewModel 中的平臺相依性,類別會使用 Task.Delay
而不是定時器來尋找新 DateTime
值。
Book.Toolkit 也包含在 Xamarin.FormsBook.Toolkit 中,這個 SecondTickConverter
類別會實作 IValueConverter
並用來將第二個角度四捨五入到最接近的秒。
MinimalBoxViewClock 使用三個旋轉BoxView
元素來繪製類比時鐘。
BoxViewClock 用於BoxView
更廣泛的圖形,包括時鐘臉部的刻度標記,以及旋轉距離其終點一點距離的手部:
此外,Book.Toolkit 中的Xamarin.Forms類別SecondBackEaseConverter
會導致第二手似乎在向前跳躍前先退一點,然後回到正確的位置。
垂直滑桿?
VerticalSliders 範例示範Slider
元素可以旋轉 90 度,但仍可運作。 不過,很難定位這些旋轉的 Slider
元素,因為在版面配置中,它們仍然顯示為水準。
3D-ish 旋轉
屬性 RotationX
會顯示在 3D X 軸周圍旋轉元素,讓元素的頂端和底部似乎會朝查看器移動或離開查看器。 同樣地, RotationY
似乎在Y軸周圍旋轉元素,讓元素的左右兩側似乎朝查看器移動或離開查看器。
屬性 AnchorX
會影響 RotationY
,但不會影響 RotationX
。 屬性 AnchorY
會影響 RotationX
,但不會影響 RotationY
。 您可以實驗 ThreeDeeRotationDemo 範例,以探索這些屬性的互動。
所隱含 Xamarin.Forms 的 3D 座標系統是左撇子。 如果您將左手的食指指向增加 X 座標的方向(向右)和中間手指的方向增加 Y 座標(向下),則您的拇指指向增加 Z 座標的方向(從螢幕外)。
此外,針對三個座標軸中的任何一個,如果您將左拇指指向增加值的方向,則手指的曲線表示正旋轉角度的旋轉方向。