重い処理の前に「処理中・・・」と記載されたTextBlockを表示させたいが、「Visibility.Visible」にしても表示されない。

Question

前提・実現したいこと

開発環境
OS ：Windows10 Home 64bit
言語：C# WPF（Visual Studio 2017）

ボタンを押下すると重い処理が行われるシステムを作っています。
処理中にボタンを連打されるのを防ぐため、簡易的に以下を施しています。
・画面中央に「処理中・・・」と記載されたTextBlockを、Visibility="hidden"で設置。
・画面全体にRectangleを、最前面、Visiblity="hidden"で設置。

ボタンが押下された際に、処理の前に上記TextBlockとRectangleをコード側で「Visibility.visible」にし、
最前面に表示されたRectangleによって処理中はボタンを押下出来ないようにしたいです。
イメージ画像は以下です。

①起動時（実行ボタンを押下すると重い処理が走ります。）

②実行ボタン押下後、処理中（最前面にTextBlockと、Rectangleが表示され、処理中は実行ボタンを押せなくなります。）

③処理完了（textBlockとRectangleの表示が消え、処理完了状態になります。）

以下ソースにて以下問題が発生しています。

発生している問題・エラーメッセージ

「Visibility.visible」にしてもTextBlock、Rectangleが表示されません。
実行ボタンを押下すると、上記画像の①のまましばらく経過し、いきなり③の状態になってしまいます。
※そのため、本来の目的である「処理中のボタン連打の禁止」も機能しない状態です。

該当のソースコード

以下、ソースコードになります。

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>

        <Viewbox Grid.Column="0" Grid.Row="0"  Margin="30,30,30,30" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
            <Button x:Name="button_Load" Content="実行" Click="Button_Load_Click" />
        </Viewbox>

        <Rectangle x:Name="rectangle_Loading" Fill="#B2D5D5FF" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" Grid.ColumnSpan="3" Margin="0,0,0,0" Stroke="Black" Visibility="Hidden"/>

        <Viewbox Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="1" Margin="0,5,0,5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
            <TextBlock x:Name="textBlock_Loading" Text="処理中・・・" Visibility="Hidden"/>
        </Viewbox>
    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp1
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Load_Click(object sender, RoutedEventArgs e)
        {
            Test_Load();
        }

        public void Test_Load()
        {
            
            Load_Start();

            //重い処理の代わり
            System.Threading.Thread.Sleep(3000);

            //処理完了
            button_Load.Content = "完了";

            Load_End();
        }

        private void Load_Start()
        {
            rectangle_Loading.Visibility = Visibility.Visible;
            textBlock_Loading.Visibility = Visibility.Visible;
        }

        private void Load_End()
        {
            rectangle_Loading.Visibility = Visibility.Hidden;
            textBlock_Loading.Visibility = Visibility.Hidden;
        }
    }
}

試したこと

【試した事①】
「Test_Load」の「Load_Start()」の直後にメッセージボックスを表示するコードを追加してみました。
すると、メッセージボックスが表示された時点でTextBlockもRectangleも表示され、
メッセージボックスを閉じた後は正常に画像②→画像③と動作するようになりました。

public void Test_Load()
{
    Load_Start();
    //メッセージボックスが表示されるようにしてみたら、
    //メッセージボックスが表示された時点でTextBlockもRectangleも表示された！
    MessageBox.Show("a");
        
    //重い処理の代わり
    System.Threading.Thread.Sleep(3000);

    //処理完了
    button_Load.Content = "完了";

    Load_End();
}

【試した事②】
「Load_Start()」を「Test_Load」内で実行するのではなく、「Button_Load_Click」の処理時に実行させてみました。
ですが、動作は元々と変わらず画像①→画像③となってしまいました。

private void Button_Load_Click(object sender, RoutedEventArgs e)
{
    //ここでLoad_start()を実行。
    Load_Start();

    Test_Load();
}

public void Test_Load()
{
    //ここではLoad_Start()を実行しない。
    //でも、TextBlockとRectangleは表示されなかった。
        
    //重い処理の代わり
    System.Threading.Thread.Sleep(3000);

    //処理完了
    button_Load.Content = "完了";

    Load_End();
}

補足情報

プログラミング初心者で、且つteratailへの質問投稿も初めてなので、
情報不足な点があるかもしれませんが、その際はお手数ですがご指摘ください。

なにとぞご教授の程よろしくお願いいたします。

Answer 1

重たい処理(Sleep)をメインスレッド(UIスレッド)で実行しているため、画面が更新されていないように見えます。
マルチスレッドで処理してください。

具体的にはSleepのとき、このようにスレッドプールに処理を委譲して非同期で実行します。

//重い処理の代わり
Task.Run(()=>{
    Console.WriteLine("Heavy Process Start");
    System.Threading.Thread.Sleep(3000);
    Console.WriteLine("Heavy Process End");
});

