연습: 화면 디자인
이 연습에는 LightSwitch 화면 디자이너를 사용하여 Northwind 샘플 데이터베이스에서 고객 데이터를 표시하는 화면을 만드는 방법을 보여 줍니다.화면 디자이너는 화면 모양을 수정할 수 있는 시각적 디자인 캔버스입니다.
이 연습에서는 다음 작업을 수행하는 방법을 보여 줍니다.
화면 만들기
화면 레이아웃 변경
화면에서 필드 제거
항목의 순서 변경
항목의 표시 이름 변경
항목의 컨트롤 형식 변경
실행 중인 응용 프로그램에서 화면 사용자 지정
사전 요구 사항
이 연습에서는 Northwind 샘플 데이터베이스가 컴퓨터에 설치되어 있고 그것을 프로젝트에 데이터 원본으로 추가한 것을 가정합니다.
Northwind 샘플 데이터베이스 설치 방법에 대한 내용은 Northwind 샘플 데이터베이스 설치를 참조하십시오.
프로젝트에서 데이터 소스로 Northwind 샘플 데이터베이스를 추가하는 방법에 대한 내용은 데이터에 연결를 참조하십시오.
화면 만들기
이 단원에서는 Northwind 샘플 데이터베이스에서 고객 데이터를 표시하기 위해 화면을 만드는 방법을 보여 줍니다.이 화면은 두 부분으로 나누어 집니다.첫 번째 부분은 모든 고객의 요약 목록을 표시하고 나머지 다른 부분은 선택된 고객에 대한 세부 정보를 표시합니다..
화면 생성
솔루션 탐색기에서 화면을 선택합니다.
프로젝트 메뉴에서 화면 추가를 클릭합니다.
새 화면 추가 대화 상자가 나타납니다.
새 화면 추가 대화 상자에서 화면 템플릿 선택 아래에 있는 목록 및 세부 정보 화면을 선택합니다.
화면 이름 아래에 고객을 입력합니다.
화면 데이터 아래의 드롭다운 목록에서 <DataSourceName>.고객을 선택합니다.
포함할 추가 데이터에서 고객 세부 정보 및 고객 주문을 선택합니다.
이것은 화면의 세부 부분에 고객 엔터티 필드를 고객이 주문한 주문 목록과 함께 추가합니다.
다음 그림은 이 단원의 단계를 수행한 후 나타나는 대화 상자를 보여 줍니다.
.png "새 화면 추가 대화 상자")
확인을 클릭하여 화면을 만듭니다.
화면 디자이너가 나타납니다.
화면 레이아웃 변경
목록 및 세부 정보 화면에는 두 개의 열이 있습니다.왼쪽 열은 고객 목록입니다.오른쪽 열에 두 개의 행이 포함됩니다.위쪽 행에는 선택한 고객의 세부 정보가 포함되고 아래쪽 행에는 선택한 고객과 관련된 주문이 포함됩니다.화면 디자이너의 화면 콘텐츠 트리는 이 목록의 구성을 보여 줍니다.
이 단원에서는 화면의 레이아웃을 수정하여 화면에 두 개의 열이 아닌 두 개의 행이 포함되도록 하는 방법에 대해 보여 줍니다.위쪽 행에 고객 목록이 포함됩니다.아래쪽 행에 두 개의 열이 포함됩니다.왼쪽 열에는 선택한 고객의 세부 정보가 포함되고 오른쪽 열에는 선택한 고객과 관련된 주문이 포함됩니다.
목록의 레이아웃 변경
화면 디자이너의 화면 콘텐츠 트리에서 고객 노드의 레이아웃을 고객에서 열 레이아웃으로 변경합니다.이 작업을 수행하려면 고객 노드 옆에 나타나는 아래쪽 화살표를 클릭합니다.그런 다음 드롭다운 목록에서 행 레이아웃을 클릭합니다.
세부 정보 열의 레이아웃을 행 레이아웃에서 열 레이아웃으로 변경합니다.이 작업을 수행하려면 세부 정보 열 노드에 나타나는 아래쪽 화살표를 클릭한 다음 열 레이아웃을 클릭합니다.
화면에서 필드 제거
기본적으로 세부 정보 열이라고 하는 고객의 세부 정보가 표시되는 화면 영역에 데이터 소스의 모든 필드가 표시됩니다.모든 필드를 표시하지 않으려면 원하지 않는 필드를 제거할 수 있습니다.예를 들어, 다음 단계에서는 국가 필드를 제거하는 방법을 보여 줍니다.
화면에서 필드 제거
화면 콘텐츠 트리에서 고객 세부 정보 노드를 확장합니다(축소되어 있는 경우).
국가 필드를 클릭한 다음 화면 디자이너 명령 모음에서 삭제를 클릭합니다.
필드 순서 변경
다음 단계는 예를 들어 CustomerID 필드 및 Postal Code 필드와 같은 필드의 표시 순서를 변경하는 방법을 보여 줍니다.
필드 순서 변경
화면 콘텐츠 트리에서 고객 세부 정보 노드를 확장합니다(축소되어 있는 경우).
CustomerID 필드를 세부 정보 열 아래쪽으로 이동하려면 팩스 필드 아래로 끌어 놓습니다.
우편 번호 필드를 고객 ID 바로 위에 이동하려면 팩스와 CustomerID 사이에 끌어 놓습니다.
필드의 컨트롤 형식 변경
필드를 사용자에게 표시할 방법을 사용자 지정할 수 있습니다.예를 들어, 텍스트 필드를 TextBox 또는 Label로 표시되도록 설정할 수 있습니다.다음 단계는 표시 필드를 Label 필드로 변경하여 사용자가 값을 수정할 수 없게 하는 방법을 보여 줍니다.
필드의 컨트롤 형식 변경
화면 콘텐츠 트리에서 고객 세부 정보 노드를 확장합니다(축소되어 있는 경우).
고객 ID 필드를 선택한 다음 드롭다운 목록에서 레이블을 선택합니다.
이 단계를 반복해서 다른 필드를 변경할 수 있습니다.
변경 사항을 테스트하려면 F5 키를 눌러 응용 프로그램을 실행합니다.
실행 중인 응용 프로그램에서 화면 사용자 지정
또한 응용 프로그램을 실행하는 동안 화면을 사용자 지정할 수 있습니다.예를 들어, 필드 제거, 필드 순서 변경 및 컨트롤 형식이나 레이블 맞춤과 같은 속성을 변경할 수 있습니다.
실행 중인 응용 프로그램에서 화면 사용자 지정
응용 프로그램을 실행하지 않았으면 F5 키를 눌러 시작합니다.
화면의 명령 모음에서 디자인 화면을 클릭합니다.
사용자 지정 모드 화면의 고객 세부 정부 노드에서 선택한 다음 삭제(
.png "선택한 항목 삭제")
) 단추를 클릭하여 세부 정보 열에서 고객 ID 필드를 제거합니다.우편 번호 필드 아래에 있는 팩스 필드를 고객 세부 정보 노드에서 선택한 다음 아래로 이동(
.png "목록의 하위 위치로 항목 이동")
) 단추를 클릭하여 이동합니다.고객 세부 정보 노드에서 전화 필드를 선택하여 이름을 전화 번호로 변경하고 속성 창에서 표시 이름 속성 값을 전화 번호로 변경합니다.
고객 세부 정보 노드에서 필드를 선택하고 속성 창에서 컨트롤 형식 속성을 클릭한 후 레이블 값을 선택하여 전화 번호 필드의 표시 형식을 Label로 변경합니다.
세부 정보 열에서 레이블의 맞춤을 변경합니다.고객 세부 정보 노드에서 첫 번째 필드를 선택합니다. 이 경우는 회사 이름 필드를 선택합니다.속성 창에서 레이블 위치 속성을 클릭한 후 오른쪽 정렬 값을 선택합니다.고객 세부 정보 노드의 모든 필드에 대해 이 단계를 반복합니다.
변경 내용을 저장하려면 저장을 클릭합니다.응용 프로그램에 사용자가 방금 지정한 변경 사항이 표시됩니다.
다음 단계
기본적으로 화면에 대한 데이터 소스를 선택할 때 소스에 있는 모든 데이터가 표시됩니다.데이터의 하위 집합만 표시하려면 표시할 데이터를 정의하는 쿼리를 만들 수 있습니다.자세한 내용은 방법: 쿼리 디자이너를 사용하여 쿼리 디자인를 참조하십시오.