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