Wiki

Chúng ta sẽ thảo luận ba control mới trong bản Silverlight 2 RC0 không có trong bản beta 2  . Và ba control mới đó sẽ lần lượt được trình bày qua từng Tip of the Day bao gồm:

• ProgressBar
• ComboxBox
• PasswordBox

à bài này chúng ta sẽ khám phá control  ProgressBar . Đoạn mã sau sẽ cho bạn biết bằng cách nào khai báo một ProgressBar  trong mã XAML của bạn:

<ProgressBar Foreground="White" Background="Gray" Value="25" Maximum="100" Width="200" Height="20" Margin="20">

Hãy nhìn vào từng thuộc tính sau đây trong control  ProgressBar và những gì chúng ta làm là:

1. Foreground – Màu sắc của thanh chạy ở bên  trong  ProgressBar.
2. Background – Màu nền của control.
3. Value – Giá trị bắt đầu cho  ProgressBar.
4. Maximum – Giá trị kết thúc cho  ProgressBar.
5. Width/Height – Chiều rộng/ chiều cao của  ProgressBar.
6. Margin – Khoảng cách giữa control  ProgressBar  với những control chứa nó (canvas, stackpanel, grid...). Tôi nghĩ sử dụng Margin dễ hơn các thuộc tính  Canvas.Left và Canvas.Top.

Thêm một timer và bạn có thể tạo di chuyển cho thanh progress đến giá trị lớn nhất của nó:

namespace Password

{

    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();

            }

        }

    }

}

Nếu bạn chạy control này bạn sẽ thấy nó bắt đầu ở giá trị 25 và kết thúc khi nó đầy:

Bắt đầu:

Kết thúc:

Và bây giờ nếu bạn không muốn sử dụng thời gian và muốn thanh progress cứ lặp lại không ngừng thì bạn có thể gán giá trị cho thuộc tính IsDeterminate là “true”

<ProgressBar IsIndeterminate="True"/>

Bạn có thể thêm tùy chọn vào ProgressBar của bạn bằng cách gán giá trị cho thuộc tính  Background và Foreground với bất kì brush thích hợp nào:

• Brush
• GradientBrush
• LinearBrush
• Imagebrush
• LinearGradientBrush
• RadialGradientBrush
• SolidColorBrush

Đây là 1 thí dụ sử dụng một  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>

Bắt đầu:

Kết thúc:

Thank you,
--Mike Snow