문서를 영문으로 보려면 영문 확인란을 선택하세요. 마우스 포인터를 텍스트 위로 이동시켜 팝업 창에서 영문 텍스트를 표시할 수도 있습니다.
번역
영문

경로를 따라 항목 레이아웃

PathListBox 컨트롤을 사용하여 패스를 따라 항목 목록을 표시할 수 있습니다. 패스는 모든 요소가 될 수 있으며 모든 크기 또는 도형으로 설정할 수 있습니다. 목록을 만든 후에는 PathListItems를 명시적으로 추가하거나 데이터 패널에서 데이터 소스를 추가할 수 있습니다. PathListBox ListBox 형식이므로 표준 ListBox를 수정하는 것과 같은 방법으로 PathListBox를 수정할 수 있습니다.



타원형 레이아웃 경로에 따른 ListBoxItems

방향: 없음을 표시한 레이아웃 경로 목록 항목

레이아웃 경로는 자산 패널에서 PathListBox를 추가한 다음 PathListBox에 대한 패스에 참조를 추가하거나 아트보드에서 패스 또는 개체를 만든 후 해당 개체를 마우스 오른쪽 단추로 클릭하고 패스를 가리킨 다음 레이아웃 경로 만들기를 선택하는 두 가지 방법으로 만들 수 있습니다.

PathListBox에 패스 추가

  1. 자산 패널에서 컨트롤을 확장하고 PathListBox를 클릭합니다. 아트보드에 PathListBox를 그립니다.

  2. 다음 작업 중 하나를 수행합니다.

    • 도구 패널에서 도구JJ170028.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(ko-kr,VS.120).png를 선택하고 아트보드에 패스를 그립니다.

    • 자산 패널에서 개체를 추가합니다.

  3. PathListBox를 선택한 다음 속성 패널의 레이아웃 경로 범주에서 아트보드 요소 선택아트보드 요소 선택 아이콘을 클릭하고 방금 만든 개체를 클릭하여 속성 패널의 레이아웃 경로 범주에 있는 LayoutPath 목록의 개체에 대한 참조를 만듭니다.

    참고 참고

    PathListBox 의 자식 개체를 LayoutPath로 사용할 수 없습니다.

팁

여러 레이아웃 경로를 PathListBox에 추가할 수 있습니다.

패스에서 PathListBox 만들기

  1. 다음 작업 중 하나를 수행합니다.

    • 도구 패널에서 도구JJ170028.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(ko-kr,VS.120).png를 선택하고 아트보드에 패스를 그립니다.

    • 자산 패널에서 개체를 추가합니다.

  2. 패스 또는 개체를 마우스 오른쪽 단추로 클릭하고 패스를 클릭한 다음 레이아웃 경로 만들기를 클릭합니다.

PathListBox에 예제 데이터 추가

  1. 데이터 패널에서 예제 데이터 만들기JJ170028.30540d76-7256-43ce-b5d9-4b2edf3d339f(ko-kr,VS.120).png를 클릭한 다음 새 예제 데이터를 클릭합니다. 확인을 클릭합니다.

  2. 컬렉션PathListBox로 끕니다.

팁

PathListBox항목 템플릿을 편집하여 예제 데이터 컬렉션의 속성이 렌더링되는 방법을 변경할 수 있습니다. PathListBox를 마우스 오른쪽 단추로 클릭하고 추가 템플릿 편집을 클릭한 다음 생성된 항목(ItemTemplate) 편집, 현재 항목 편집을 차례로 클릭합니다.

레이아웃 경로에 패스를 추가한 후에는 속성 패널의 해당 패스에서 항목 표시를 수정할 수 있습니다. 항목이 표시되는 순서, 표시되는 항목 수, 패스에서 항목의 방향 및 패스에 따른 항목 배포를 수정할 수 있습니다.

