실습 정보: SimpleListBox의 선택 항목 모양 변경
.png "This page applies to WPF projects only")
Microsoft Expression Blend에서는 SimpleListBoxItem 컨트롤 템플릿을 사용하여 목록 상자의 선택 항목 모양을 쉽게 사용자 지정할 수 있습니다.
SimpleListBox의 선택 항목 모양 변경
Expression Blend의 아트보드에 SimpleListBox를 그립니다.
.gif "팁")
팁:단순한 스타일 컨트롤은 자산 패널의 스타일 범주에 있는 단순한 스타일에서 사용할 수 있습니다. 목록에서 원하는 단순한 스타일 컨트롤을 선택한 후 아트보드에 그릴 수 있습니다.
개체 및 타임라인 패널에서 목록 상자를 마우스 오른쪽 단추로 클릭한 다음 SimpleListBoxItem 추가를 클릭하여 목록 상자에 항목을 추가합니다.
개체 및 타임라인 패널에서 목록 상자 항목 중 하나를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집을 클릭합니다. SimpleStyles.xaml 리소스 사전을 변경하지 않으려면 현재 템플릿 편집 대신 복사본 편집을 클릭하여 새 템플릿을 만들고 문서에 저장할 수 있습니다.
복사본 만들기에 대한 자세한 내용은 리소스 만들기를 참조하십시오.
팁:템플릿 편집 모드를 종료하고 문서 범위로 돌아가려면 상위 범위로 이동
.png "Cc295254.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(KO-KR,Expression.30).png")
을 클릭합니다. 개체 및 타임라인 패널의 요소 트리 위에 있습니다.기존 템플릿의 템플릿 편집 모드로 돌아가려면 개체 및 타임라인 패널에서 템플릿을 편집하려는 템플릿의 요소를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집을 클릭합니다.
트리거 패널에서 IsSelected = True를 클릭합니다. 기본적으로 항목을 선택하면 테두리 배경색이 변경되며 트리거 패널의 활성 상태인 경우 속성 아래에서 확인할 수 있습니다. 개체 및 타임라인 패널에서 Border를 클릭한 다음 속성 패널의 브러시에서 Background 속성을 수정하여 배경을 다른 색으로 변경할 수 있습니다.
팁:트리거 패널에서 속성 트리거를 선택한 경우 Expression Blend에서 원하는 대로 편집하면 값이 해당 트리거 조건에 따라 변경되도록 설정됩니다. 변경하기 전에 올바른 트리거를 선택해야 합니다. 컨트롤 템플릿의 기본 상태에 영향을 주도록 변경하려면 트리거 패널에서 기본값을 클릭하십시오.
방금 수정한 템플릿을 사용하는 목록 상자에 항목을 더 추가하려면 상위 범위로 이동
을 클릭하여 문서의 편집 범위로 돌아가서 목록 상자 요소를 두 번 클릭하여 활성화한 다음 자산 패널의 스타일 범주에서 사용자 지정 스타일을 추가할 수 있습니다.응용 프로그램을 테스트(F5 키)하여 결과를 확인합니다.
ItemContainerStyle 템플릿을 사용하여 선택 항목 모양 변경
Expression Blend의 아트보드에 SimpleListBox를 그립니다.
팁:단순한 스타일 컨트롤은 자산 패널의 스타일 범주에 있는 단순한 스타일에서 사용할 수 있습니다. 목록에서 원하는 단순한 스타일 컨트롤을 선택한 후 아트보드에 그릴 수 있습니다.
개체 및 타임라인 패널에서 목록 상자를 두 번 클릭하여 선택한 다음 사각형
.png "Cc295254.ae750268-92e8-403a-9e07-b662da4e9e1e(KO-KR,Expression.30).png")
이나 다른 컨트롤을 아트보드의 목록 상자 안에 그려 목록 상자에 여러 항목을 추가합니다. 목록 상자 요소를 마우스 오른쪽 단추로 클릭하고 SimpleListBoxItem 추가를 클릭할 수도 있습니다.팁:데이터 바인딩을 사용하여 목록 상자에 대한 항목을 자동으로 생성하려면 실습 정보: RSS 뉴스 수집기 만들기에 나와 있는 절차를 사용할 수 있습니다.
개체 및 타임라인 패널에서 ListBox 개체를 클릭합니다. 개체 메뉴에서 추가 스타일 편집과 ItemContainerStyle 편집을 차례로 가리킨 다음 복사본 편집을 클릭합니다.
스타일 리소스 만들기 창이 나타납니다. 이 절차에서는 기본값을 그대로 사용하고 확인을 클릭합니다.
Expression Blend에서 ListBoxItem 스타일의 편집 모드가 시작됩니다.
스타일 리소스 만들기 창의 옵션에 대한 자세한 내용은 리소스 만들기를 참조하십시오.
템플릿은 스타일 요소에서 래핑되므로 ListBoxItem의 템플릿을 편집하려면 개체 및 타임라인 패널에서 Style 요소를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집을 클릭합니다.
[!참고]
컨트롤 템플릿은 스타일 요소에서 래핑되고 3단계에서 복사본 편집을 클릭하여 스타일의 복사본을 만들었으므로 여기서는 복사본 편집 대신 현재 템플릿 편집을 클릭합니다.
Expression Blend에서 ListBoxItemStyleTemplate의 편집 범위가 시작됩니다. 목록 상자에서는 모든 항목에 이 템플릿을 사용합니다. 이 템플릿에는 Bd라는 Border 요소, ContentPresenter 요소 및 IsSelected 상태에 대한 트리거 두 개가 있습니다.
트리거 패널에서 IsSelected 트리거 중 하나를 클릭하여 해당 트리거의 기록 모드를 시작한 다음 Bd 요소의 속성을 변경합니다.
응용 프로그램을 테스트(F5 키)하여 결과를 확인합니다.