スポンサーサイト

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

【Material Design Toolkit】 Snackbar

 Snackbarは短いメッセージの通知を行えるコントロールです。
 Material Design ToolkitのSnackbarではメッセージを表示するだけでなく、ボタンを1つ設置しボタンを押した際に処理を実行させることもできます。
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <GroupBox Grid.Row="0" Grid.Column="0" Header="メッセージのみ">
        <Grid>
            <StackPanel VerticalAlignment="Center">
                <TextBlock Text="Snackbarにメッセージのみを表示する場合"/>
                <ToggleButton IsChecked="{Binding ElementName=Snack1, Path=IsActive, Mode=TwoWay}"
                                Margin="10"/>
            </StackPanel>

            <materialDesign:Snackbar Name="Snack1" Message="Snackbar Message" IsActive="False"/>
        </Grid>
    </GroupBox>
                
    <GroupBox Grid.Row="0" Grid.Column="1" Header="Action Button付き">
        <Grid>
            <StackPanel VerticalAlignment="Center">
                <TextBlock Text="Actionボタン付きSnackbar"/>
                <TextBlock Text="Actionボタンが押されるとActionClickイベントが発生する"/>
                <ToggleButton IsChecked="{Binding ElementName=Snack2, Path=IsActive, Mode=TwoWay}"
                                Margin="10"/>
            </StackPanel>

            <materialDesign:Snackbar Name="Snack2" IsActive="True" HorizontalAlignment="Stretch">
                <materialDesign:SnackbarMessage Content="{Binding Count}" ActionContent="カウントアップ">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="ActionClick">
                            <l:LivetCallMethodAction MethodTarget="{Binding}" MethodName="CountUp"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </materialDesign:SnackbarMessage>
            </materialDesign:Snackbar>
        </Grid>
    </GroupBox>

    <GroupBox Grid.Row="1" Grid.Column="0" Header="MessageQueueを使う場合その1">
        <Grid>
            <StackPanel VerticalAlignment="Center">
                <TextBlock Text="MessageQueueを使ってメッセージを表示する"/>
                <TextBlock Text="「送る」ボタンを押すとメッセージキューにメッセージを送信する"/>
                <Button Content="送る" Width="80">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <l:LivetCallMethodAction MethodTarget="{Binding}" MethodName="SendMessage"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Button>
            </StackPanel>

            <materialDesign:Snackbar MessageQueue="{Binding MessageQueue1}"/>
        </Grid>
    </GroupBox>

    <GroupBox Grid.Row="1" Grid.Column="1" Header="MessageQueueを使う場合その2">
        <Grid>
            <StackPanel VerticalAlignment="Center">
                <TextBlock Text="MessageQueueを使ってAction付きメッセージを表示する"/>
                <TextBlock Text="「送る」ボタンを押すとメッセージキューにメッセージを送信する"/>
                <TextBlock Text="「カウントアップ」ボタンを押すと数値が上昇する"/>
                <TextBlock Text="{Binding Total, StringFormat=ボタンを押した回数 {0}}"/>
                <Button Content="送る" Width="80">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <l:LivetCallMethodAction MethodTarget="{Binding}" MethodName="SendActionMessage"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Button>
            </StackPanel>

            <materialDesign:Snackbar MessageQueue="{Binding MessageQueue2}"/>
        </Grid>
    </GroupBox>

    <GroupBox Grid.Row="0" Grid.RowSpan="2" Grid.Column="2" Header="カラーバリエーション">
        <StackPanel>
            <StackPanel.Resources>
                <ResourceDictionary>
                    <ResourceDictionary.MergedDictionaries>
                        <!-- ActionButtonStyleを使う為に必要 -->
                        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Snackbar.xaml" />
                    </ResourceDictionary.MergedDictionaries>
                </ResourceDictionary>
            </StackPanel.Resources>
            <materialDesign:Snackbar IsActive="True" Margin="10">
                <materialDesign:SnackbarMessage Content="デフォルト(Accent)" ActionContent="Action"/>
            </materialDesign:Snackbar>

            <materialDesign:Snackbar IsActive="True" Margin="10"
                                        ActionButtonStyle="{StaticResource MaterialDesignSnackbarActionLightButton}">
                <materialDesign:SnackbarMessage Content="Primary Light" ActionContent="Action"/>
            </materialDesign:Snackbar>

            <materialDesign:Snackbar IsActive="True" Margin="10"
                                        ActionButtonStyle="{StaticResource MaterialDesignSnackbarActionMidButton}">
                <materialDesign:SnackbarMessage Content="Primary Mid" ActionContent="Action"/>
            </materialDesign:Snackbar>

            <materialDesign:Snackbar IsActive="True" Margin="10"
                                        ActionButtonStyle="{StaticResource MaterialDesignSnackbarActionDarkButton}">
                <materialDesign:SnackbarMessage Content="Primary Dark" ActionContent="Action"/>
            </materialDesign:Snackbar>

        </StackPanel>
    </GroupBox>
</Grid>
using Livet;
using MaterialDesignThemes.Wpf;
using System;
using System.Linq;