StartItemIndexWrapItems가 선택한 PathListBox의 모든 레이아웃 경로에 적용됩니다. 레이아웃 경로 범주의 상자에 있는 속성은 목록 세부 정보 보기이며 LayoutPaths 목록에서 선택한 패스에만 적용됩니다. 개별 패스에 대한 옵션을 변경하려면 원하는 속성을 변경하기 전에 LayoutPaths 목록에서 패스를 선택해야 합니다.

StartItemIndex 수정

  • 속성 패널의 레이아웃 경로 범주에 있는 StartItemIndex 텍스트 상자에 사용하려는 StartItemIndex의 번호를 입력합니다.

    팁

    StartItemIndex 는 목록의 첫 번째 항목을 식별하여 패스를 따라 표시되도록 합니다. 목록의 첫 번째 항목에 대한 StartItemIndex0, 두 번째 항목은 1, 세 번째 항목은 2 등입니다. 목록의 첫 번째 항목이 표시되도록 하려면 StartItemIndex0으로 유지합니다. 목록의 세 번째 항목이 패스 시작 부분에 표시되도록 하려면 StartItemIndex2로 변경합니다.

항목 래핑 수정

  • StartItemIndex가 0보다 큰 경우 WrapItems를 사용하여 컬렉션의 모든 항목을 표시하도록 설정할 수 있습니다. 목록의 끝 부분에 도달한 후 목록의 첫 번째 항목으로 목록이 계속되도록 하려면 속성 패널의 레이아웃 경로 범주에서 WrapItems 확인란을 선택합니다. 목록의 마지막 항목에 도달할 때 목록을 끝내려면 WrapItems 확인란을 지웁니다.

패스에 따른 항목 배포 수정

  • 배포 상자에서 다음 중 하나를 선택합니다.

    • 균등(Even) 패스를 따라 균등하게 항목을 배포합니다.

    • 안쪽 여백(Padded) 항목의 크기 및 Padding 속성을 기반으로 패스를 따라 항목을 배포합니다.

레이아웃 경로 용량 수정

  • 레이아웃 경로를 따라 표시되는 항목 수를 변경하려면 용량 상자의 숫자를 변경합니다. 예를 들어 용량이 5이면 목록에 최대 5개 항목이 표시됩니다. 자동 용량은 패스 수로 나눈 항목 수를 나타냅니다. 예를 들어 자동으로 설정하면 단일 패스에 대한 목록의 모든 항목이 표시됩니다. 두 개 패스가 있는 경우 항목은 두 개 목록 간에 동일하게 나눠집니다.

개체 사이의 안쪽 여백 수정

  • 레이아웃 경로의 배포안쪽 여백(Padded)으로 설정된 경우 패스 개체 사이의 안쪽 여백을 안쪽 여백 상자에 지정할 수 있습니다. 안쪽 여백을 변경하려면 안쪽 여백 상자 안쪽을 클릭하고 위쪽 화살표 및 아래쪽 화살표 키를 사용하거나 숫자를 상자에 직접 입력합니다.

    팁

    필드 안쪽을 클릭하고 마우스 휠을 회전시켜 값을 변경할 수도 있습니다.

레이아웃 경로에서 개체 방향 수정

  • 위쪽에서 아래쪽, 왼쪽에서 오른쪽의 표준 개체 방향을 패스에서 유지하려면 방향 목록에서 NonePathListBox 방향: 없음을 선택합니다. 패스의 차이에 따라 개체 방향을 지정하려면 방향 목록에서 OrientToPathPathListBox 아이콘 방향: OrientToPath를 선택합니다.



    방향: None

    방향: 없음을 표시한 레이아웃 경로 목록 항목

    방향: OrientToPath

    OrientToPath를 표시한 레이아웃 경로 목록 항목

목록의 시작 지점 수정

  • 백분율을 기반으로 하는 시작 옵션을 사용하여 패스의 어느 곳에서도 목록을 시작할 수 있습니다. 예를 들어 패스의 1/4 지점에서 목록을 시작하려면 시작 상자에 25를 입력합니다.

