WPF從非UI線程中更新UI元素

有時候我們需要更新UI元素上的資料，但是這個資料計算的時候非常的長，這就給ui線程，這個程式帶來了 “當機” . . .

例如我們先準備下面的UI：

當我們點選按鈕時，計算出 1 到 1y 之間的偶數與奇數的個數，很明顯這個計算量非常的大，計算的代碼如下所示：

private void Calculator(int from, int to)
{
    tmpJsValue = 0;
    tmpEsValue = 0;   
    
    for (Int32 i = from; i < to; i++)
    {
        if (i % 2 == 0) ++tmpEsValue;
        else ++tmpJsValue;
    }
}

Int32 tmpJsValue = 0;
Int32 tmpEsValue = 0;

private void Button_Click(object sender, RoutedEventArgs e)
{
    this.btn.IsEnabled = false;

    this.esValue.Text = "0";
    this.jsValue.Text = "0";

    Calculator(0, 1000000000);

    this.esValue.Text = tmpEsValue.ToString();
    this.jsValue.Text = tmpJsValue.ToString();

    this.btn.IsEnabled = true;
}

           

使用UI的線程計算效果如下所示：

這種情況在我們的程式中是不能發生的，下面我們利用線程池來解決這種問題，代碼如下所示：

private void Calculator(int from, int to)
{
    tmpJsValue = 0;
    tmpEsValue = 0;   
    
    for (Int32 i = from; i < to; i++)
    {
        if (i % 2 == 0) ++tmpEsValue;
        else ++tmpJsValue;
    }
}

Int32 tmpJsValue = 0;
Int32 tmpEsValue = 0;

private void Button_Click(object sender, RoutedEventArgs e)
{
    this.btn.IsEnabled = false;

    this.esValue.Text = "0";
    this.jsValue.Text = "0";

    ThreadPool.QueueUserWorkItem(obj =>
    {
        Calculator(1, 1000000000);

        Dispatcher.BeginInvoke(new Action(() =>
        {
            this.esValue.Text = tmpEsValue.ToString();
            this.jsValue.Text = tmpJsValue.ToString();

            this.btn.IsEnabled = true;
        }));
    });

}
           

效果如下所示：