namespace MdDemo.ViewModels
{
    public class MainWindowViewModel : ViewModel
    {
        public MainWindowViewModel()
        {
            Count = 0;

            MessageQueue1 = new SnackbarMessageQueue();
            MessageQueue2 = new SnackbarMessageQueue();
        }

        #region Count変更通知プロパティ
        private int _Count;

        public int Count
        {
            get
            { return _Count; }
            set
            { 
                if (_Count == value)
                    return;
                _Count = value;
                RaisePropertyChanged();
            }
        }
        #endregion

        public void CountUp()
        {
            Count++;
        }

        public SnackbarMessageQueue MessageQueue1 { get; }

        public void SendMessage()
        {
            MessageQueue1.Enqueue("メッセージ:" + DateTime.Now);
        }

        public SnackbarMessageQueue MessageQueue2 { get; }



        #region Total変更通知プロパティ
        private int _Total;

        public int Total
        {
            get
            { return _Total; }
            set
            { 
                if (_Total == value)
                    return;
                _Total = value;
                RaisePropertyChanged();
            }
        }
        #endregion


        public void SendActionMessage()
        {
            Total = 0;
            foreach(var n in Enumerable.Range(1, 5))
            {
                MessageQueue2.Enqueue(
                    "メッセージ:" + n,
                    "カウントアップ",
                    () => Total++);
            }
        }
    }
}
 Snackbarは以下の様に表示されます。
MaterialDesign Snackbar
 Snackbarに固定メッセージを表示させるだけの場合はSnackbarコントロールのMessageプロパティに表示させたいメッセージを入力しIsActiveプロパティでSnackbarの表示、非表示を制御します。
 この方法の場合IsActiveプロパティがTrueの間はずっとSnackbarが表示されます。

 Snackbarにアクションボタンを表示させる場合はSnackbarMessageを使用します。
 SnackbarMessageのContentに表示するメッセージを、ActionContentにアクションボタンのコンテンツを指定します。
 アクションボタンがクリックされた際にはActionClickイベントが発生します。
 サンプルコードではアクションボタン(カウントアップ)を押した際にCountをインクリメントしています。

 SnackbarへのメッセージはMessageQueueを使って送信することもできます。(たぶんこっちが本来の使い方)
 「MessageQueueを使う場合その1」では「送る」ボタンを押す際にボタンを押した際の時刻入りメッセージをMessageQueueに送信します。
 SnackbarはMessageQueueに送信があった場合、送られたメッセージを一定時間表示した後にSnackbarを非表示にします。 (Snackbarの表示・非表示が自動で行われます)
 ViewModelでSnackbarMessageQueue型のプロパティを用意し、SnackbarのMessageQueueプロパティとデータバインディングします。
 SnackbarMessageQueueのEnqueueメソッドでメッセージの送信を行います。
 メッセージのみ送る場合はEnqueueメソッドの引数に表示するテキストを指定するだけです。

 MessageQueueでアクション付きメッセージを送りたい場合はEnqueueメソッドの引数にメッセージの他にアクションボタンのコンテンツとアクションを指定します。
 このサンプルでは「カウントアップ」ボタンを押した際にTotalプロパティをインクリメントするアクションを指定しています。
 サンプルコードの様に連続してメッセージを送信した場合、送信した順番にSnackbarが表示されます。
 次のメッセージが送信されたからといって表示中のメッセージが即座に変更されることはありません。(一定時間が過ぎた後に次が表示されます)

 最後にアクションボタンのカラーバリエーションを紹介します。
 アクションボタンのスタイルを指定することでアクションボタンの色を変えることができます。
 アクションボタンのスタイルを指定するためにはResourceDictionaryにSnackbar.xamlを追加する必要があります。
スポンサーサイト

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

【Material Design Toolkit】 DatePicker

 DatePickerは日付を選択するためのコントロールで、TimePickerとほぼ同じ動きをします。
 Material Design Toolkitでは2種類のスタイルが定義されていますが、そのうちの1つはフロートヒント機能をONにしただけなので見た目や使い方はほぼ同じです。
<StackPanel>
    <DatePicker SelectedDate="{Binding Date}" Margin="10"/>
    <DatePicker SelectedDate="{Binding Date2}" Margin="10"
                Style="{StaticResource MaterialDesignFloatingHintDatePicker}"
                materialDesign:HintAssist.Hint="日付"
                SelectedDateFormat="Long"
                IsTodayHighlighted="False"
                FirstDayOfWeek="Monday"
                DisplayDateStart="2017/7/1" DisplayDateEnd="2017/7/25"/>
</StackPanel>
 このコードを実行すると以下の様になります。
MaterialDesign_DatePicker-1.png MaterialDesign_DatePicker-2.png
 TimePickerと同じような見た目で、日付テキストボックスとカレンダーボタンが表示されます。
 テキストボックスに日付を入力することもできますし、カレンダーから指定することもできます。
 SelectedDateFormatプロパティは日付テキストの書式設定でShort(デフォルト)の場合は「2017/07/01」の様に表示されます。
 Longの場合は「2017年7月2日」の様に表示されます。
 IsTodayHighlightedプロパティがTrueの場合はカレンダー表示時に今日の日付がハイライトされます。
 FirstDayOfWeekプロパティを変更するとカレンダーの週初めの曜日を変更できます。
 DisplayDateStartとDisplayDataEndはカレンダーに表示する範囲を指定できます。
 画像のカレンダーは7/1から7/25までを表示させるようにしているので、26日以降が非表示になっています。

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

