다음을 통해 공유

실습 정보: SimpleListBox의 선택 항목 모양 변경

  • 아티클

이 페이지는 WPF 프로젝트에만 적용됨

Microsoft Expression Blend에서는 SimpleListBoxItem 컨트롤 템플릿을 사용하여 목록 상자의 선택 항목 모양을 쉽게 사용자 지정할 수 있습니다.

SimpleListBox의 선택 항목 모양 변경

  1. Expression Blend의 아트보드에 SimpleListBox 를 그립니다.

    tip note팁:

    단순한 스타일 컨트롤은 자산 패널의 스타일 범주에 있는 단순한 스타일에서 사용할 수 있습니다. 목록에서 원하는 단순한 스타일 컨트롤을 선택한 후 아트보드에 그릴 수 있습니다.

  2. 개체 및 타임라인 패널에서 목록 상자를 마우스 오른쪽 단추로 클릭한 다음 SimpleListBoxItem 추가를 클릭하여 목록 상자에 항목을 추가합니다.

  3. 개체 및 타임라인 패널에서 목록 상자 항목 중 하나를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집을 클릭합니다. SimpleStyles.xaml 리소스 사전을 변경하지 않으려면 현재 템플릿 편집 대신 복사본 편집을 클릭하여 새 템플릿을 만들고 문서에 저장할 수 있습니다.

    복사본 만들기에 대한 자세한 내용은 리소스 만들기를 참조하십시오.

    tip note팁:

    템플릿 편집 모드를 종료하고 문서 범위로 돌아가려면 범위 되돌리기Cc295254.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ko-kr,Expression.40).png를 클릭합니다. 이 옵션은 개체 및 타임라인 패널의 개체 트리 위에 있습니다.

    기존 템플릿의 템플릿 편집 모드로 돌아가려면 개체 및 타임라인 패널에서 템플릿을 편집하려는 템플릿의 개체를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 항목 편집을 클릭합니다.

  4. IsSelected = True 를 트리거 패널에서 클릭합니다. 기본적으로 항목을 선택하면 테두리 배경색이 변경되며 트리거 패널의 활성 상태인 경우 속성 아래에서 확인할 수 있습니다. 개체 및 타임라인 패널에서 Border 를 클릭한 다음 속성 패널의 브러시에서 Background 속성을 수정하여 배경을 다른 색으로 변경할 수 있습니다.

    tip note팁:

    트리거 패널에서 속성 트리거를 선택한 경우 Expression Blend에서 원하는 대로 편집하면 값이 해당 트리거 조건에 따라 변경되도록 설정됩니다. 변경하기 전에 올바른 트리거를 선택해야 합니다. 컨트롤 템플릿의 기본 상태에 영향을 주도록 변경하려면 트리거 패널에서 기본값을 클릭하십시오.

  5. 방금 수정한 템플릿을 사용하는 목록 상자에 항목을 더 추가하려면 범위를 {0}(으)로 되돌립니다.Cc295254.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ko-kr,Expression.40).png를 클릭하여 문서의 편집 범위로 돌아가서 목록 상자 개체를 두 번 클릭하여 활성화한 다음 자산 패널의 스타일 범주에서 사용자 지정 스타일을 추가할 수 있습니다.

  6. 응용 프로그램을 테스트(F5 키)하여 결과를 확인합니다.

ItemContainerStyle 템플릿을 사용하여 선택 항목 모양 변경

  1. Expression Blend의 아트보드에 SimpleListBox 를 그립니다.

    tip note팁:

    단순한 스타일 컨트롤은 자산 패널의 스타일 범주에 있는 단순한 스타일에서 사용할 수 있습니다. 목록에서 원하는 단순한 스타일 컨트롤을 선택한 후 아트보드에 그릴 수 있습니다.

  2. 개체 및 타임라인 패널에서 목록 상자를 두 번 클릭하여 선택한 다음 RectangleCc295254.ae750268-92e8-403a-9e07-b662da4e9e1e(ko-kr,Expression.40).png이나 다른 컨트롤을 아트보드의 목록 상자 안에 그려 목록 상자에 여러 항목을 추가합니다. 목록 상자 개체를 마우스 오른쪽 단추로 클릭하고 SimpleListBoxItem 추가를 클릭할 수도 있습니다.

    tip note팁:

    데이터 바인딩을 사용하여 목록 상자에 대한 항목을 자동으로 생성하려면 실습 정보: RSS 뉴스 수집기 만들기에 나와 있는 절차를 사용할 수 있습니다.

  3. 개체 및 타임라인 패널에서 ListBox 개체를 클릭합니다. 개체 메뉴에서 추가 스타일 편집과 ItemContainerStyle 편집을 차례로 가리킨 다음 복사본 편집을 클릭합니다.

    스타일 리소스 만들기 창이 나타납니다. 이 절차에서는 기본값을 그대로 사용하고 확인을 클릭합니다.

    Expression Blend는 ListBoxItem 스타일의 편집 모드로 전환됩니다.

    스타일 리소스 만들기 창의 옵션에 대한 자세한 내용은 리소스 만들기를 참조하십시오.

  4. 템플릿은 스타일 개체에서 래핑되므로 ListBoxItem 의 템플릿을 편집하려면 개체 및 타임라인 패널에서 Style 개체를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 항목 편집을 클릭합니다.

    [!참고]

    컨트롤 템플릿은 스타일 개체에서 래핑되고 3단계에서 복사본 편집을 클릭하여 스타일의 복사본을 만들었으므로 여기서는 복사본 편집 대신 현재 항목 편집을 클릭합니다.

    Expression Blend에서 ListBoxItemStyleTemplate 의 편집 범위가 시작됩니다. 목록 상자에서는 모든 항목에 이 템플릿을 사용합니다. 이 템플릿에는 Bd 라는 Border 개체, ContentPresenter 개체 및 IsSelected 상태에 대한 트리거 두 개가 있습니다.

  5. 트리거 패널에서 IsSelected 트리거 중 하나를 클릭하여 해당 트리거의 기록 모드를 시작한 다음 Bd 개체의 속성을 변경합니다.

  6. 응용 프로그램을 테스트(F5 키)하여 결과를 확인합니다.

참조 항목

개념

SimpleListBox 및 SimpleListBoxItem

Copyright ⓒ 2011 by Microsoft Corporation. All rights reserved.