FluidMoveBehavior、FluidMoveSetTagBehavior 和資料儲存區

您可以使用 FluidMoveBehavior 行為，以動畫顯示元素位置的變更。不過，如果您是單獨使用 FluidMoveBehavior ，就只能以動畫顯示識別的項目從特定位置切換到新位置的效果。如果將 FluidMoveBehavior 搭配 FluidMoveSetTagBehavior 一起使用，便能以動畫顯示從指定之起點的切換效果，即使只以應用程式中顯示之資料的參照來指定該初始位置也一樣。

當您將 FluidMoveBehavior 與 FluidMoveSetTagBehavior 搭配使用時，系統會建立隱藏的資料儲存區來協助您存取需要的資料 (即使該資料位於不同的範圍)。雖然這個資料儲存區是隱藏的，但是如果能夠瞭解資料儲存區的運作方式，對於使用 FluidMoveBehavior 和 FluidMoveSetTagBehavior 會很有幫助。

由 FluidMoveSetTagBehavior 加上標籤的資料，可以利用隱藏的資料儲存區與 FluidMoveBehavior 搭配使用

注意：
FluidMoveSetTagBehavior 是用來將值寫入資料儲存區，而 FluidMoveBehavior 則會讀取資料並將它寫入資料儲存區。

下列範例示範如何將 FluidMoveBehavior 、 FluidMoveSetTagBehavior 和資料儲存區搭配運作，以便在您使用清單/詳細資料檢視時，在 ListBox 和 ListBoxItem 中項目的詳細資料檢視之間建立平順的切換效果。

若要下載本主題中使用的範例專案，請造訪 Expression Community Gallery  (Expression 社群圖庫)。

使用 FluidMoveBehavior 和 FluidMoveSetTagBehavior 以動畫顯示選取項目時清單中項目與該項目詳細資料檢視之間的切換效果

在這個範例中， ListBox 會顯示一系列的 ListBoxItems (清單檢視)，也就是一份可供選購的椅子清單。椅子的清單檢視中包含指派給每張椅子的選定屬性，也就是名稱、價格和影像。

當您在 [ListBox] 中選取椅子時，詳細資料檢視便會出現。詳細資料檢視中會顯示與清單中所選個別項目相關的詳細資料。

為了達到此範例的目的，清單中選取的椅子及詳細資料檢視中顯示的椅子之間的切換效果將會以動畫顯示。若要啟用此切換效果，您必須將清單中的椅子指定成此動畫的起點。指定的方式是使用 FluidMoveSetTagBehavior 行為將 ItemTemplate (定義清單中項目外觀的範本)中的 Image 物件加上標籤。

如果您已經從 Expression Community Gallery  (Expression 社群圖庫) 下載並開啟範例，若要找出項目範本，請在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [listbox]，接著依序按一下 [編輯其他範本]、[編輯產生的項目 (ItemTemplate) 和 [編輯目前的項目]。請注意，[FluidMoveSetTagBehavior] 已新增至 [Image] 物件。

FluidMoveSetTagBehavior 套用至 Image 物件

將 [FluidMoveSetTagBehavior] 新增至物件後，[一般屬性] 和 [標籤屬性] 類別便會出現在 [屬性] 面板中。

[屬性] 面板中的 FluidMoveSetTagBehavior

[AppliesTo] 屬性設定為 [Self]，因為影像本身就是套用 [FluidMoveSetTagBehavior] 的項目。

[Tag] 屬性設定為 [DataContext]，因為影像無法在項目範本外部使用。 DataContext 標籤可識別此範本所繫結的資料，也就是與椅子相關的資料。

FluidMoveSetTagBehavior 行為會將資料 (在本範例中為影像) 加上標籤，並將它放在資料儲存區中，如此 FluidMoveBehavior 便可在套用 FluidMoveBehavior 之後找到該資料。

若要查看此設定的效果，請在範例專案中按一下 [將範圍傳回]** **。在 [物件與時間軸] 面板中，展開 [Grid]。請注意，[FluidMoveBehavior] 已新增至 [Grid]。

FluidMoveBehavior 套用至 Grid

將 [FluidMoveBehavior] 新增至物件 (在本範例中為 [Grid]) 後，[一般屬性]、[動畫屬性] 和 [標籤屬性] 類別便會出現在 [屬性] 面板中。

[屬性] 面板中的 FluidMoveBehavior

請注意，在 [標籤屬性] 類別中，[InitialTag] 屬性已加上 [DataContext] 的標籤。換言之，觸發此行為時，它會尋找資料儲存區中登錄之 DataContext (在本範例中為所選 ListBoxItem 之 ItemTemplate 中的 Image 物件) 最後的位置。接著，此行為會使用該例項作為其原點。

總結來說，[FluidMoveSetTagBehavior] 行為會將範本中要作為動畫播放起點的物件加上標籤。資料內容會參照資料的來源，並向隱藏的資料儲存區登錄該來源。透過參照 [FluidMoveSetTagBehavior] 行為，[FluidMoveBehavior] 行為可以找到動畫播放的起點，然後再將您需要的動畫屬性套用到由 [FluidMoveBehavior] 行為加上標籤的物件。本範例使用 [FluidMoveBehavior] 讓較大的椅子 (詳細資料檢視中的椅子) 看起來像是由較小的椅子 (清單檢視中的椅子) 所產生。

Copyright © 2011 by Microsoft Corporation. All rights reserved.