본문 바로가기

Silverlight

[Sample] Progress Bar를 알아봅시다.


 쇼티예요.

 마지막으로 Progress Bar입니다. 문법은 다음과 같습니다.

 <ProgressBar Foreground="Black" Background="Gray" Value="25" Maximum="100" Width="200" Height="20" Margin="20" x:Name="MyProgress" />

  이 각각 속성은..

  Foreground - 바(게이지)의 색깔을 설정합니다.

  Background - 컨트롤의 색깔을 설정합니다.

  Value - 100점 만점(?)에 스타팅 점수를 몇으로 할 지를 설정합니다.

  Maximum - 만점을 설정합니다.

  Width / Height / Margin - 넓이, 높이, 마진을 설정합니다. (여느 컨트롤과 동일하게..)

 

  지금 보시는 코드는 타이머로 프로그레스 바를 조정한 것입니다. 이 외에도 다운로드 양을 계산해서 움직이는 방법

  도 있겠고.. 활용 사례는 많을 것 같습니다.

 

  public partial class Page : UserControl
    {
        Storyboard _timer = new Storyboard();
       
        public Page()
        {
            InitializeComponent();
            _timer.Duration = TimeSpan.FromMilliseconds(10);
            _timer.Completed += new EventHandler(_timer_Completed);
            _timer.Begin();
        }
       
        void _timer_Completed(object sender, EventArgs e)        
        {
            if (MyProgress.Value < MyProgress.Maximum)
            {
                MyProgress.Value++;
                _timer.Begin();
            }
        }
    }

 

  이게 실행이 되면, 앞절 XAML에서 start를 25로 설정했듯이, 25에서 100으로 가는 프로그레스 바가 나타납니다.

  시작 :

 

 

  끝 :

 

 

  만약 타이머를 안 쓰고, 계속 멈추지 않게끔 할 프로그레스 바를 만든다면 IsDeterminate 속성을 true로 하시면 됩니다.  

  <ProgressBar IsIndeterminate="True"/>

 

 

  디자인이 마음에 안드세요? 그렇다면 커스터마이징도 가능해요.

  1) Brush

  2) GradientBrush

  3) LinearBrush

  4) ImageBrush

  5) LinearGradientBrush

  6) RadialGradientBrush

  7) SolidColorBrush

 

  이런걸로 말이지요. 가령 ImageBrush로 커스터마이징을 하려 할 때는..

   <ProgressBar  Value="25" x:Name="MyProgress" Maximum="100" Width="300" Height="50" Margin="20">
    <ProgressBar.Foreground>
        <ImageBrush ImageSource="Smile.png"></ImageBrush>
    </ProgressBar.Foreground>
 </ProgressBar> 

 시작 :

 

 끝 :

 

 

  감사합니다.

  ---------------------------------------------------------------------------------------------------------

  오늘은 이 세개가 올라왔는데.. 앞으로는 계속 새 컨트롤에 대해서 설명이 될꺼라는 기대감을 가져봅니다.

  수고하세요.. ^^

 [출처] 실버라이트 네이버 카페