Dynamic Panel 部件（widget）是一堆狀态或包含其他部件的圖形的面闆。面闆可以隐藏，顯示和移動。可以将目前可視圖形設定為動态。動态面闆允許在你的原型當中顯示功能，而且可以進行拖拽。譬如自定義提示（Custom tooltips）,lightboxes,标簽控件（Tab controls）。作為Axure RP的一般規則，在你的原型當中，無論你希望顯示，隐藏，修改和移動對象的時候，就可以選擇使用動态面闆（Dynamic Panel）。你會發現可以在你的原型工具箱中，它會成為最常使用的工具。
一個動态面闆可以有一個或多個狀态（state），并且每一個狀态可以是包含不同部件（widget）的圖形。在同一時刻，隻可以顯示動态面闆的一個狀态。在互動中，可以隐藏或顯示面闆，同時也可以設定面闆的目前狀态。
在wireframe中，通過拖動和拖拽可以增加并設定面闆的大小。通過搖桿也可以重新設定大小。在wireframe頁面中，動态面闆部件的大小決定可以你看到狀态的範圍。
Tip:如果在你的wireframe已經存在了部件，并且你希望設定該部件為動态面闆，有一個非常簡單的操作——通過右鍵該部件彈出的菜單“Convert to Dynamic Panel“可以很友善地設定。該操作會自動生成一個新的動态面闆，并且将該部件設定為第一個狀态。
*Add and Design Dynamic Panel States
預設情況下，動态面闆是空的，是以你需要設定内容（widget）為面闆狀态。為了完成這個，輕按兩下面闆可以打開“Dynamic Panel State Manager”對話框。
在對話框中，你可以增加，删除，重新排序和打開編輯狀态。第一個狀态為動态面闆的預設狀态。
在清單框中選擇一個狀态，點選“Edite State”按鈕打開編輯狀态對話框。
你會發現藍色表明輪廓狀态是正在編輯狀态。這會顯示動态面闆的大小，并且藍色輪廓也是你可以看到狀态的邊界。通過拖拽部件（widget）可以設計面闆狀态，就像在任何wireframe上進行拖拽一樣。
Scrollable Area:右鍵面闆選擇“Edit Dynamic Panel"->"Show Scrollbars as Needed"可以為動态面闆增加滾動條。如果你增加的部件（widget）超過了面闆一個狀态的邊界時，滾動條就會在原型裡面的動态面闆中出現。
*Hide Content by Default
動态面闆可以設定預設為隐藏狀态。為了完成這個，在wireframe中右鍵點選面闆，選擇“Edite Dynamic Panel（編輯動态面闆）”->“Set Hidden（設定隐藏）"即可。
隐藏面闆内容會将部件（widget）表面輪廓的藍色變為黃色。
動态面闆管理面闆（Dynamic Panel Manager） 會提供所有動态面闆的狀态的新增，這是管理動态面闆的另一個方式。當你在一個頁面使用很多動态面闆的時候，這個對話框就非常有用，可以很快導航到自己想編輯的動态面闆。
同時面闆提供在wireframe編輯中隐藏動态面闆的功能（右邊的小方框就是拿來隐藏面闆的。）。這樣友善選擇那些被面闆遮住的部件（widget）。
在主機闆中的動态面闆同樣具有這一選項。
如果管理面闆不在視圖中，你可以從“view->Dynamic Oanel Manager“中重新打開和顯示該面闆。
*Using the Dynamic Panel Manager
選擇一個動态面闆的名字或狀态，點選管理面闆的工具欄中的“Add State”按鈕可以建立和删除狀态。右鍵一個動态面闆的名字或狀态可以使用文本菜單。
輕按兩下一個狀态可以打開編輯狀态。你也可以選擇一個面闆名稱或狀态，點選“Edit All States“按鈕，來打開所有動态面闆的狀态。右鍵動态面闆的名稱同樣也有這一選項。
管理面闆中，點選面闆名稱右邊的藍色正方形，可以在wireframe面闆中隐藏動态面闆。右鍵頁面名稱選擇”Hide All"可以在頁面當中隐藏所有動态面闆。在動态面闆遮住其他部件的時候，這一點非常有用。
需要注意的是，這裡的隐藏和動态面闆的預設隐藏内容是不一樣的。
一旦你的wiraframe擁有了一個動态面闆，你就可以通過增加事件的case和從清單選擇操作（Action）來增加一般的互動。操作（Actions）提供給動态面闆互動一些可用的操作有：Set Panel state(s) to State(s), Toggle Visibility for Panel(s), Show Panel(s), Move Panel(s), Hide Panel(s), Bring Panel(s) to Front, Send Panel(s) to Back.
我們将說明一些基本的互動，包括顯示和隐藏面闆，設定面闆狀态，設定面闆為最前。移動動态面闆和動态面闆的事件将在Advanced Dynamic Panels裡面讨論。
*Set Dynamic Panel State
建立一個有多個狀态的動态面闆，并且用“Set Panel State(s) to State(s)“操作設定面闆為一個特定的狀态。在”Case Editor" 對話框中，在清單中選擇操作（action）。當你選擇了一個面闆，你可以選擇一個你想設定的狀态（在Select the Satate下拉框中）。你可以在同一個操作裡面設定多個動态面闆的狀态。
操作用于模式中，譬如頁籤或者點選一個按鈕或下拉框改變一個區域的内容的時候。（看下面例子）
*Show & Hide / Toggle Visibility for Panel
使用“Show Panel(s)”和“Hide Panel(s)”操作可以顯示和隐藏動态面闆目前狀态的内容。在“Editor Case”對話框中，選擇操作，在清單中選擇頁面中的動态面闆。設定動态面闆的标簽是個好習慣，這友善面闆的查找。你可以在同一個操作裡面設定多個面闆的為隐藏或顯示。
使用“Toggle Visibility for Panel(s)”操作可以轉換面闆的顯示和隐藏。
該操作常用于錯誤資訊的動态顯示和隐藏。（看下面例子）
*Move Panel
“Move Panel(s)“操作允許動态移動一個面闆内容特定的像素距離或移動到一個頁面中的特定的位置。設定你希望面闆移動的位置，在事件中增加一個觸發移動面闆的互動用例。（譬如，在一個button的OnClick事件增加一個移動面闆的用例）
在”Case Editor“對話框中選擇”Move Panel(s)“操作，選擇你需要移動的面闆。到了Step 4（第四步）的底部，你可以設定面闆移動的像素位置或者設定面闆移動到固定的位置。
這一操作可以用于原型和擴大區域，移動下層的内容為顯示或隐藏。（看下面的例子）
*Bring Panel to Front / Send Panel to Back
如果你的動态面闆在原型中被其他部件遮住了，而你需要将其顯示在最頂層的時候，你可以使用“Bring Panel(s) to Front”操作。這個操作會将面闆顯示在其他部件的上面。在“Case Editor ”對話框中，選擇操作，選擇需要操作的面闆。你可以在同一個操作裡面操作多個面闆。“Send Panel(s) to Back“的作用恰好相反。
在”light boxes“和自定義彈出菜單，自定義提示中，該操作是必須使用的。特别是面闆在主機闆的背景頁中的時候。（看下面的例子）
*Animation and Transition Effects
移動面闆的時候可以有一個動畫效果，同樣顯示和隐藏面闆的時候也可以有一個漸變效果。
警告：這些動畫效果或許在原型設計的時候很容易，但是開發或許會很難實作。
在實作“Move Panel”操作的時候，你可以選擇像旋轉，彈跳或其它特定的動畫變換。
在實作“Show Panel”。“Hide Panel”或“Toggle Panel”的時候，你可以選擇漸變動畫。
在用“Set Panel State”操作設定面闆狀态的時候，你也可以選擇漸變或滑動效果。
*Show Hidden Panel Tutorials
這個例子使用了動态面闆并用“Show Panel(s)“操作動态顯示一個隐藏的錯誤資訊。
*Tab Control Tutorial
這個例子使用了一個有多個狀态的動态面闆和“Set Panel State(s) to State(s)"操作來設定頁籤控件顯示的内容
*Custom Tooltip Tutorial
這個例子講述了在移動光标經過和移出一個部件的時候如何顯示和隐藏一個動态面闆的自定義提示。
*Flyout Menu Tutorial
這個例子講述了如果使用動态面闆建立一個自定義彈出菜單。
已經對動态面闆的基礎有所了解了嗎？Good，繼續深入學習"Dynamic Panels (Advanced)（動态面闆進階功能）“
版權由原位址提供公司所有。
本文轉自 Ron Ngai 部落格園部落格，原文連結：http://www.cnblogs.com/rond/archive/2012/11/14/2770638.html ，如需轉載請自行聯系原作者
![Winrunner的一些技巧[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)