rksoftware

Visual Studio とか C# とかが好きです

WPF で進捗バーを表示する

WPF で進捗状況を表示したい場合、ProgressBar といコントロールが用意されています。
まず最初にコードを書いて動かしてみます。

■ コード

・XAML

<Window x:Class="WpfApp.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="500">
    <Grid>
        <Grid>
            <TextBlock Text="Hello, XAML!" Margin="0,0,0,40" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="32"/>
            <StackPanel VerticalAlignment="Bottom">
                <Button Content="IsIndeterminate: True" Click="Button_Click_True"/>
                <Button Content="IsIndeterminate: False 100" Click="Button_Click_False100"/>
                <Button Content="IsIndeterminate: False 200" Click="Button_Click_False200"/>
            </StackPanel>
        </Grid>
        <Grid Visibility="{Binding Visibility,ElementName=progressBar}">
            <Grid Background="Black" Opacity="0.1"/>
            <ProgressBar Height="10" IsIndeterminate="True" x:Name="progressBar" Visibility="Hidden"/>
        </Grid>
    </Grid>
</Window>

・コードビハインド

using System.Linq;
using System.Threading.Tasks;
using System.Windows;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private async void Button_Click_True(object sender, RoutedEventArgs e)
        {
            progressBar.IsIndeterminate = true;
            progressBar.Visibility = Visibility.Visible;
            await Task.Delay(10 * 1000);
            progressBar.Visibility = Visibility.Hidden;
        }

        private async void Button_Click_False100(object sender, RoutedEventArgs e)
        {
            progressBar.IsIndeterminate = false;
            progressBar.Value = 0;
            progressBar.Maximum = 100;
            progressBar.Visibility = Visibility.Visible;
            foreach (var index in Enumerable.Range(0, 10))
            {
                progressBar.Value = index * 10;
                await Task.Delay(1000);
            }
            progressBar.Visibility = Visibility.Hidden;
        }

        private async void Button_Click_False200(object sender, RoutedEventArgs e)
        {
            progressBar.IsIndeterminate = false;
            progressBar.Value = 0;
            progressBar.Maximum = 200;
            progressBar.Visibility = Visibility.Visible;
            foreach (var index in Enumerable.Range(0, 20))
            {
                progressBar.Value = index * 10;
                await Task.Delay(1000);
            }
            progressBar.Visibility = Visibility.Hidden;
        }
    }
}
  • IsIndeterminate: True
    IsIndeterminate: True」というボタンを押すと、ProgressBar が表示され、緑色のバーが高速で左から右へと繰り返し流れます。結構スピード感があります。
    これは、進捗の度合いを表示できない場合に、とりあえず頑張って動いているアピールをするのに最適な表現です。
    f:id:rksoftware:20180915194159j:plain

  • IsIndeterminate: False 100
    IsIndeterminate: False 100」というボタンを押すと、ProgressBar が表示され、緑色のバーが 1/10 刻みで 10 秒かけていっぱいになります。
    これは、進捗の度合いをパーセントで取得できる処理で 0% ~ 100% を表示する場合に最適な表現です。
    f:id:rksoftware:20180915194220j:plain

  • IsIndeterminate: False 200
    IsIndeterminate: False 200」というボタンを押すと、ProgressBar が表示され、緑色のバーが 1/20 刻みで 20 秒かけていっぱいになります。
    これは、進捗の度合いは取得できるがパーセントでは所得できず全行程の分量と完了した分量が取得できる処理で 0% ~ 100% で表示する場合に最適な表現です。
    f:id:rksoftware:20180915194220j:plain

■ IsIndeterminate: True

ProgrenssBarIsIndeterminate プロパティに True をセットした場合のモードです。
前述のコードでは

progressBar.IsIndeterminate = true;

と設定しています。

■ IsIndeterminate: False 100

ProgrenssBarIsIndeterminate プロパティに False をセットした場合のモードです。
この場合、Maximum プロパティで 100% の値、つまり全行程の分量を設定します。その状態で、Value プロパティに完了した工程の分量を設定することで、MaximumValue の比率でバーの緑色の領域が伸びて行きます。
前述のコードでは

progressBar.IsIndeterminate = false;
progressBar.Value = 0;
progressBar.Maximum = 100;

と初期設定しています。その後、1 秒ごとに

progressBar.Value = index * 10;

Value プロパティの値を変更することで、緑色の領域を進めています。

■ IsIndeterminate: False 200

ProgrenssBarIsIndeterminate プロパティに False をセットした場合のモードです。
前述の「IsIndeterminate: False 100」と同じものです。ただし、Maximum プロパティに 200 と設定している部分に違いがあります。Value の値が 200 になった場合に 100% の完了ということになります。
この例で、Maximum プロパティにいい感じの値を設定しておけば進捗の度合いをパーセント表現に変換する処理を書かなくて良いということがわかります。 前述のコードでは

progressBar.IsIndeterminate = false;
progressBar.Value = 0;
progressBar.Maximum = 200;

と初期設定しています。その後、1 秒ごとに

progressBar.Value = index * 10;

Value プロパティの値を変更することで、緑色の領域を進めています。