【Material Design Toolkit】 TimePicker

 TimePickerは名前の通り時刻を指定するためのコントロールです。
 前回紹介したClockも時刻の指定は可能でしたが、TimePickerの方がより使いやすいコントロールになっています。(というかClockはTimePickerの一部と考えたほうがよさそうです。)
 このコードを実行すると以下の様になります。
MaterialDesign TimePicker1 MaterialDesign TimePicker2
 TimePickerは時刻の表示・編集用のテキストボックスと時計マークのボタンで構成されています。
 時計マークボタンを押すとClockが表示され時刻の変更ができます。
 テキストボックスから時刻を編集することも可能です。
 デフォルトではClockの表示はAM・PM表示ですが、Is24HoursをTrueにすることで24時間表記に変更できます。
 SelectedTimeFormatをLongにすることでTimePickerの時刻表示を秒まで表示することができますが、Clockコントロールでは秒の変更はできません。(テキスト入力でのみ変更可能です)
 FlowDirectionをRightToLeftにすると時計マークボタンとテキストボックスの順序が逆になります。

 TimePickerには標準スタイルの他にMaterialDesignFloatingHintTimePickerが定義されていますが、このスタイルはフロートヒントを表示させているだけで他の設定は標準スタイルと同じです。  

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

【Material Design Toolkit】 Clock

 ClockはWPFにはないコントロールで時間と分を指定することで時刻を変更することもできます。(秒の指定は無理みたいです)
<StackPanel Orientation="Horizontal">
    <GroupBox Header="AM.PM" Margin="5">
        <materialDesign:Clock Time="{Binding Date}" 
                                DisplayAutomation="Cycle"
                                DisplayMode="Hours"/>
    </GroupBox>

    <GroupBox Header="24時間表記" Margin="5">
        <materialDesign:Clock Time="{Binding Date2}" Is24Hours="True"/>
    </GroupBox>

    <GroupBox Header="分だけ指定" Margin="5">
        <materialDesign:Clock Time="{Binding Date3}"
                                DisplayAutomation="ToMinutesOnly"
                                DisplayMode="Minutes"/>
    </GroupBox>
</StackPanel>
 このコードを実行すると以下の様に表示されます。
MaterialDesign Clock
 TimeプロパティにDateTime型のプロパティをデータバインディングします。
 Is24HoursプロパティをfalseにするとAM・PMで時刻を表示します。(左のコントロール)
 Is24Hoursプロパティをtrueにすると24時間表記で時刻を表示します。(真ん中のコントロール)
 Clockコントロールでは見ての通り、時間と分を両方同時に表示しません。
 どちらを表示するかはDisplayModeプロパティで指定できます。
 DisplayAutomationプロパティをCycleに指定することで時間を指定すると分が表示されます。
 そして分を指定すると時間表示に戻ります。
 DisplayModeとDisplayAutomationを指定することで分だけ表示・変更するといったことも可能です。
 

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

【Material Design Toolkit】 Chip

 Chipはアイコンとコンテンツからなる小さなコントロールで、詳細情報へのエントリーポイントとして使用します。
<StackPanel>
    <materialDesign:Chip Content="Chip1" Margin="5" Click="Chip_Click"/>
    <materialDesign:Chip Icon="A" Content="Chip2" Margin="5"/>
    <materialDesign:Chip Content="Chip3" Margin="5"
                            IconBackground="{StaticResource SecondaryAccentBrush}"
                            IconForeground="{StaticResource SecondaryAccentForegroundBrush}">
        <materialDesign:Chip.Icon>
            <materialDesign:PackIcon Kind="Gift"/>
        </materialDesign:Chip.Icon>
    </materialDesign:Chip>
    <materialDesign:Chip Icon="C" Content="Chip4" IsDeletable="True" Margin="5"
                            DeleteClick="Chip_DeleteClick"/>
</StackPanel>
 このコードを実行すると以下の様になります。
MaterialDesign Chip
 ChipはIconプロパティとContentプロパティを持っていて、Iconプロパティを指定した場合は丸の中に指定したアイコンが表示されます。
 Iconプロパティを指定しない場合はアイコンは表示されません。
 Iconプロパティには文字だけでなく画像やPackIcon等も表示できます。
 Iconの色を指定したい場合はIconBackgroundプロパティとIconForegroundプロパティを変更します。

 Chipをクリックした場合はClickイベントが発生します。
 詳細情報の表示などのアクションを行いたい場合はClickイベントを使用してください。

 IsDeletableプロパティをTrueにするとChipの右端に×ボタンが表示されます。
 ×ボタンを押した場合はDeleteClickイベントが発生します。

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

カレンダー
06 | 2017/07 | 08
- - - - - - 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 - - - - -
全記事表示リンク

全ての記事を表示する

カテゴリ
タグリスト

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