逐步解說:在 LightSwitch 中設計 Silverlight 螢幕

 

如需 Visual Studio 2017 的最新文件請參閱 Visual Studio 2017 文件

本逐步解說示範如何使用 LightSwitch 螢幕設計工具建立螢幕,以顯示 Northwind 範例資料庫中的客戶資料。 螢幕設計工具是可用來修改螢幕外觀的視覺化設計畫布。

本逐步解說示範如何執行下列工作:

  • 建立螢幕

  • 變更螢幕的配置

  • 從螢幕中移除欄位

  • 變更項目的順序

  • 變更項目的顯示名稱

  • 變更項目的控制項類型

  • 在執行中的應用程式中自訂螢幕

這個逐步解說是假設您已經將 Northwind OData 服務加入至您的專案中做為資料來源。

如需如何加入 Northwind OData 服務做為專案中的資料來源的詳細資訊,請參閱連接到資料

本節說明如何建立螢幕以顯示 Northwind 範例資料庫中的客戶資料。 此螢幕分為兩個部分。 第一個部分會顯示所有客戶的摘要清單,另一個部分則顯示所選取客戶的詳細資料。

若要建立螢幕

  1. 在 [方案總管] 中,開啟 [Screens] 節點的捷徑功能表,然後選擇 [開啟]。

  2. 在功能表列上,選擇 [專案]、[加入螢幕]。

    [加入新螢幕] 對話方塊隨即開啟。

  3. 在 [選取螢幕範本] 清單中,選擇 [清單和詳細資料螢幕]。

  4. 在 [螢幕名稱] 文字方塊中,輸入 Customers

  5. 在 [螢幕資料] 清單中,選擇 [DataSourceName.Customers]。

  6. 在 [要包含的其他資料] 區段中,選取 [Customer Details] 和 [Customer Orders] 核取方塊。

    這樣會將 [Customer] 實體的欄位與客戶所下訂單的清單一起加入至螢幕的詳細資料部分。

    下圖顯示您執行了本節的步驟之後,對話方塊顯示出來的外觀。

    [加入新螢幕] 對話方塊

  7. 選擇 [確定] 按鈕以建立螢幕。

    [螢幕設計工具] 隨即出現。

[清單和詳細資料] 螢幕具有兩欄資料。 左邊那一欄是一份客戶清單。 右邊那一欄包含兩列資料。 上方的資料列包含所選客戶的詳細資料,下方的資料列則包含與所選客戶相關的訂單。 螢幕設計工具的螢幕內容樹狀結構會顯示此清單的組成方式。

本節說明如何修改螢幕的配置,使螢幕包含兩列資料,而不是兩欄資料。 上方的資料列會包含客戶清單, 下方的資料列會包含兩欄資料。 左邊的資料行會包含所選客戶的詳細資料,右邊的資料行則包含與所選客戶相關的訂單。

若要變更清單的配置

  1. 在 [螢幕設計工具] 的 [螢幕內容樹狀結構] 中,選擇顯示在 [Customers] 節點旁邊的向下箭號,然後選擇 [資料列配置]。

    [Customers] 節點的配置就會從 [資料行配置] 變更為 [資料列配置]。

  2. 選擇顯示在 [Details Column] 節點旁邊的向下箭號,然後選擇 [資料行配置]。

    [Details Column] 的配置就會從 [資料列配置] 變更為 [資料行配置]。

根據預設,螢幕上顯示客戶詳細資料的區域 (名為 [Details Column]) 會顯示來自資料來源的所有欄位。 如果您不要顯示所有欄位,可以將不要的欄位移除。 例如,下列步驟會示範如何移除 [Country] 欄位。

若要從螢幕中移除欄位

  1. 在 [螢幕內容樹狀結構] 中展開 [Customer Details] 節點 (如果尚未展開)。

  2. 選擇 [Country] 欄位,然後在 [螢幕設計工具] 的命令列上,選擇 [刪除] 命令。

下列步驟會示範如何變更欄位 (例如 CustomerID 欄位和 Postal Code 欄位) 的顯示順序。

若要變更欄位的順序

  1. 在 [螢幕內容樹狀結構] 中展開 [Customer Details] 節點 (如果尚未展開)。

  2. 將 [CustomerID] 欄位拖曳至 [Fax] 欄位下方,讓該欄位移動至詳細資料行的底部。

    System_CAPS_ICON_note.jpg 注意

    您也可以開啟 [CustomerID] 欄位的捷徑功能表,選擇 [剪下],開啟 [Fax] 欄位的捷徑功能表,然後選擇 [貼上]。

  3. 將 [Postal Code] 欄位拖曳至 [Fax] 欄位和 [Customer ID] 欄位之間,讓該欄位移動至 [Customer ID] 欄位的正上方。

您可以自訂向使用者顯示欄位的方式。 例如,您可以設定文字欄位顯示為 LabelTextBox。 下列步驟會示範如何將顯示欄位變更為 Label 欄位,讓使用者無法修改它的值。

若要變更欄位的控制項類型

  1. 在 [螢幕內容樹狀結構] 中展開 [Customer Details] 節點 (如果尚未展開)。

  2. 開啟 [Customer ID] 欄位的清單,然後選擇 [標籤]。

    您可以重複此步驟以變更其他欄位。

  3. 若要測試變更,請選擇 F5 鍵執行應用程式。

當應用程式正在執行時,您也可以自訂螢幕。 例如,您可以移除欄位、變更欄位順序以及變更屬性 (例如控制項類型或標籤對齊方式)。

若要在執行中的應用程式中自訂螢幕

  1. 如果您的應用程式並不是正在執行,請選擇 F5 鍵來啟動它。

  2. 在螢幕命令列上,選擇 [設計螢幕] 連結。

  3. 在 [自訂模式] 螢幕中,選擇 [Customer Details] 節點中的 [Customer ID] 欄位,然後選擇工具列上的 [刪除] (刪除選取的項目。) 按鈕,從詳細資料行移除該欄位。

  4. 在 [Customer Details] 節點中,選擇 [Fax] 欄位,然後選擇工具列上的 [下移] (將項目移至清單中較低的位置。) 按鈕。

    [Fax] 欄位就會出現在 [Postal Code] 欄位下方。

  5. 在 [Customer Details] 節點中,選擇 [Phone] 欄位,然後在 [屬性] 視窗中,將 [顯示名稱] 屬性設定為 Phone Number

  6. 在 [Customer Details] 節點中,選擇 [Phone Number] 欄位,然後在 [屬性] 視窗中,將 [控制項類型] 屬性設定為 [標籤]。

  7. 在 [Customer Details] 節點中,選擇 [Company Name] 欄位,然後在 [屬性] 視窗中,將 [標籤位置] 屬性設定為 [靠右對齊]。

  8. 對 [Customer Details] 節點中的所有欄位重複這個步驟,然後選取 [儲存] 按鈕。

    您的應用程式現在會顯示您剛才所做的變更。

當您選擇螢幕的資料來源時,預設會顯示來源中的所有資料。 如果您只要顯示資料的子集,則可以建立查詢來定義要顯示的資料。 請參閱 如何:使用查詢設計工具設計查詢

螢幕:LightSwitch 應用程式的使用者介面

顯示: