MahApps.Metro を使ってWPF でローディングイメージを表示する

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

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

ProgressRing コントロール

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

準備

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

ProgressRing だけ使用する場合は WindowMetroWindow に変更する必要もないので、 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 を使用しているので、 WindowResource に下記のように定義しておく必要がある。

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です