建立應用程式流程

[SketchFlow 地圖] 面板是一種圖形編輯器，可以用來定義應用程式的結構、流程、導覽和構成。

您可以將 [SketchFlow 地圖] 面板專門用於處理應用程式的結構，而畫板則專門用來處理個別螢幕的內容。

導覽螢幕

在您的原型中，每個螢幕都是以 [SketchFlow 地圖] 面板中的一個節點來代表。您可以使用導覽連線將一個螢幕連接到另一個螢幕，以表示螢幕之間的導覽關係。在 SketchFlow 播放程式中執行原型時，導覽節點之間的連線將會在 [導覽] 面板中模擬各螢幕間的導覽。

[SketchFlow 地圖] 面板中也會顯示元件螢幕。如需詳細資訊，請參閱本主題稍後的＜元件螢幕＞。

您可透過幾種方式在 SketchFlow 中定義各螢幕間的導覽。您可以從 [SketchFlow 地圖] 面板中現有的螢幕來建立新的連線螢幕、連接 [SketchFlow 地圖] 面板中兩個未連線的螢幕，或是以滑鼠右鍵按一下螢幕上的物件，並使用快顯功能表上的 [導覽至] 命令來定義導覽。

新增連線的導覽螢幕至應用程式流程

1. 建立新的 SketchFlow 專案時，您會建立一個名稱為螢幕 1.xaml 的新檔案。這個檔案會顯示成 [SketchFlow 地圖] 面板中的節點，以及 [專案] 面板中的 UserControl。

   注意事項：
   若要開啟新的 SketchFlow 專案，請參閱建立原型專案。

   將指標移到 [SketchFlow 地圖] 面板左上角的第一個節點 (螢幕 1) 上。

   注意事項：
   如果看不到 [SketchFlow 地圖] 面板，請按一下 [視窗] 功能表上的 [SketchFlow 地圖]，或按 SHIFT+F12。

   節點會以反白顯示，而且其關聯的 XAML 檔案名稱會顯示在工具提示中。另外，節點底部也會出現一個視覺化功能表：

   

2. 將指標移到視覺化功能表中左側的圖示上。開始拖曳圖示。指標後面隨即出現一個新的「疊影」節點。

3. 完成將導覽螢幕圖示拖曳到新螢幕預定顯示位置的動作。新節點隨即出現，預設名稱為「螢幕 2」。

   注意事項：
   您可以變更名稱，變更方法是在節點上按一下滑鼠右鍵再按一下 [重新命名]，或是按一下節點，再按 SHIFT+F2，然後直接在節點中輸入新名稱。

4. 若要在新螢幕上進行繪製，請在 [SketchFlow 地圖] 面板中按兩下節點，選取關聯的文件索引標籤。

節點間的連線代表這些節點之間的導覽。您也可以建立沒有定義導覽連線的導覽節點。

新增未連線的導覽螢幕至應用程式流程

1. 在 [SketchFlow 地圖] 面板中按一下滑鼠右鍵，然後按一下 [建立螢幕]。

   注意事項：
   如果看不到 [SketchFlow 地圖] 面板，請按一下 [視窗] 功能表上的 [SketchFlow 地圖]，或按 SHIFT+F12。

   注意事項：
   您可以變更名稱，變更方法是在節點上按一下滑鼠右鍵再按一下 [重新命名]，或是按一下節點，再按 SHIFT+F2，然後直接在節點中輸入新名稱。

2. 若要在新螢幕上進行繪製，請在 [SketchFlow 地圖] 面板中按兩下節點，選取關聯的文件索引標籤。

   秘訣：
   或者，在 [SketchFlow 地圖] 工具列中，按一下 [建立螢幕]。

連接兩個未連線的導覽螢幕

1. 在 [SketchFlow 地圖] 面板中，將指標移到要做為連線起點的節點上。

   注意事項：
   如果看不到 [SketchFlow 地圖] 面板，請按一下 [視窗] 功能表上的 [SketchFlow 地圖]，或按 SHIFT+F12。

   節點會以反白顯示，而且其關聯的 XAML 檔案名稱會顯示在工具提示中。另外，節點底部也會出現一個視覺化功能表。

   

