실습 정보: SimpleProgressBar의 진행률 표시기 사용자 지정

Microsoft Expression Blend에서는 SimpleProgressBar 컨트롤 템플릿을 사용하여 진행률 표시기의 모양을 쉽게 사용자 지정할 수 있습니다. SimpleProgressBar는 가로 방향 진행률 표시줄만 지원합니다.

SimpleProgressBar의 진행률 표시기 사용자 지정

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

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

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

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

3. 개체 및 타임라인에서 PART_Indicator 요소를 마우스 오른쪽 단추로 클릭하고 레이아웃 형식 변경을 가리킨 다음 Grid를 클릭합니다. 아트보드에서 마우스를 사용하거나 속성 패널의 레이아웃에서 Width 속성을 수정하여 PART_Indicator의 너비를 늘립니다.

4. 개체 및 타임라인 아래 표시된 PART_Indicator 요소를 두 번 클릭하여 활성화합니다.

   이제 PART_Indicator 요소가 활성화되고 Border가 아닌 Grid 패널이므로 이 요소에 자식 요소를 추가할 수 있습니다.

5. 도구 상자에서 타원 도구를 두 번 클릭하여 PART_Indicator 요소에 원을 추가하고 채웁니다. 원의 너비를 변경하면 원을 확인할 수 있습니다. 속성 패널의 브러시에서 원의 색을 수정합니다. 속성 패널의 레이아웃 아래 속성을 사용하여 원의 크기를 조정합니다. HorizontalAlignment 속성은 Stretch로 설정해야 합니다.

6. 비트맵 효과를 적용하려면 속성 패널의 모양 범주에서 고급 속성 표시 단추를 클릭하고 BitmapEffect 속성 옆에 있는 드롭다운 화살표를 클릭한 다음 후광과 같은 효과를 선택합니다.

7. 진행률 표시줄이 실행되는지 확인하려면 문서에 대한 코드 숨김 파일에 코드를 추가할 수 있습니다. 예를 들어 문서의 이름이 Window1.xaml이면 코드 숨김 파일은 프로젝트를 만들 때 선택한 프로그래밍 언어에 따라 Window1.xaml.cs 또는 Window1.xaml.vb가 됩니다.

   개체 및 타임라인에서 상위 범위로 이동 단추를 클릭하여 문서의 편집 범위로 돌아간 다음 진행률 표시줄에 "ProgressBar1"과 같은 이름을 지정합니다. 이름 주위에 표시되는 대괄호는 요소의 이름이 지정되지 않았음을 나타냅니다.

8. 프로젝트 패널에서 코드 숨김 파일을 열고 다음 코드를 추가합니다. 코드 숨김 파일을 여는 방법에 대한 자세한 내용은 코드 숨김 파일 편집을 참조하십시오.

     // Insert code required on object creation below this point.   
       Duration duration = new Duration(System.TimeSpan.FromSeconds(10));
       DoubleAnimation doubleanimation = new DoubleAnimation(ProgressBar1.Maximum, duration);
       ProgressBar1.BeginAnimation(ProgressBar.ValueProperty, doubleanimation); 
   

   ' Insert code required on object creation below this point.
       Dim duration As New Duration(System.TimeSpan.FromSeconds(10))
       Dim doubleanimation As New DoubleAnimation(ProgressBar1.Maximum, duration)
       ProgressBar1.BeginAnimation(ProgressBar.ValueProperty, doubleanimation)
   

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

참조

개념

SimpleProgressBar