실습 정보: 비트맵 효과를 사용하여 SimpleTabItem 사용자 지정

SimpleTabItem 템플릿을 사용하여 탭 컨트롤의 모양을 쉽게 사용자 지정할 수 있습니다.

SimpleTabItem에 비트맵 효과 추가

1. 아트보드에 SimpleTabControl을 그립니다. 기본적으로 SimpleTabControl에는 두 개의 SimpleTabItem 템플릿이 있습니다.

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

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

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

3. 컨트롤 템플릿의 편집 범위에 있는 동안 개체 및 타임라인에서 Border 요소를 선택한 다음 속성 패널에서 모양 범주 아래 고급 섹션 에서 BitmapEffect 속성 옆에 있는 드롭다운 화살표를 클릭하고 3D 가장자리를 클릭합니다. BevelWidth 속성은 기본값으로 5로 설정되어 있습니다.

4. 트리거 패널에서 IsPressed 상태를 선택하여 트리거의 기록 모드를 설정합니다. 속성 패널에서 BitmapEffect 속성 옆에 있는 드롭다운 화살표를 다시 클릭하고 3D 가장자리를 클릭한 다음 BevelWidth 속성을 25로 설정합니다.

   트리거에서 활성 상태인 경우 속성 아래에 새 줄이 나타나 마우스를 이동하여 탭 항목을 클릭할 때 발생할 속성 변경을 반영합니다.

5. 상위 범위로 이동 단추를 다시 클릭하여 문서의 편집 범위로 돌아갑니다.

6. 탭 컨트롤의 다른 탭 항목에 사용자 지정 템플릿을 적용하려면 개체 및 타임라인에서 다른 탭 항목을 마우스 오른쪽 단추로 클릭하고 컨트롤 구성 요소(템플릿) 편집과 리소스 적용을 차례로 가리킨 다음 사용자 지정 템플릿의 이름을 클릭합니다.

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

참조

개념

SimpleTabControl 및 SimpleTabItem