WPF手繪進度條

話說現在的項目中我要用進度條了。本想用自帶的那個ProcessBar控件，可是樣式不好看，加上自己本事有限，對WPF中的樣式相當的不熟。只好想別的辦法了。不知哪根兒神經一動，我想到了用Rectangle控件。知道這個控件的一定就知道我是怎么想的了。具體通過DispatcherTimer類實現。因為這個類有一個Interval屬性設置使用的多長時間完成，再加上一個Tick事件，每一毫秒就會觸發一下這個Tick事件。當然大多數情況下我們不會這么頻繁的觸發這個事件。具體就跟實際情況而定了。關於DispatcherTimer類，還是讓MSDN來講吧，http://msdn.microsoft.com/zh-cn/library/system.windows.threading.dispatchertimer.aspx。下面貼出來代碼，做一下記錄。

xaml代碼如下：

<Window x:Class="ProcessBarTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="254" Width="525" Loaded="Window_Loaded">
    <Grid Height="218">
        <Rectangle Height="28" HorizontalAlignment="Left" Margin="64,24,0,0" Name="rectangle1" Stroke="Black" VerticalAlignment="Top" Width="0" />
        <Label Content="進度：" Height="28" HorizontalAlignment="Left" Margin="12,26,0,0" Name="label1" VerticalAlignment="Top" />
        <Button Content="開 始" Height="23" HorizontalAlignment="Left" Margin="416,183,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
        <Label Content="0%" Margin="71,24,0,166" Name="label2" HorizontalAlignment="Left" Width="46" />
        <TextBox Height="108" HorizontalAlignment="Left" Margin="12,69,0,0" Name="textBox1" VerticalAlignment="Top" Width="479" TextWrapping="WrapWithOverflow" />
    </Grid>
</Window>

當然與此相關的當然就是后台代碼啦：

public partial class MainWindow : Window
    {
        private delegate int BrushProcessHandle();
        public MainWindow()
        {
            InitializeComponent();
        }

        Thickness tmpT;

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            this.rectangle1.Width = 0;
            i = 1;
            if (tmpT.Left==0&&tmpT.Top==0&&tmpT.Right==0&&tmpT.Bottom==0)
            {
                tmpT = this.label2.Margin;
            }
            else
            {
                this.label2.Margin = tmpT;
            }
            this.textBox1.Text = "do working...";
            // 注釋此句將百分比將會一直在進度條頭部顯示
            this.label2.Margin = new Thickness(this.label2.Margin.Left - 52, this.label2.Margin.Top, this.label2.Margin.Right, this.label2.Margin.Bottom);
            // 取消注釋字體顏色為白色
            //this.label2.Foreground = Brushes.White;
            // 取消注釋字體為斜體
            //this.label2.FontStyle = FontStyles.Italic;
            BrushProcessBar();
        }

        
        private DispatcherTimer dt;
        private int i = 1;
        private void BrushProcessBar()
        {
            dt = new DispatcherTimer();
            dt.Interval = new TimeSpan(10000);
            dt.Tick += new EventHandler(dt_Tick);
            dt.Start();
        }

        protected void dt_Tick(object sender, EventArgs e)
        {
            // 純色進度條
            //SolidColorBrush scb = new SolidColorBrush();
            //scb.Color = Color.FromRgb(63, 134, 231);
            
            // 漸變進度條
            LinearGradientBrush scb = new LinearGradientBrush(Color.FromRgb(63, 169, 233), Color.FromRgb(16, 111, 197), 0);
            this.rectangle1.Width = i++;
            this.label2.Margin = new Thickness(this.label2.Margin.Left + 1, this.label2.Margin.Top, this.label2.Margin.Right, this.label2.Margin.Bottom);
            this.rectangle1.Fill = scb;
            if (i == 50 || i == 120 || i == 410)
            {
                Thread.Sleep(200);
            }
            this.label2.Content = Decimal.Round(((decimal)i)/400*100,2) + "%";
            if (i == 400)
            {
                dt.Stop();
                this.textBox1.Text += "\r\nCompleted";
            }
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            
        }
    }

再給個程序運行效果圖吧？好吧。

以上就是源碼了。就不再提供下載了。不過在多數應用場景中操作進度條都要垮線程。這里面的知識就不說了。有興趣再查資料吧。通過這種方法可以自定義一個WPF控件去應用，這樣就不用再使用自帶的控件了，而且自定義的控件話靈活性也會很大。