2. 將指標移到視覺化功能表中的 [連接現有的螢幕] 圖示 (左邊第二個)。開始拖曳圖示，以建立新的導覽連線。滑鼠指標後面隨即出現一個箭號。

3. 完成將箭號拖曳到所要連接之螢幕的動作。若要移除連線，請以滑鼠右鍵按一下箭號，再按一下 [移除]。

   秘訣：
   或者，請按一下節點，並將節點拖曳到您要連接的節點。

元件螢幕

元件節點和導覽節點一樣都會出現在 [SketchFlow 地圖] 面板中。元件節點和導覽節點之間的一個重大差別在於，導覽節點有連入連線，但是元件節點沒有；元件節點只有連出連線。連線 (即代表應用程式流程節點之間連結的箭號) 指出元件螢幕會出現在哪些螢幕中。

元件節點包含可在多個螢幕上重複使用的內容。例如，您可以建立一個包含背景的元件節點，以及另一個包含功能表的元件節點，然後在整個原型的多個螢幕上使用這些元件。

建立新元件節點有幾種不同的方式。您可以直接在 [SketchFlow 地圖] 面板中新增元件節點，也可以在螢幕上選取內容，將它變成在 SketchFlow 地圖中顯示成元件節點的螢幕。

新增未連線的元件螢幕並新增至應用程式流程

• 在 [SketchFlow 地圖] 面板任一處按一下滑鼠右鍵，然後按一下 [新增元件螢幕]。

新增連線的元件螢幕並新增至應用程式流程

1. 在 [SketchFlow 地圖] 面板中，將指標移到要做為新增連線元件螢幕起點的節點上。

   注意事項：
   如果看不到 [SketchFlow 地圖] 面板，請按一下 [視窗] 功能表上的 [SketchFlow 地圖]，或按 SHIFT+F12。

   節點會以反白顯示，而且其關聯的 XAML 檔案名稱會顯示在工具提示中。另外，節點底部也會出現一個視覺化功能表。

   

2. 將指標移到視覺化功能表中的 [建立及插入元件螢幕] 圖示 (右邊第二個)。開始拖曳圖示，以建立新的元件連線。滑鼠指標後面隨即出現一個箭號。

3. 將箭號拖曳到您要連接的螢幕，再放開滑鼠。

將 UserControl 變成元件螢幕

1. 選取要轉換成元件螢幕的物件或物件群組。

   注意事項：
   若要選取物件群組，請在要包含的一組物件外圍拖曳出一個選取範圍框。

2. 以滑鼠右鍵按一下選取項目，然後按一下 [變成元件螢幕]。

3. 在 [變成元件螢幕] 對話方塊的 [名稱] 方塊中，輸入 UserControl 的名稱。

4. 選用：若要將元件螢幕新增到應用程式流程，請選取 [新增至 SketchFlow 地圖]。

5. 按一下 [確定]。

   注意事項：
   您可能必須重建專案 (F5)，元件螢幕才會出現在導覽螢幕中。

視覺化標籤

視覺化標籤可讓您在 SketchFlow 地圖中的各種螢幕和連線套上不同顏色，以協助您區分各種類型的螢幕和連線。

新增視覺化標籤至節點

1. 在 [SketchFlow 地圖] 面板中，將指標移到您要加上標籤的節點上。

   注意事項：
   如果看不到 [SketchFlow 地圖] 面板，請按一下 [視窗] 功能表上的 [SketchFlow 地圖]，或按 SHIFT+F12。

2. 節點會以反白顯示，而且其關聯的 XAML 檔案名稱會顯示在工具提示中。另外，節點底部也會出現一個視覺化功能表。

   

3. 將指標移到右邊的圖示上。按一下圖示，再按一下您要套用到節點的顏色。

新增視覺化標籤至連線

1. 在 [SketchFlow 地圖] 面板中，將指標移到您要加上標籤的連線上。

   注意事項：
   如果看不到 [SketchFlow 地圖] 面板，請按一下 [視窗] 功能表上的 [SketchFlow 地圖]，或按 SHIFT+F12。

   連線會以反白顯示。

2. 按一下 [視覺化標籤]，再按一下您要套用到連線的顏色。

您也可以透過修改 SketchFlow 專案設定來變更整個專案的視覺化標籤。

如需詳細資訊，請參閱修改 SketchFlow 專案設定。