平順地在版面配置變更之間切換

版面配置屬性通常會設為離散值 (例如,列數或欄數),或設為自動值 (例如,寬度與高度)。若要平順地切換這種屬性類型的變更,請使用流動版面配置。例如,如果在某種狀態中物件會出現在 Grid 版面配置面板中左下角的儲存格,但在另一個狀態中則出現在該版面配置面板中右下角的儲存格,除非開啟狀態群組的流動版面配置並增加切換持續時間,否則在這兩種狀態間切換將會產生瞬間改變的效果。

Note注意:

流動版面配置只會影響版面配置屬性。

平順地在版面配置變更之間切換

  1. 在開啟的文件中配置物件。例如,您可能有一個分成三欄三列的 Grid 物件,其中四個儲存格分別包含不同的物件。

    Ee341455.067dbe1c-2246-4c0e-b9f2-2eb9ad082e5e(zh-tw,Expression.40).png

  2. 在 [狀態] 面板中,定義不同的視覺狀態,並變更物件在這些狀態中的版面配置屬性。例如,針對每個物件定義可將物件顯示在右下角,並且涵蓋兩個列與兩個欄的狀態。

    Ee341455.198ca721-de5e-4d7d-85ab-97fbb02dcbc8(zh-tw,Expression.40).png

    如需建立狀態的相關資訊,請參閱定義使用者控制項的不同視覺狀態和切換時間

  3. 在 [狀態] 面板中,將狀態群組的 [預設切換] 時間設為 1 秒鐘。

  4. 您也可以按一下 EasingFunction  Ee341455.9718b395-a71d-40b2-9d08-8e29a225151f(zh-tw,Expression.40).png 以選取套用在切換作業的加/減速函數。加/減速函數可建立較真實的動畫。例如, Bounce 加/減速函數可建立彈跳效果。

  5. 若要啟用狀態變更,請開啟 [資產] 面板並選取 [行為] 類別,接著將 GoToStateAction 行為拖曳至左下角的物件上。

  6. 在 [屬性] 面板中,將 GoToStateActionStateName 屬性變更為移動左下角物件之狀態的名稱。例如,請將 StateName 屬性變更為 Show1

    Ee341455.8d71b559-361b-4885-ad87-9d5537215514(zh-tw,Expression.40).png

    如需行為的詳細資訊,請參閱使用行為

  7. 現在您已經有可用的狀態切換,接下來請按 F5 並按一下格線左下角的物件來測試應用程式。雖然您的切換時間是 1 秒鐘,該物件仍會立即移至右下角。

  8. 在 [狀態] 面板中,按一下狀態群組的 [開啟 FluidLayout] Ee341455.04416d58-b1c8-4338-b8fc-9ed002ec88bc(zh-tw,Expression.40).png

  9. 按 F5 並按一下格線左下角的物件,再次測試應用程式。該物件會以 1 秒鐘的時間平順地移至右下角。

另請參閱

工作

定義使用者控制項的不同視覺狀態和切換時間

概念

使用格線版面配置面板

Copyright © 2011 by Microsoft Corporation. All rights reserved.