다음을 통해 공유

실습 정보: SimpleComboBox의 확장 단추 모양 사용자 지정

  • 아티클

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

Microsoft Expression Blend에서는 SimpleComboBox의 ToggleButton 컨트롤 템플릿을 사용하여 콤보 상자에 있는 확장 단추의 모양을 쉽게 사용자 지정할 수 있습니다.

SimpleComboBox의 확장 단추 사용자 지정

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

    Cc294708.alert_tip(ko-kr,Expression.10).gif팁:

    단순한 스타일(simple style) 컨트롤은 자산 라이브러리Cc294708.0224cabd-5da1-4e01-bddd-4a647401a098(ko-kr,Expression.10).png에 있는 컨트롤 탭의 Simple Styles 범주에서 사용할 수 있습니다. 목록에서 원하는 단순한 스타일(simple style) 컨트롤을 선택한 후 아트보드에 그릴 수 있습니다.

  2. 개체 및 타임라인 아래 표시된 콤보 상자를 마우스 오른쪽 단추로 클릭한 다음 SimpleComboBoxItem 추가를 클릭하여 콤보 상자에 항목을 추가합니다.

  3. 위의 단계를 반복하여 콤보 상자에 하나 또는 두 개의 항목을 더 추가합니다.

  4. 개체 및 타임라인에서 ComboBox를 마우스 오른쪽 단추로 클릭하고 컨트롤 구성 요소(템플릿) 편집을 가리킨 다음 템플릿 편집을 클릭합니다. SimpleStyles.xaml 리소스 사전을 변경하지 않으려면 템플릿 편집 대신 복사본 편집을 클릭하여 새 템플릿을 만들고 문서에 저장할 수 있습니다. 복사본 만들기에 대한 자세한 내용은 리소스 만들기를 참조하십시오.

    Cc294708.alert_tip(ko-kr,Expression.10).gif팁:

    템플릿 편집 모드를 종료하고 문서 범위로 돌아가려면 상위 범위로 이동 단추 Cc294708.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ko-kr,Expression.10).png를 클릭합니다. 이 단추는 인터랙션 패널의 요소 트리 위에 있습니다.

    기존 템플릿의 템플릿 편집 모드로 돌아가려면 개체 및 타임라인에서 템플릿을 편집하려는 요소를 마우스 오른쪽 단추로 클릭하고 컨트롤 구성 요소(템플릿) 편집을 가리킨 다음 템플릿 편집을 클릭합니다.

  5. 컨트롤 템플릿의 편집 범위에서 개체 및 타임라인 아래의 노드를 모두 확장합니다.

  6. 개체 및 타임라인에서 ToggleButton 요소를 마우스 오른쪽 단추로 클릭하고 컨트롤 구성 요소(템플릿) 편집을 가리킨 후 다음 작업 중 하나를 수행합니다.

    • 4단계에서 템플릿 편집을 선택한 경우 템플릿 편집을 클릭하여 SimpleStyles.xaml에 저장되어 있는 ExpanderToggelButton 컨트롤 템플릿을 편집합니다.

    • 4단계에서 복사본 편집을 선택한 경우 복사본 편집을 클릭하여 ExpanderToggelButton 컨트롤 템플릿의 복사본을 만들고 ComboBox의 템플릿과 같은 위치에 저장합니다.

    확장 단추의 모양은 ExpanderToggelButton 컨트롤 템플릿에서 디자인됩니다. 템플릿의 모눈이 콤보 상자의 전체 너비에 맞게 확장됩니다. 이 디자인을 사용하면 사용자가 콤보 상자 내에서 클릭하는 위치에 관계없이 드롭다운 목록이 나타납니다.

  7. 개체 및 타임라인에서 Arrow 요소를 선택하여 아트보드에서 식별합니다. Arrow 요소는 ComboBox 컨트롤의 확장 단추를 나타내는 패스입니다.

    직접 선택 도구 Cc294708.6dd6571f-c116-451d-8dd2-1f88b8406362(ko-kr,Expression.10).png로 패스의 점을 조정하여 Arrow 요소를 수정할 수 있습니다. 또는 Arrow 요소를 삭제한 다음 도구 상자에서 펜 도구 Cc294708.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(ko-kr,Expression.10).png를 사용하여 새 요소를 만들 수 있습니다.

    Cc294708.alert_tip(ko-kr,Expression.10).gif팁:

    아트보드를 확대하려면 아트보드의 아래쪽에 있는 확대/축소 텍스트 상자 Cc294708.12524287-c48b-4cfc-b614-01951207239d(ko-kr,Expression.10).png를 사용하거나 Ctrl 키를 누른 채 마우스의 스크롤 단추를 사용할 수 있습니다.
    Cc294708.alert_tip(ko-kr,Expression.10).gif팁:

    펜 도구를 사용하여 패스 요소를 그리는 대신 Microsoft Expression Design 2에서 가져온 아트 리소스를 사용하거나 프로젝트에 추가된 이미지 파일을 사용할 수 있습니다.

  8. 확장 단추를 클릭할 때의 롤오버 효과는 ToggleButton 컨트롤 템플릿에서 Rectangle 요소의 모양을 변경하는 속성 트리거에 의해 정의됩니다. 기존 트리거에 새로운 속성 변경을 추가하여 확장 단추를 클릭할 때 Arrow 요소가 회전하도록 할 수 있습니다. 개체 및 타임라인에서 Arrow 요소를 선택하고 인터랙션 패널의 트리거에서 IsChecked = True를 클릭한 다음 속성 패널의 변형에서 회전 탭을 클릭하고 Angle 텍스트 상자에 180을 입력합니다.

    사용자가 확장 단추를 클릭하여 콤보 상자를 확장하면 Arrow 요소가 180도 회전하고 다시 클릭하면 원래 회전으로 돌아옵니다.

    Cc294708.alert_tip(ko-kr,Expression.10).gif팁:

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

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

참조

개념

SimpleComboBox 및 SimpleComboBoxItem