FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【Material Design Toolkit】 ProgressBar

 Material Design Toolkitでは2種類のProgressBarスタイルが用意されています。
 プログレスインジケーターがライン状のMaterialDesignLinearProgressBarとサークル状のMaterialDesignCircularProgressBarがあり、スタイルを指定しなかった場合はMaterialDesignLinearProgressBarが使用されます。
<Grid ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Row="0" Grid.Column="1" Text="MaterialDesignLinearProgressBar" Margin="20,1"/>
    <TextBlock Grid.Row="0" Grid.Column="2" Text="MaterialDesignCircularProgressBar" Margin="20,1"/>

    <TextBlock Grid.Row="1" Grid.Column="0" Text="Indeterminate=False, Value=40"/>
    <ProgressBar Grid.Row="1" Grid.Column="1" Minimum="0" Maximum="100" Value="40"/>
    <ProgressBar Grid.Row="1" Grid.Column="2" Minimum="0" Maximum="100" Value="40"
                    Style="{StaticResource MaterialDesignCircularProgressBar}"/>

    <TextBlock Grid.Row="2" Grid.Column="0" Text="Indeterminate=True, Value=40"/>
    <ProgressBar Grid.Row="2" Grid.Column="1" Minimum="0" Maximum="100" Value="40" IsIndeterminate="True"/>
    <ProgressBar Grid.Row="2" Grid.Column="2" Minimum="0" Maximum="100" Value="40" IsIndeterminate="True"
                    Style="{StaticResource MaterialDesignCircularProgressBar}"/>

    <TextBlock Grid.Row="3" Grid.Column="0" Text="Indeterminate=True, Value=0"/>
    <ProgressBar Grid.Row="3" Grid.Column="1" IsIndeterminate="True"/>
    <ProgressBar Grid.Row="3" Grid.Column="2" IsIndeterminate="True"
                    Style="{StaticResource MaterialDesignCircularProgressBar}"/>

    <TextBlock Grid.Row="4" Grid.Column="0" Text="Width=50"/>
    <ProgressBar Grid.Row="4" Grid.Column="1" IsIndeterminate="True" Width="50"/>
    <ProgressBar Grid.Row="4" Grid.Column="2" IsIndeterminate="True" Width="50"
                    Style="{StaticResource MaterialDesignCircularProgressBar}"/>

    <TextBlock Grid.Row="5" Grid.Column="0" Text="Height=50"/>
    <ProgressBar Grid.Row="5" Grid.Column="1" IsIndeterminate="True" Height="50"/>
    <ProgressBar Grid.Row="5" Grid.Column="2" IsIndeterminate="True" Height="50"
                    Style="{StaticResource MaterialDesignCircularProgressBar}"/>

</Grid>
 このコードを実行すると以下の様になります。
MaterialDesign_ProgressBar2.png
 一番上のProgressBarはIsIndeterminateがFalseの状態のProgressBarです。
 Valueで指定した数値までが濃い紫色で表示されます。画像は40%の状態です。

 2つめと3つめはIsIndeterminateをTrueにした状態のProgressBarです。
 IsIndeterminateをTrueにした場合、MaterialDesignLinearProgressBarとMaterialDesignCircularProgressBarでは大きな違いがあります。
 MaterialDesignLinearProgressBarではValueの値に関わらず一定幅の色付き領域が左から右へ流れるアニメーションが繰り返されます。
 MaterialDesignCircularProgressBarの場合はValueの値によってアニメーションに違いが生まれます。
 Valueの値が0以外の場合(画像だと2番目)は、Valueで指定した範囲に色が付き、それがゆっくり回転します。
 Valueを指定しなかった又は0の場合(画像だと3番目)は、Valueが0%から100%まで変化するようにインジケーターが変化し、それが回転します。

 4つめの画像はProgressBarのWidthプロパティを50に指定した場合です。
 Widthの値に合わせてProgressBarの幅又は大きさが変化します。

 5つ目の画像はProgressBarのHeightプロパティを50に指定した場合です。
 表示されているインジケーターの大きさは変わりませんが、表示領域は指定した値に変化しています。(つまりHeightを指定する意味はありません。)
 Material Design ToolkitのProgressBarを使う場合はWidthでインジケーターの幅や大きさを変化させることができますが、MaterialDesignLinearProgressBarの高さを変えたり、MaterialDesignCircularProgressBarの線の太さを変えたりは出来ないようです。
 2017/10/9修正
 Material Design Toolkitの更新によりProgressBarのHeightプロパティが反映されるようになりました。
 Heightが反映されるのはMaterialDesignLinearProgressBarの場合のみでMaterialDesignCircularProgressBarでは反映されないようです。
スポンサーサイト

テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

非公開コメント

カレンダー
11 | 2018/12 | 01
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
全記事表示リンク

全ての記事を表示する

カテゴリ
タグリスト

月別アーカイブ
11  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09 
最新記事
リンク
最新コメント
検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。