실습 정보: SimpleScrollBar의 모양 사용자 지정

Microsoft Expression Blend에서는 SimpleScrollBar 컨트롤 템플릿을 사용하여 스크롤 막대의 모양을 쉽게 사용자 지정할 수 있습니다.

SimpleScrollBar의 모양 사용자 지정

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

   팁:
   단순한 스타일(simple style) 컨트롤은 자산 라이브러리에 있는 컨트롤 탭의 Simple Styles 범주에서 사용할 수 있습니다. 목록에서 원하는 단순한 스타일(simple style) 컨트롤을 선택한 후 아트보드에 그릴 수 있습니다.

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

   팁:
   템플릿 편집 모드를 종료하고 문서 범위로 돌아가려면 상위 범위로 이동 단추 를 클릭합니다. 이 단추는 인터랙션 패널의 요소 트리 위에 있습니다. 기존 템플릿의 템플릿 편집 모드로 돌아가려면 개체 및 타임라인에서 템플릿을 편집하려는 요소를 마우스 오른쪽 단추로 클릭하고 컨트롤 구성 요소(템플릿) 편집을 가리킨 다음 템플릿 편집을 클릭합니다.

3. 개체 및 타임라인에서 IncreaseRepeat 요소를 클릭하고 속성 패널의 브러시에서 Background 및 BorderBrush 속성의 알파 특성(색상표의 오른쪽에 있는 A로 식별)을 0%로 설정합니다.

4. 개체 및 타임라인에서 IncreaseArrow 패스 요소를 클릭한 다음 Stroke 및 Fill 속성을 흰색 단색 브러시로 설정합니다. Stroke 속성을 설정하려면 먼저 고급 속성 옵션 단추 를 클릭한 다음 다시 설정을 클릭하여 바인딩을 제거해야 합니다.

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

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

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

6. SimpleRepeatButton의 편집 범위에 있는 동안 인터랙션 패널의 트리거에서 IsMouseOver = True 및 IsPressed = True라는 각 이벤트 트리거를 선택한 다음 트리거 삭제 단추를 클릭하여 각 트리거를 삭제합니다.

7. 다음 작업 중 하나를 수행하여 SimpleScrollBar 템플릿의 편집 범위로 돌아갑니다.

   • 5단계에서 탬플릿 편집을 선택하여 Simple Styles.xaml 문서를 편집하고 있는 경우에는 아트보드의 맨 위에 있는 주 문서 탭(예: Window1.xaml 탭)을 클릭합니다. ScrollBar 요소를 마우스 오른쪽 단추로 클릭하고 컨트롤 구성 요소(템플릿) 편집을 클릭한 다음 템플릿 편집을 클릭하여 이전에 편집하고 있던 ScrollBar 템플릿으로 돌아갑니다.

   • 주 문서를 편집하고 있는 경우에는 상위 범위로 이동 단추 를 클릭합니다.

8. DecreaseRepeat 요소에 대해서도 위 단계를 반복합니다.

9. 개체 및 타임라인에서 GridRoot 요소를 두 번 클릭하여 활성화한 다음 도구 상자에서 Border 컨트롤을 클릭하여 GridRoot 안에 Border를 그립니다. 개체 및 타임라인에서 새 Border 요소를 마우스 오른쪽 단추로 클릭하고 자동 크기 조정을 가리킨 다음 채우기을 클릭하여 이 요소의 크기를 자동 조정합니다.

10. 개체 및 타임라인에서 새 Border 요소를 계속 선택하고 속성 패널의 모양에서 CornerRadius 속성을 4,4,4,4로 변경합니다. 그러면 테두리의 모퉁이가 둥글게 됩니다.

11. 개체 및 타임라인에서 [Thumb] 요소를 마우스 오른쪽 단추로 클릭하고 컨트롤 구성 요소(템플릿) 편집을 가리킨 다음 복사본 편집을 클릭합니다. ScrollBarStyle의 편집 범위에서 Rectangle 요소를 클릭한 다음 Fill 속성을 진한 회색 단색 브러시로 변경하고 왼쪽 및 오른쪽 Margin 속성을 2로 설정합니다.

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

참조

개념

SimpleScrollBar