ProgressBar Control in Silverlight

I.Introduction

ProgressBar là Control hiển thị tiến độ của một tiến trình, thường được sử dụng rất nhiều trong các ứng dụng.

Trong bài này mình xin chia sẻ về cách sử dụng progressbar control trong Silverlight.

II Creating Project And Coding

Mở Visual Studio 2010 lên và tạo Silverlight Application.

image

Tiếp theo chúng ta tạo một giao diện gồm có 1 Progressbar, một label để hiển thị tiến trình đã chạy bao nhiêu, và một Button để khi Click vào thì tiến trình tạm ừng, và khi Click lần nữa thì chạy tiếp.

Các bạn có thể kéo thả Control từ ToolBox vào giao diện , hoặc xử lý trực tiếp trên code XAML:

   1: <UserControl x:Class="ProcessBar.MainPage"

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

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

   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   6:     mc:Ignorable="d"

   7:     d:DesignHeight="300" d:DesignWidth="400" 

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

   9:  

  10:     <Grid x:Name="LayoutRoot" VerticalAlignment="Center" HorizontalAlignment="Center" Height="298">

  11:         <Grid.Background>

  12:             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

  13:                 <GradientStop Color="Black" Offset="0" />

  14:                 <GradientStop Color="White" Offset="1" />

  15:             </LinearGradientBrush>

  16:         </Grid.Background>

  17:         <Grid.RowDefinitions>

  18:             <RowDefinition Height="30*" />

  19:             <RowDefinition Height="243*" />

  20:         </Grid.RowDefinitions>

  21:         <ProgressBar Height="28" Maximum="500"  HorizontalAlignment="Center" Margin="12,134,12,0" Name="progressBar" VerticalAlignment="Top" Width="376" Value="0" Grid.Row="1" />

  22:         <sdk:Label Grid.Row="1" Height="43" Content="" HorizontalAlignment="Center" Margin="127,85,145,0" Name="lblresuilt" VerticalAlignment="Top" Width="128" FontSize="18">

  23:             <sdk:Label.Foreground>

  24:                 <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

  25:                     <GradientStop Color="Red" Offset="0" />

  26:                     <GradientStop Color="#FF390069" Offset="1" />

  27:                     <GradientStop Color="#FF49BE5E" Offset="0.517" />

  28:                     <GradientStop Color="White" Offset="0.448" />

  29:                 </LinearGradientBrush>

  30:             </sdk:Label.Foreground>

  31:         </sdk:Label>

  32:         <Button Grid.Row="0" Content="Click" Click="Button_Click"></Button>

  33:     </Grid>

  34: </UserControl>

// Sự Kiện Click cho Button “Click=Button_Click”

<Button Grid.Row="0" Content="Click" Click="Button_Click"></Button>

Các bạn Lưu ý là phải đạt giá trị ban đầu cho progressBar , trong bài này mình đặt là Value=”0”, Maximum=”500”

tiếp theo chúng ta xử lý sự kiện trong File MainPage.xaml.cs:

   1: using System;

   2: using System.Collections.Generic;

   3: using System.Linq;

   4: using System.Net;

   5: using System.Windows;

   6: using System.Windows.Controls;

   7: using System.Windows.Documents;

   8: using System.Windows.Input;

   9: using System.Windows.Media;

  10: using System.Windows.Media.Animation;

  11: using System.Windows.Shapes;

  12: using System.Windows.Threading;

  13:  

  14: namespace ProcessBar

  15: {

  16:     public partial class MainPage : UserControl

  17:     {

  18:         DispatcherTimer timer;

  19:         bool flag = true;

  20:         int count = 0;

  21:         public MainPage()

  22:         {

  23:             InitializeComponent();

  24:             timer = new DispatcherTimer();

  25:             timer.Tick += new EventHandler(timer_Tick);

  26:             timer.Start();

  27:         }

  28:         void timer_Tick(object sender, EventArgs e)

  29:         {

  30:             if (flag)

  31:             {

  32:                 if (progressBar.Value < progressBar.Maximum)

  33:                 {

  34:                     progressBar.Value++;

  35:                     lblresuilt.Content = progressBar.Value*2 / 10 + "%";

  36:                 }

  37:                 else flag = false;

  38:             }

  39:             else

  40:                 if (progressBar.Value > 0)

  41:                 {

  42:                     progressBar.Value--;

  43:                     lblresuilt.Content = progressBar.Value * 2 / 10 + "%";

  44:                 }

  45:                 else flag = true;

  46:           

  47:         }

  48:         private void Button_Click(object sender, RoutedEventArgs e)

  49:         {

  50:             count++;

  51:             if (count%2 != 0)

  52:             {

  53:                 timer.Stop();

  54:             }

  55:             else

  56:                 timer.Start();

  57:         }   

  58:     }

  59: }

Ở đoạn Code trên chúng ta dùng Lớp DispatcherTimer  để thực hiện việc đếm thời giàn, để sử dụng lớp này chúng ta phải khai báo using System.Windows.Threading;

Run Application(Ctrl + F5) And Look at the Resuilt:

image

/*Web is beautiful*/

Leave a comment