---
tags: 視窗程式設計
---

# Visual Studio 工作環境

專案開啟成功之後，這裡我們稍微說明 Visual Studio 的視窗畫面。如果你之前修過程式設計，使用過 Visual Studio 應該會覺得很熟悉，不過這邊還是跟同學再複習一下。

只要你開啟一個新專案，就會有類似以下的畫面，通常預設都類似以下的畫面。其中「**視窗設計視窗**」是我們用來設計視窗程式畫面的地方，「**方案總管**」則是用來管理所有專案中的檔案，你可以直接點選檔案來開啟。

不過通常這樣不好用，以下會讓同學學習教出幾個常用的子視窗。


## 工具箱

首先我們要將「**工具箱**」子視窗顯示，請點選視窗上方的「檢視」，再選擇「**工具箱**」。


在視窗左側就會顯示「**工具箱**」，這個工具箱也是可以收合的。工具箱會列出各種視窗畫面設計會用到的「控制項」，我們可以用拖拉放的方式放置到視窗畫面，用直覺的方式來設計視窗程式的功能，我們之後會進一步介紹。


## 屬性視窗

再來我們要叫出「**屬性視窗**」，一樣也是點選視窗上方的「檢視」，再選擇「**屬性視窗**」，或者按 **F4** 也可以。通常按下去之後就會在「**方案總管**」下方顯示。

「**屬性視窗**」可以直接選擇視窗中「控制項」的各種屬性，例如修改基本的 ID 名稱、字體大小、元件大小等等，讓你設計視窗的功能不需要寫程式，只要點選就可以了，我們之後會進一步介紹。


## 方案總管

「**方案總管**」視窗其實已經有了，你可以看視窗的右上方，就能看到方案總管。方案總管可以顯示你的程式專案中所有的檔案內容，如以下畫面。


**每一個檔案要開啟只需要滑鼠左鍵點兩下即可**。比較重要的東西是「**Form.cs**」，這個檔案就是你要設計的視窗畫面與程式碼，這裡給同學一個重要概念，視窗程式設計通常我們會分成：

:::success
1. **設計版面檔**：你已經看到這個了，就是畫面左側視窗設計視窗裡面的空白視窗，你屆時可以在工具箱中拖拉放你要的視窗介面控制項進去，無須寫程式碼。實際的版面檔檔案是「**Form.Designer.cs**」
2. **程式碼**：光是設計畫面不夠，你還需要寫程式碼，把這些控制項的互動機制寫完，才會是完整的視窗應用程式。
:::

## 在哪裡寫程式？

接下來你可能會想：那程式寫在哪邊？請在「**Form.cs**」上面按右滑鼠鍵，會出現選單，選擇「**檢視原始碼**」，你就會在左側看到程式原始碼的出現。



這時候你就會發現，版面檔與程式碼是一組的，版面檔頁籤是「**Form.cs [設計]**」、程式頁籤是「**Form.cs**」，你可以切換這兩個頁籤熟悉一下，我們之後會在基本視窗程式的章節說明兩者的關係，以及讓同學實際撰寫程式。


## 錯誤清單

寫程式的時候常常會有錯誤問題，這時「**錯誤清單**」就可以幫助你了解程式哪裡有問題？你可以初步看看錯誤訊息，大概猜測可能哪裡有問題要修改，你就可以進一步修改，或者把錯誤訊息貼到 Google 或者 ChatGPT 尋找解決方法。

叫出「**錯誤清單**」，一樣也是點選視窗上方的「檢視」，再選擇「**錯誤清單**」，就會在視窗下方看到這個子視窗。


這個如何使用，我們之後的課程在撰寫程式的過程中會繼續說明，這裡你先知道有紅色的叉叉，就代表程式有問題，所以程式沒辦法執行。其中你也可以看到有行數的指示，告訴你錯誤是在程式碼的哪一個位置？例如圖中第一個錯誤，行17就是指出這個錯誤的位置在程式碼的第17行。

同時，在程式碼中，有錯誤的地方會有紅色的波浪線標註，這時你就可以知道這裡有程式問題。


不過這裡也要提醒同學，有紅色波浪線的地方不見得就是程式問題的根源，有時需要你整體考量程式碼的內容才能解決問題。

## 視窗排列與重新設定視窗配置

Visual Studio 的工作環境視窗配置是可以自由調整的，例如「**方案總管**」視窗右上角有一個大頭針和X按鍵，點下大頭針就可以讓子視窗浮動，並且可以自動隱藏，X按鍵則是可以關閉子視窗，你可以在之後按視窗上方的「檢視」重新叫出子視窗。


子視窗可以自由用滑鼠拖拉，你可以自由地移動，或者與其他子視窗結合。這裡比較不好用圖片說明，老師會示範一下給你看。你也可以參考底下的影片說明。

{%youtube JERYTJwq7u8 %}

假設你不小心把視窗弄亂了，沒關係，你可以在之後按視窗上方的「視窗」，再點選「重設視窗配置」，就可以將所有的子視窗回歸最一開始的狀態。


# 結語

其實 Visual Studio 的工作環境還有很多子視窗，以上的介紹是比較常用的，你可以先熟悉一下。

到這裡你應該基本 Visual Studio 的概念都有一些些了，接下來就開始實際的程式開發練習。

## 補充說明

寫程式其實需要你再設定視窗佈景主題的顏色，以及程式碼顯示的字型與字體大小，不僅可以更清楚的看懂程式碼，也能提升你的工作效率。請點選視窗上方的「**工具**」，再選擇「**選項**」。


接下來就會出現選項設定的視窗，這裡能夠設定 Visual Studio 的各種設定，我們首先設定視窗的佈景主題，點選「環境」頁籤，你可以改變「色彩佈景主題」。老師會建議可以選深色的，對眼睛比較舒適。


如果你覺得內建的幾種佈景主題都不滿意，你可以到以下網站找找看你喜歡的。

[Visual Studio Theme Pack](https://marketplace.visualstudio.com/items?itemName=idex.vsthemepack)

接下來我們這次要來設定程式碼的字型。點開「環境」的「字型與色彩」，就可以改變你想要的基本程式碼自行設定。

老師習慣使用的字型是「Consolas」，字體大小則是看螢幕大小，大概是 12-18 左右。你可以看你的喜好，不過老師會建議字型最好使用「等寬字型」，等寬字型在字型清單中會是粗體顯示。


甚麼是等寬字型，老師建議你可以看以下延伸閱讀，也可以順便了解為什麼程式碼的字型顯示這麼重要？

[mrkt 的程式學習筆記-換個好字型讓程式開發有效率](https://kevintsengtw.blogspot.com/2014/08/blog-post.html)