FC2ブログ

スポンサーサイト

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

【Material Design Toolkit】 RatingBar

 RatingBarはWPFには存在しないコントロールで、評価値の表示・変更を行うことができます。
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Value1, StringFormat=Value:{0}}"/>
    <materialDesign:RatingBar Grid.Row="0" Grid.Column="1" Max="5" 
                                Value="{Binding Value1, Mode=TwoWay}" />
        
    <!--読み取り専用にする場合-->
    <TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Value1, StringFormat=Value:{0}}"/>
    <materialDesign:RatingBar Grid.Row="1" Grid.Column="1" Max="5" Value="{Binding Value1}" 
                                IsHitTestVisible="False"/>
        
    <TextBlock Grid.Row="2" Grid.Column="0" Text="{Binding Value2, StringFormat=Value:{0}}"/>
    <materialDesign:RatingBar Grid.Row="2" Grid.Column="1" Max="10" 
                                Value="{Binding Value2, Mode=TwoWay}"/>

    <TextBlock Grid.Row="3" Grid.Column="0" Text="{Binding Value3, StringFormat=Value:{0}}"/>
    <materialDesign:RatingBar Grid.Row="3" Grid.Column="1" Max="10" 
                                Value="{Binding Value3, Mode=TwoWay}"/>

    <!--Modeを指定しない場合-->
    <TextBlock Grid.Row="4" Grid.Column="0" Text="{Binding Value4, StringFormat=Value:{0}}"/>
    <materialDesign:RatingBar Grid.Row="4" Grid.Column="1" Max="10" 
                                Value="{Binding Value4}" />

    <materialDesign:RatingBar Grid.Row="5" Grid.Column="1"
                                Max="3" Value="2" Margin="20,5" Orientation="Vertical">
        <materialDesign:RatingBar.ValueItemTemplate>
            <DataTemplate DataType="system:Int32">
                <Grid>
                    <materialDesign:PackIcon Kind="Heart" Height="24" Width="24" />
                    <TextBlock Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center"
                                FontSize="8"
                                Foreground="{StaticResource PrimaryHueMidForegroundBrush}"/>
                </Grid>
            </DataTemplate>
        </materialDesign:RatingBar.ValueItemTemplate>
    </materialDesign:RatingBar>
</Grid>
 以下の画像は、このコードを実行し5つ目のRatingBarのボタン(☆マーク)を押して値を変更した後の画像です。
MaterialDesign-RatingBar.png
 RatingBarではデフォルトで★マークが使用されます。
 Maxプロパティは評価値の最大値、Valueプロパティが現在の評価値を表しています。
 ボタンの並びはOrientationプロパティで指定できます。
 ★ボタンを押すとValueプロパティの値が対応する値に変更されます。
 注意点はBinding時にMode=TwoWayを指定しないと★ボタンを押してもViewModel側の値が変更されないことです。
 5つ目のRatingBarは、プログラム起動後に10個目の★ボタンを押した状態です。
 RatingBarの見た目は変更されていますがValueは5のままになっています。

 RatingBarには表示専用にするプロパティはありません。
 評価値は表示したいがユーザーに変更されたくない場合はIsHitTestVisibleをFalseにすることで読み取り専用にできます。

 XAMLでValueを指定する場合はValue="3.5"等とするとエラーとなりますが、バインディングする場合はdouble型でもエラーになりません。
 double型を指定した場合は小数点第1位で四捨五入された値が表示されるようです。

 最後に、ボタンのマークを変更することもできます。
 RatingBar.ValueItemTemplateでDataTemplateを指定します。
 後は表示させたいマークを設定するだけです。(PackIconを使用すると便利です)
 サンプルの様にボタンに対応する評価値を表示することもできます。
スポンサーサイト

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

コメントの投稿

非公開コメント

カレンダー
09 | 2018/10 | 11
- 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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。