建立應用程式流程

發行項
10/11/2017

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

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

導覽螢幕

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

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

SketchFlow 地圖

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

新增連線的導覽螢幕至 SketchFlow 地圖

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

注意：

若要開啟新的 SketchFlow 專案，請參閱建立原型專案。

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

注意：

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

節點會以反白顯示，而且其關聯的 XAML 檔案名稱會顯示在工具提示中。另外，節點底部也會出現一個視覺化功能表：
將指標移到視覺化功能表中左側的圖示上。開始拖曳圖示。指標後面隨即出現一個新的「疊影」節點。

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

完成將導覽螢幕圖示拖曳到新螢幕預定顯示位置的動作。您現在可以直接在文字方塊中輸入名稱來命名螢幕。如果未重新命名新螢幕，新節點將名為 "Screen x "，其中 " x " 是出現在應用程式流程中的編號螢幕名稱系列的下一個號碼。

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

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

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

新增未連線的導覽螢幕至 SketchFlow 地圖

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

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

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

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

秘訣：

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

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

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

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

注意：

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

節點會以反白顯示，而且其關聯的 XAML 檔案名稱會顯示在工具提示中。另外，節點底部也會出現一個視覺化功能表：
將指標移到視覺化功能表中的 [連接現有的螢幕] 圖示 (左邊第二個)。開始拖曳圖示，以建立新的導覽連線。指標後面隨即出現一個箭號。
完成將箭號拖曳到所要連接之螢幕的動作。若要移除連線，請以滑鼠右鍵按一下箭號，再按一下 [移除]。

秘訣：

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

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

元件螢幕

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

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

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

新增未連線的元件螢幕至 SketchFlow 地圖

在 [SketchFlow 地圖] 面板中的任何地方按一下滑鼠右鍵，然後按一下 [建立元件螢幕]。

新增連線的元件螢幕至 SketchFlow 地圖

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

注意：

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

節點會以反白顯示，而且其關聯的 XAML 檔案名稱會顯示在工具提示中。另外，節點底部也會出現一個視覺化功能表。
將指標移到視覺化功能表中的 [建立及插入元件螢幕] 圖示 (右邊第二個)。開始拖曳圖示，以建立新的元件連線。指標後面隨即出現一個箭號。

UserControl

元件螢幕是一種 UserControl 。當您建立元件螢幕時，它會出現在 SketchFlow 地圖中。您也可以建立非元件螢幕的 UserControl 。不是元件螢幕的使用者控制項不會出現在 SketchFlow 地圖中。

將 UserControl 變成元件螢幕

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

注意：

若要選取物件群組，請在要包含的一組物件外圍拖曳出一個週框外框。
以滑鼠右鍵按一下選取項目，然後按一下 [變成元件螢幕]。
在 [變成元件螢幕] 對話方塊的 [名稱] 方塊中，輸入 UserControl 的名稱。
按一下 [確定]。

注意：

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

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

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

從現有物件建立新的 UserControl

選取要轉換成 UserControl 的物件或物件群組。

注意：

若要選取物件群組，請在群組外圍拖曳出一個週框外框。您也可以直接在 [資源] 面板中選取物件。
以滑鼠右鍵按一下選取項目，然後按一下 [變成 UserControl]。
在 [變成 UserControl] 對話方塊的 [名稱] 方塊中，輸入 [UserControl] 的名稱。

如需詳細資訊，請參閱建立空白使用者控制項。

注意：
若要選取物件群組，請在群組外圍拖曳出一個週框外框。您也可以直接在 [資源] 面板中選取物件。

視覺化標籤

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

新增視覺化標籤至節點

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

注意：

如果看不到 [SketchFlow 地圖] 面板，請按一下 [視窗] 功能表上的 [SketchFlow 地圖]，或按 SHIFT+F12。
節點會以反白顯示，而且其關聯的 XAML 檔案名稱會顯示在工具提示中。另外，節點底部也會出現一個視覺化功能表：
將指標移到 [變更視覺化標籤] (右邊的圖示) 上。按一下圖示，再按一下您要套用到節點的顏色。

新增視覺化標籤至連線

在 [SketchFlow 地圖] 面板中，以滑鼠右鍵按一下您要加上標籤的連線。

注意：

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

連線會以反白顯示。
按一下 [視覺化標籤]，再按一下您要套用到連線的顏色。

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

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

共用方式為