목록 범위 수정

  • 범위 옵션을 사용하여 패스에 따라 목록의 범위를 수정할 수 있습니다. 예를 들어 목록의 범위를 패스의 50%로 지정하려면 범위 상자에 50을 입력합니다.

    범위 상자는 시작 상자와 결합하여 사용할 수 있습니다. 예를 들어 목록의 범위를 50%로 지정하지만 목록이 패스의 중간 지점에서 시작하도록 하려면 시작 상자에 50을 입력하고 범위 상자에 50을 입력합니다.

팁

레이아웃 경로의 시작범위 속성에 애니메이션을 적용하여 재미있는 효과를 만들 수 있습니다.

팁

스토리보드에서 패스 지점에 애니메이션 효과를 적용할 때 PathListBox의 항목은 자신의 위치에서 자동으로 업데이트됩니다.

채우기 동작 수정

  • FillBehavior 상자에서 다음 중 하나를 선택합니다.

    • NoOverlap 레이아웃 경로가 열린 패스이고 시작 속성에 애니메이션 효과를 적용하려면 FillBehavior 드롭다운 목록에서 NoOverlap을 선택합니다. 이 옵션은 패스를 따라 항목의 레이아웃을 설정하는 데 사용되는 효과 범위를 줄이고 목록 항목이 레이아웃 경로의 시작 부분으로 돌아갈 때 패스 중첩 부분에 있는 항목 없이 시작 속성에 애니매이션 효과를 적용하기 위한 충분한 공간이 생기도록 합니다.

    • FullSpan 레이아웃 경로의 전체 범위가 사용되도록 하려면 FillBehavior 드롭다운 목록에서 FullSpan을 선택합니다. 예를 들어 열린 패스를 사용할 때 배포 드롭다운 목록에서 균등(Even)을 선택하고 FillBehavior 드롭다운 목록에서 FullSpan을 선택한 경우 항목은 패스의 시작 부분 및 종료 부분에 나타납니다.

패스에 따라 모든 UI(사용자 인터페이스) 요소의 레이아웃을 설정하고 원하는 대로 요소의 스타일을 지정할 수 있습니다. 다음 예에서는 TextBlock이 아트보드에 추가됩니다. 그런 다음 PathListBox에 데이터 바인딩됩니다. 마지막으로 더 많은 시각적 효과를 만들기 위해 스타일이 지정됩니다.

패스에 따라 텍스트의 레이아웃 설정

  1. 자산 패널에서 도형을 클릭한 다음 파이를 클릭합니다. 아트보드에 파이 도형을 그립니다.

  2. 파이 도형을 마우스 오른쪽 단추로 클릭하고 패스를 클릭한 다음 레이아웃 경로 만들기를 클릭합니다.

  3. 도구 패널에서 TextBlockJJ170028.42165963-00f7-4a33-abcd-b0849edebada(ko-kr,VS.120).png을 클릭합니다. 아트보드에 TextBlock을 그리고 일부 텍스트를 추가합니다.

  4. 개체 및 타임라인 패널에서 PathListBox를 클릭합니다. 속성 패널의 공용 속성 범주에서 고급 옵션(ItemSource 옆에 있음)을 클릭한 다음 Data Binding을 클릭합니다.

    팁

    속성 패널의 검색 상자에 ItemSource를 입력하여 ItemSource를 빠르게 찾을 수 있습니다.

  5. 데이터 바인딩 만들기 대화 상자에서 요소 속성을 클릭합니다. 화면 요소 창에서 TextBlock을 클릭합니다.

  6. 속성 창 아래에 있는 표시 드롭다운 목록에서 모든 속성을 클릭합니다.

  7. 속성 창에서 Text: (문자열)을 클릭합니다. 확인을 클릭합니다.

이제 TextBlock의 텍스트 스타일을 지정하여 시각적 효과를 추가할 수 있습니다.

TextBlock을 표시하는 PathListBox의 예
표시: