アプリケーションの処理中や初期化中にローディングアニメーションを表示したいという要求はけっこうある。

WPF でも様々な方法が考えられるが、今回は MahApps.Metro を使った方法を紹介する。

ProgressRing コントロール

MahApps.Metro には ProgressRing というコントロールが含まれており、これを使えば簡単に下図のようなローディング表示ができる。

• ProgressRing – MahApps.Metro

準備

MahApps.Metro のインストール方法については下記のページにあるように NuGet 経由でのインストールが簡単だ。

• WPF 「MahApps.Metro」を使ってWPFアプリケーションをModernUIにしてみる – Qiita

ProgressRing だけ使用する場合は Window を MetroWindow に変更する必要もないので、 Window の XAML の xmlns が並んでいるところに下記の名前空間を追加すればよい。

xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"

コントロールの挿入

あとはプログレスリングを表示したいところに下記のタグを挿入するだけで表示される。

<Controls:ProgressRing IsActive="True" />

ただ通常はなんらかのフラグをバインディングして表示・非表示を制御したいことが多いと思うので、下記のように Grid などに格納すればよい。

<Grid d:IsHidden="True" Background="White" Visibility="{Binding IsInitializing, Converter={StaticResource BooleanToVisibilityConverter}}">
  <Controls:ProgressRing IsActive="True" />
</Grid>

なお、上記の例ではバインディング用の値コンバーター BooleanToVisibilityConverter を使用しているので、 Window の Resource に下記のように定義しておく必要がある。

<Window.Resources>
  <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</Window.Resources>