畫布視圖
畫布是用於構建應用圖形部件的視圖，它提供運行時介面外觀的視覺呈現。 這裡描述動態方面，如動畫和系統之間的相互作用。
TouchGFX Designer的畫布視圖
左側邊欄
左側的側邊欄包含一個索引標籤控制項，可在screen& Custom Containers之間導航。
Screens & Custom Containers
“Screens ”選項卡和“Custom Containers”選項卡都包含樹狀結構，提供每個screen/custom container中小工具的總覽，通過點擊小工具名稱旁邊的V形標記，可以折疊樹狀中每個可能包含其他小工具的小工具。
如需更改screen/custom container和其中小工具的順序，可將它們拖放到其他螢幕、自訂容器和小工具之下或之上，也可通過widget order controls來更改。 更改小工具順序，決定將哪個小工具放在其他小工具之上。
對於屬於容器類型的小工具，可以為其添加子工具，方法是在樹狀檢視中將小工具拖放到其他小工具之上。 此外，還可以將小工具從一個螢幕拖放到另一個螢幕。
在點擊小工具的同時按住CTRL鍵可以選擇多個小工具。
點擊“+”按鈕可將Screens/Custom Containers添加到專案。 可以從Widget Menu將自訂容器添加到螢幕和其他自訂容器，可以在它們自己的名為“Custom Containers”的類別中找到它們。
此外，螢幕、自訂容器和小工具都可按右鍵呼叫功能表，您可以：
| 重新命名 | F2 |
| 刪除小工具 | DEL |
| 複製 | CTRL + C |
| 貼上 | CTRL + V |
| 上移 | CTRL + F |
| 下移 | CTRL + B |
| 編輯原始檔案* |
*只能用於螢幕和自訂容器
左側邊欄中的螢幕樹狀圖
畫布
視圖頂部包含Widget Menu，其中包含所有可用的小工具。
視圖中心包含畫布，顯示了當前選中的螢幕或自訂容器。
畫布視圖中的畫布
小工具功能表
點擊小工具功能表中的“All widget group”選項卡或其按下其快速鍵 A 打開包含已分類的所有可用小工具的列表。 點擊特定的小工具組選項卡，打開該特定分類包含的可用小工具的列表。
點擊一個小工具，可將其添加到當前選中並顯示的螢幕或自訂容器的畫布上。
“All widget group”還包含一個搜索欄位，它採用模糊搜索技術，幫助用戶查找與搜索輸入匹配度最高的小工具。 最佳結果將highlight顯示。 舉例來說，由於使用模糊搜索，可以輸入“bwl”並得到“Button With Label”（帶標籤的按鈕），因為簡寫是其中一個因子。 在搜索欄位中輸入內容後，按下 Enter鍵 將高亮顯示的小工具插入畫布並關閉“小工具功能表”。
“畫布”視圖中的“小工具功能表”
小工具選擇
如上面的動畫所示，只需在畫布上點擊小工具即可選中它。 還可以多選，方法是在按住鍵盤上 Ctrl鍵 的同時按一下多個小工具。
小工具定位
如上面的動畫所示，可通過拖拽小工具的縮略圖來移動它和改變它的大小。
此外，還可以用方向鍵將選中的小工具移動1個像素。 在使用方向鍵的同時按住 Ctrl鍵 可以將選中的小工具移動10個像素。
小工具順序控制項
小工具的順序可通過“向前”和“向後”快捷方式進行調整，它們在“螢幕”或“自訂容器”樹中的順序也會隨之改變。
“向前”的觸發方式是按下 CTRL + F.
“向後”的觸發方式是按下 CTRL + B.
內容修剪控制
在畫布上，螢幕、自訂容器和容器類型小工具的子工具的邊界之外的小工具會被修剪。 內容修剪控制在完全修剪小工具和部分顯示小工具之間切換。
畫布視圖中的“顯示/隱藏修剪內容”控制
在下圖中，有一個一半位於螢幕邊界之外的方框，當內容修剪控制設置為顯示修剪過的小工具時，方框將不完全顯示，而是將邊界之外的部分去飽和。
顯示和隱藏修剪內容時方框小工具的外觀存在差異
歷史控制項
通過File Menu中的Edit功能，可以將在畫布上執行的修改歷史撤銷和重做。
系統記錄了每個螢幕和自訂容器的歷史，為了撤銷或重做在特定螢幕上執行的修改，該特定螢幕必須顯示在畫布上。
歷史控制項的另一種觸發方式是按下 CTRL + Z 和 CTRL + Y.
縮放控制項
畫布的縮放水準可通過畫布底部的縮放控制項進行控制。
如需將畫布對中並恢復至100%縮放比例，點擊“Reset Canvas”按鈕。
畫布視圖中的縮放控制項
還可以使用下列快速鍵執行縮放：
| 縮放比例25% | CTRL + 1 | CTRL + NUMPAD 1 |
| 縮放比例50% | CTRL + 2 | CTRL + NUMPAD 2 |
| 縮放比例75% | CTRL + 3 | CTRL + NUMPAD 3 |
| 縮放比例100% | CTRL + 4 | CTRL + NUMPAD 4 |
| 放大 | CTRL + 滑鼠滾輪向上滾 | CTRL + '+' |
| 縮小 | CTRL + 滑鼠滾輪向下滾 | CTRL + '-' |
| 重置縮放比例 | CTRL + 0 | CTRL + NUMPAD 0 |
右側邊欄
右側的側邊欄包含一個索引標籤控制項，可導航到當前選中小工具的Properties選項卡和畫布上當前看到的螢幕或自訂容器的Interactions選項卡。
Properties屬性
“Properties”選項卡將顯示當前選中的小工具/螢幕/自訂容器的屬性。 選中元件的名稱顯示在屬性清單的頂部。 名稱左側有一個圖示，將滑鼠懸停在該圖示上會顯示描述性文字，點擊該圖示將連結到該元件的文檔。
方框屬性
Interactions交互
“ Interactions”選項卡將顯示當前畫布上顯示的螢幕或自訂容器的交互。
點擊“+”按鈕可添加交互。
添加交互