Silverlight 2.0 içerisinde ProgressBar kullanımı

.NET Framework'ün ufak bir paketini içerse de Silverlight ile web tarayıcısı içerisinde büyük mucizeler yaratmak mümkün. .NET'in JavaScript gibi scripting dillerine kıyasla işlemci kullanımındaki hakimiyetini de düşündüğümüzde istemci tarafında yapacağımız işlemlerin yoğunluğun artacağı kesin. Tüm bu işlemler süresince tabi ki kullanıcıları da bilgilendirmemiz gerekiyor. AJAX ile az çok web tarafında da alıştığımız "Loading" GIF'lerinin yerine Silverlight tarafında RC0 ile beraber artık ProgressBar kontrolümüz var.

<UserControl x:Class="SilverlightApplication7.Page"

            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

            Width="400"

            Height="300">

  <Grid x:Name="LayoutRoot"

        Background="White">

    <ProgressBar Height="28"

                VerticalAlignment="Top"

                Margin="40,58,29,0"/>

  </Grid>

</UserControl>

Standart bir ProgressBar'ı yukarıdaki XAML kodu ile uygulamanıza ekleyebilirsiniz. Aslında Silverlight içerisinde ProgressBar'ın Winforms'daki muadilinden ilk bakışta pek bir farkı yok. ProgressBar'ın Value özelliği o anki değeri, Maximum özelliği ise alabileceği en yüksek değeri tanımlıyor.

Gelin ufak bir örnek yapmak için bir DispatcherTimer kullanalım. Timer'ımızın iki saniyede bir ProgressBar'ı biraz ilerletsin. Böylece işlem yapılıyormuş gibi ProgressBar'ı izleyebilelim.

Partial Public Class Page

    Inherits UserControl

    WithEvents Timer As New System.Windows.Threading.DispatcherTimer

    Public Sub New()

        InitializeComponent()

    End Sub

    Private Sub Page_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

        Progress.Maximum = 20

        Timer.Interval = New TimeSpan(0, 0, 2)

        Timer.Start()

    End Sub

    Private Sub Timer_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer.Tick

        Progress.Value += 1

    End Sub

End Class

Yukarıdaki kod ile Progress adındaki ProgressBar'ımızı oynattığımızda aşağıdaki görüntü ile karşılaşıyoruz.

ProgressBar iş başında.

Eğer gerçekten yapılacak işlemin ne kadar süreceği bilmiyorsanız ve bir şekilde bu bilgiyi kullanıcıya gösterme şansınız yoksa bu sefer de işlemin sürdüğüne dair bir gösterge olarak ProgressBar'ı kullanmak için IsIndeterminate özelliğini True olarak ayarlayabilirsiniz.

<ProgressBar Height="28"

            VerticalAlignment="Top"

            Margin="40,58,29,0"

            x:Name="Progress"

            IsIndeterminate="True"/>

Böyle bir durumda ProgressBar içerisinde sürekli olarak aynı animasyon çalıştırılacaktır.

ProgressBar sonsuz döngüde!

ProgressBar'ın görselliğini değiştirmek için Foreground ve Background özelliklerinden faydalanabilirsiniz. Foreground özelliği ProgressBar içerisinde dolu kısımları etkilerken Background ise ProgressBar'ın boş olan kısımlarını etkileyecektir.

<ProgressBar

            x:Name="Progress">

  <ProgressBar.Background>

    <ImageBrush

                ImageSource="Garden.jpg"/>

  </ProgressBar.Background>

</ProgressBar>

Örneğin yukarıdaki kod ile aşağıdaki şekilde bir ProgressBar'ın fonuna bir fotoğraf yerleştirebilirsiniz. Hatta Background için bir ImageBrush yerine VideoBrush kullanarak farklı uygulamalar da oluşturulabilir. Burada özellikle Indeterminate ile ilgili dikkat etmek gerek. Indeterminate aktif hale geldiğinde Silverlight içerisinde ProgressBar'ın ForeGround'u ile tüm kontrol kaplanıyor ve üzerinden beyaz dikey Gradient'lar animasyon ile geçiriliyor. Bu sistem ancak ProgressBar'ın ControlTemplate'i özelleştirilebilirse değiştirilebiliyor aksi halde tüm standart ProgressBar kontrolleri bu şekilde çalışıyor.

Hepinize kolay gelsin.