試試看:在畫板上製造物件的反射效果

您可以使用 Microsoft Expression Blend 中的轉換和漸層工具,在畫板上製造物件的反射效果。

在畫板上製造影像的反射效果

為了在畫板上製造影像的反射效果,請先新增影像到您的專案中。接著,請建立影像的容器,並調整容器的高度、寬度和位置來建立鏡像影像。建立容器並新增影像之後,您就可以套用轉換和漸層,以製造影像的反射效果。

畫板上物件的反射效果

新增影像至專案

  1. 在 [專案] 功能表上,按一下 [新增現有項目]。

  2. 在 [新增現有項目] 對話方塊中,找出您要新增的影像,然後按一下 [開啟]。

    您可能會收到一則訊息,警告您影像超過 250 KB,並建議您採用內嵌影像。如果您收到這則訊息,請按一下 [是]。

    tip note秘訣:

    在此範例中,請使用 [範例圖片] 資料夾中的影像。

影像會新增至 [專案] 面板中。

建立鏡像影像

  1. 新增 StackPanel 控制項至畫板。在 [資產] 面板上,按一下 [面板],然後按兩下 [StackPanel]。確認您使用的是垂直的 StackPanel 控制項:在 [物件與時間軸] 面板中選取 [StackPanel],然後在 [屬性] 面板的 [版面配置] 類別中找出 [Orientation]。[Orientation] 值應該設為 [垂直]。

    tip note秘訣:

    您可以使用許多不同類型的控制項來建立反射效果。 StackPanel 控制項可讓您「堆疊」物件,並能利用單一控制項輕鬆地對齊物件以及移動一組物件的集合。

  2. 在 [物件與時間軸] 面板中選取 [StackPanel] 後,再於 [專案] 面板中,以滑鼠右鍵按一下影像檔案,然後按一下 [插入]。

  3. 在 [屬性] 面板的 [版面配置] 類別中修改 [Height] 和 [Width] 屬性來調整影像的大小。在此範例中,[Height] 是 200 ,而 [Width] 則是 267

    tip note秘訣:

    您也可以縮放影像。在 [屬性] 面板的 [轉換] 類別中,按一下 [Scale],然後輸入您需要的 [X] 和 [Y] 值。請在 [X] 和 [Y] 中使用相同的值,以維持長寬比。

  4. 在 [物件與時間軸] 面板中選取 [StackPanel],然後在 [屬性] 面板的 [版面配置] 類別中修改 [Height] 和 [Width],以便調整 [StackPanel] 的高度和寬度。其中寬度應該與您所選的影像寬度相同,而高度則應該是所選影像高度的兩倍,因為您會使用兩張影像來製造反射效果。在此範例中,[Height] 是 400 ,而 [Width] 則是 267

    插入影像

  5. 重複步驟 2 以插入另一個相同的影像。由於您使用的是垂直的 [StackPanel] 控制項,因此該影像會出現在第一個影像下方。在 [屬性] 面板的 [版面配置] 類別中,按一下 [Height] 右邊的 [設為自動] Hh134794.aa9ec064-22f8-4b62-9eed-3f4772362d22(zh-tw,Expression.40).png,以便調整高度。

    插入第二個影像

  6. 在 [物件與時間軸] 面板中按一下 [StackPanel],並將 [StackPanel] 拖曳到畫板中間。

  7. 在 [ Objects and Timeline ] 面板中選取第二個影像 ([ StackPanel ] 中位於下方的影像),然後在 [屬性] 面板的 [轉換] 類別中,按一下 [翻轉] Hh134794.2ba85702-e92f-4341-9497-9c9fb8af9c75(zh-tw,Expression.40).png 索引標籤中的 [翻轉 Y 軸]。

    沿著 Y 軸翻轉影像

現在您已經製造了鏡像影像的效果,可以開始調整不透明度、套用漸層並轉換影像,以製造反射的效果。

製造反射效果

  1. 在 [ Objects and Timeline ] 面板中選取第二個影像 ([ StackPanel ] 中位於下方的影像),然後在 [筆刷] 類別中,按一下 [漸層筆刷],然後按一下 [OpacityMask]。

  2. 在色彩編輯器中,按一下左邊漸層停駐點,然後在 [Alpha] 色板文字方塊中輸入 0

    Alpha 色板 0%

    tip note秘訣:

    您也可以按一下並拖曳 [Alpha] 色板文字方塊中的值。

  3. 滑動左邊漸層停駐點以調整不透明度,或在 [選取漸層停駐點位移] 文字方塊中輸入值。在此範例中,請於 [所選漸層停駐點位移] 文字方塊中輸入 20

  4. 在色彩編輯器中,按一下右邊漸層停駐點,然後在 [Alpha] 色板文字方塊中輸入 70

  5. 在 [ Objects and Timeline ] 面板中選取第二個影像 ([ StackPanel ] 中位於下方的影像),然後讓指標停留在影像控點上方,直到 [扭曲] 指標 Hh134794.2be41f49-8a61-4966-bf08-598f4253b610(zh-tw,Expression.40).png 出現為止。請按一下並拖曳控點,直到影像變成您想要的樣子。

    扭曲反射效果

    tip note秘訣:

    [扭曲] 指標對應於 [屬性] 面板中 [RelativeTransform] 方塊上的 [扭曲] 索引標籤。

  6. 讓指標停留在影像控點上方,直到 [縮放] 指標 Hh134794.7d350cd4-6d4f-40bc-9d04-d46d2d54ebee(zh-tw,Expression.40).png 出現為止。請按一下並拖曳控點,直到影像變成您想要的樣子。

    縮放反射效果

    tip note秘訣:

    [縮放] 指標對應於 [屬性] 面板中 [RelativeTransform] 方塊上的 [縮放] 索引標籤。

  7. 按 F5 以建置並執行您的專案。

    畫板上影像的反射效果

影像及其反射影像隨即出現。

您可以使用類似的方法在 Expression Blend 中製造各種控制項的反射效果。

Copyright © 2011 by Microsoft Corporation. All rights reserved.