マルチスレッドについて理解がない場合はマルチスレッドや[雑記] スレッド プールとタスクを参照してください。

Comments

[tott]

すばやいご回答ありがとうございました。
BluOxy様のご回答と、len_souko様の補足情報、
並びにmoredeep様、y_waiwai様のDoEventsメソッドの情報を頼りに、自分なりに調べた結果、
以下の方法で解決することができました。

public async void Test_Load()
{
await Task.Run(() =>
{
this.Dispatcher.Invoke((Action)(() =>
{
Load_Start();
}));

//重い処理の代わり
Console.WriteLine("Heavy Process Start");
System.Threading.Thread.Sleep(3000);
Console.WriteLine("Heavy Process End");

this.Dispatcher.Invoke((Action)(() =>
{
Load_End();
button_Load.Content = "完了";
}));
});
}

皆様から本当に参考になる情報を頂いたのでベストアンサーをどなたにするか非常に迷ったのですが、
マルチスレッドの方法が一番自分のやりたかった事であったのと、
マルチスレッドの事について一番素早くご回答頂いたということもあり、
恐縮ながらBluOxy様をベストアンサーとして選ばせて頂きました。

この場を借りて、BluOxy様、len_souko様、moredeep様、y_waiwai様にお礼申し上げます。
お忙しい中ご回答頂き、本当にありがとうございました。
また何かわからないことがあればご質問させていただく事もあるかと思いますが、
その際はまたよろしくお願いいたします。

Answer 2

UIスレッドをブロックしているためにUIの更新が行われないからですね。MessageBox.Showを行った際は、強制的に再描画を掛けている可能性が高いです。
(この説明は多少ずれて居るかもしれませんが、大体合ってるはず)

MessageBox.Showの代わりに以下のサイトで紹介されているDoEventsを実行しても、見た目が変わることが確認できると思います。
コントロールを明示的に更新する

UIが固まるため、重い処理は可能な限りワーカースレッドで実行すべきです。

Comments

[tott]

ご回答ありがとうございました。
MessageBoxを表示させるとなぜ動作するのか謎に思っていたのですが、
謎が解けました！

今回は、恐縮ながらBluOxy様をベストアンサーとさせて頂きましたが、
本当に勉強になりました。
ありがとうございます！

Answer 3

回答ではありませんが、「Application.DoEvents」を進める人が居るので書いておきます

Application.DoEventsは重い処理の際に画面の更新を行ってくれる処理ではなく、重い処理を行うことで順番待ちになっている他の処理を割り込みで実行するという処理です
その溜まっている順番待ちの中に画面の再描画イベントも混じっているので結果的に画面の再描画も行われるというだけなので、例えばボタン連打を行った場合は一気に複数回処理が実行されてしまうといったことも起こります

といった問題点を過去に指摘している人がそういった注意書きなしで推奨するのは何でだろうかという疑問がありますが・・・

なお、回答としては「BluOxy」さんの内容が一番良いものだと思います
WindowsFormsではきちんとした仕組みが無かったのか同課はわかりませんが、WPFでは正しくマルチスレッド処理を行う仕組みが用意されていますので副作用を利用するのはやめた方が良いでしょう

追記：スレッド内からコントロールの中身やバインドした値を変更する際にはその処理をUIスレッドに委譲して行う必要がありますのでそこらへんも調べておくと良いかと思います

Comments

[tott]

ご回答ありがとうございました！

len_souko様の補足回答があったから、DoEventsとマルチスレッドの違いについて理解ができました！
また、「UIスレッドに移譲して行う」方法として「Dispatcher.Invoke」に行き着くことが出来ました。

マルチスレッドについて記載頂いたBluOxy様とlen_souko様でベストアンサーを迷ったのですが、
恐縮ながらコード等を記載してくださったBluOxy様をベストアンサーとさせて頂きました。
本当に勉強になりました。
ありがとうございます！

Answer 4

重たい処理で表示が更新されない（フリーズしてしまう）というのはみなさんよく出会う問題なんですが、
WindowsFormの世界では、Application.DoEvents メソッドを実行すると、一通りのそこらへんの処理を実行してくれる、というのがあります。

というころで、
「wpf DoEvents」でぐぐるとそこらへんの解説が出てきます。
コンポーネントを更新したあと、これを実行してみてください。

Comments

[tott]

ご回答ありがとうございました。

DoEventsなるものをお恥ずかしながら全く知らず、
本当に勉強になりました。ありがとうございます！

ただ、今回私が例として挙げたコードは非常に簡単な例だったのでDoEventsでも事足りるとは思うのですが、
今後のためにマルチスレッドでの解決方法を選ばせていただきました。

そのため今回は、恐縮ながらBluOxy様をベストアンサーとさせて頂きましたが、
本当に勉強になりました。
ありがとうございます！

[Q71]

https://blog.jhashimoto.net/entry/20111113/1321133064
これなど。
DoEventsを使うべきではないので、低評価にします。