GUI Designer 목록 컨트롤 사용 설명서

freeFree Technical Resource

This content is free to read, suitable for basic learning and search traffic.

GUI Designer 목록 컨트롤 사용 설명서
1. 목록 컨트롤 소개 목록 컨트롤 은 콘텐츠 가 불확실 하지만 메시지 목록 , 레 코 드 목록 , 계 정 목록 등 과 같은 동일한 컨트롤 및 표시 를 갖는 데 사용됩니다 . 목록 컨트롤 을 추가 하는 방법 열린 프로젝트 또는 새 프로젝트 에서 도구 상 자 에서 표준 컨트롤 을 클릭 하고 목록 컨트롤 을 클릭 하여 그림 2. 1 과 같이 목록 컨트롤 을 추가 합니다 .
GUI Designer 목록 컨트롤 사용 설명서Figure
그림 2. 1 컨트롤 추가 목록 의 위치 크기 및 이미지 대체 를 설정 하는 방법 3. 1 목록 의 위치 와 크 기를 설정 하는 방법 목록 컨트롤 을 선택 하고 오른쪽 속 성 창 에서 마 우스 또는 공 용 을 클릭 하여 컨트롤 의 위치 와 크 기를 수정 할 수 있습니다 ( 그림 3. 1 과 같이 ).
GUI Designer 목록 컨트롤 사용 설명서Figure1
그림 3. 1 위치 크기 설정 3. 1 목록 에 대한 이미지 대체 를 설정 하는 방법 목록 컨트롤 을 선택 하고 오른쪽 속 성 창 을 클릭 하면 이미지 수정 , 그림 3. 2 와 같이 목록 컨트롤 의 밑 면 표시 배경 이 표시 됩니다 .
GUI Designer 목록 컨트롤 사용 설명서Figure2
그림 3. 2 이미지 대체 4. Mis cell ane ous 를 설정 하는 방법 오른쪽 속 성 창 에서 를 클릭 합니다 .
GUI Designer 목록 컨트롤 사용 설명서Figure3
그림 4. 1 과 같이 목록 컨트롤 의 하 위 항목 , 항목 간 격 및 항목 배 열 을 설정 할 수 있습니다 .
GUI Designer 목록 컨트롤 사용 설명서Figure4
그림 4. 1 기타 설정 4. 1 하 위 항목 설정 방법 / / span & gt ; 설정 버튼 을 클릭 하여 그림 4. 2 와 같이 설정 하 위 항목 창 을 팝 업 합니다 .
GUI Designer 목록 컨트롤 사용 설명서Figure5
그림 4. 2 하 위 항목 설정 1) 위치 와 크 기를 설정 하는 방법 하 위 항목 을 클릭 하면 마 우스 또는 오른쪽 속 성 창 에서 공통 하 위 항목 의 위치 및 크 기를 클릭 하여 설정 할 수 있습니다 . 그림 4. 3 과 같이 표시 됩니다 .
GUI Designer 목록 컨트롤 사용 설명서Figure6
그림 4. 3 하 위 항목 위치 및 크기 설정 2 차 하 위 항목 의 이미지 대체 를 설정 하는 방법 하 위 항목 을 선택 하고 오른쪽 속 성 창 을 클릭 하여 이미지 수 정을 할 수 있으며 " 추 가 " 를 클릭 하여 상태 표시 를 누 릅니다 . 팝 업 상태 는 목록 이 작동 하지 않을 때 표시 되는 그림 이며 , 누 름 상태 는 그림 4. 3 과 같이 목록 이 누 른 후 표시 되는 그림 입니다 .
GUI Designer 목록 컨트롤 사용 설명서Figure7
그림 4. 3 이미지 대체 주 : 이미지 표시 선택 단 색 3. 하 위 항목 을 설정 하는 방법 하 위 항목 을 선택 하면 하 위 항목 에 문자 컨트롤 및 버튼 컨트롤 과 같은 컨트롤 을 추가 하여 목록 내용을 표시 하고 그림 4. 4 와 같이 두 개의 문자 컨트롤 을 추가 할 수 있습니다 .
GUI Designer 목록 컨트롤 사용 설명서Figure8
그림 4. 4 문자 컨트롤 추가 4. 문자 컨트롤 을 설정 하는 방법 문자 컨트롤 을 선택 하고 오른쪽 속 성 창 에서 변 수 바 인 딩 을 클릭 합니다 → 추가 를 클릭 합니다 → 바 인 딩 된 컨트롤 속 성은 " 텍 스트 1" → 데이터 소 스 바 인 딩 " Var 0 " → 구조 체 멤버 선택 " m ember 1 " (두 번째 문자 컨트롤 은 member 2 를 선택 합니다 , 나머지는 동일) → 변환 모 드는 " 단 방 향 " → 변환 방법은 그림 4. 5 와 같이 " 기 본 값 " 입니다 .
GUI Designer 목록 컨트롤 사용 설명서Figure9
그림 4. 5 변 수 바 인 딩 추가 주 : Var 0 은
GUI Designer 목록 컨트롤 사용 설명서Figure10
4. 2 항목 간 격을 설정 하는 방법 항목 너 비 / 높이 간 격 아래 의 입력 상 자를 클릭 하면 키 보 드 또는 " + "- " 버튼 을 통해 항목 너 비 / 높이 간 격을 설정 할 수 있습니다 . 항목 너 비 간 격 은 목록 의 각 항목 의 너 비 간 격 이며 항목 높이 간 격 은 그림 4. 6 과 같이 목록 의 각 항목 쌍 의 높이 간 격 입니다 .
& lt ; w ra div class = " ne - image -p ne - image - loaded ne - image - style - none " data - testid =" ne - card - image ">
GUI Designer 목록 컨트롤 사용 설명서Figure11
그림 4. 6 항목 간격 설정 4. 3 항목 배열을 설정하는 방법 그림 4. 7 과 같이 항목 배열 아래의 드롭다운 상자를 클릭하면 세로 및 가로 선택이 있습니다.
GUI Designer 목록 컨트롤 사용 설명서Figure12
그림 4. 7 항목 배열방식 5. 목록 표시를 설정하는 방법 목록 컨트롤을 통해 목록으로 동적으로 표시됩니다. 목록 컨트롤을 추가하는 방법 구체적으로 추가하는 방법은 위에서와 같아서 여기서 더 이상 반복하지 않는다. 2) 자식 설정 방법 구체적인 설정 방법은 위에서와 같아서 여기서 더 이상 반복하지 않는다. 목록의 변수 바인딩을 설정하는 방법 목록 컨트롤을 선택하고 오른쪽 속성 창에서 변수 바인딩 → 추가 → 바인딩된 컨트롤 속성은 "데이터 소스" → 데이터 소스 바인딩 "Var 0" → 변환 모드는 "단방향" → 변환 방법은 그림 5. 1 과 같이 "기본값" 입니다.
GUI Designer 목록 컨트롤 사용 설명서Figure13
그림 5. 1 변수 바인딩 4. 시뮬레이션 시연 시뮬레이션 실행 버튼을 클릭하여 시뮬레이션 실행 창을 팝업하고 목록이 표시되지 않을 때 그림 5. 2 와 같이 표시됩니다.
GUI Designer 목록 컨트롤 사용 설명서Figure14
그림 5. 2 작업이 없는 경우 표시 그림 5. 3 과 같이 누르면 목록이 표시됩니다.
GUI Designer 목록 컨트롤 사용 설명서Figure15
Related Tags
Put this resource to use in a real project?

Go to the Tool Center for message parsing, CRC verification and device debugging, or submit your requirements for selection and integration advice.

Open Debug Tools View Related Products
Engineer Membership

Turn this article into actionable debugging resources

After activation, you can use advanced message parsing, resource pack downloads, code examples, engineering cases and priority technical support, suitable for real project delivery.

Unlimited Advanced Tools
Resource & Code Packs
Complete Engineering Case Library
Priority Technical Support

Leave a Reply

Your email address will not be published. Required fields are marked *.