【Material Design Toolkit】 Snackbar
Snackbarは短いメッセージの通知を行えるコントロールです。
Material Design ToolkitのSnackbarではメッセージを表示するだけでなく、ボタンを１つ設置しボタンを押した際に処理を実行させることもできます。
Snackbarに固定メッセージを表示させるだけの場合はSnackbarコントロールのMessageプロパティに表示させたいメッセージを入力しIsActiveプロパティでSnackbarの表示、非表示を制御します。
この方法の場合IsActiveプロパティがTrueの間はずっとSnackbarが表示されます。
Snackbarにアクションボタンを表示させる場合はSnackbarMessageを使用します。
SnackbarMessageのContentに表示するメッセージを、ActionContentにアクションボタンのコンテンツを指定します。
アクションボタンがクリックされた際にはActionClickイベントが発生します。
サンプルコードではアクションボタン（カウントアップ）を押した際にCountをインクリメントしています。
SnackbarへのメッセージはMessageQueueを使って送信することもできます。（たぶんこっちが本来の使い方）
「MessageQueueを使う場合その１」では「送る」ボタンを押す際にボタンを押した際の時刻入りメッセージをMessageQueueに送信します。
SnackbarはMessageQueueに送信があった場合、送られたメッセージを一定時間表示した後にSnackbarを非表示にします。 (Snackbarの表示・非表示が自動で行われます）
ViewModelでSnackbarMessageQueue型のプロパティを用意し、SnackbarのMessageQueueプロパティとデータバインディングします。
SnackbarMessageQueueのEnqueueメソッドでメッセージの送信を行います。
メッセージのみ送る場合はEnqueueメソッドの引数に表示するテキストを指定するだけです。
MessageQueueでアクション付きメッセージを送りたい場合はEnqueueメソッドの引数にメッセージの他にアクションボタンのコンテンツとアクションを指定します。
このサンプルでは「カウントアップ」ボタンを押した際にTotalプロパティをインクリメントするアクションを指定しています。
サンプルコードの様に連続してメッセージを送信した場合、送信した順番にSnackbarが表示されます。
次のメッセージが送信されたからといって表示中のメッセージが即座に変更されることはありません。（一定時間が過ぎた後に次が表示されます）
最後にアクションボタンのカラーバリエーションを紹介します。
アクションボタンのスタイルを指定することでアクションボタンの色を変えることができます。
アクションボタンのスタイルを指定するためにはResourceDictionaryにSnackbar.xamlを追加する必要があります。
<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を使う場合その１">
<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を使う場合その２">
<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は以下の様に表示されます。
Snackbarに固定メッセージを表示させるだけの場合はSnackbarコントロールのMessageプロパティに表示させたいメッセージを入力しIsActiveプロパティでSnackbarの表示、非表示を制御します。
この方法の場合IsActiveプロパティがTrueの間はずっとSnackbarが表示されます。
Snackbarにアクションボタンを表示させる場合はSnackbarMessageを使用します。
SnackbarMessageのContentに表示するメッセージを、ActionContentにアクションボタンのコンテンツを指定します。
アクションボタンがクリックされた際にはActionClickイベントが発生します。
サンプルコードではアクションボタン（カウントアップ）を押した際にCountをインクリメントしています。
SnackbarへのメッセージはMessageQueueを使って送信することもできます。（たぶんこっちが本来の使い方）
「MessageQueueを使う場合その１」では「送る」ボタンを押す際にボタンを押した際の時刻入りメッセージをMessageQueueに送信します。
SnackbarはMessageQueueに送信があった場合、送られたメッセージを一定時間表示した後にSnackbarを非表示にします。 (Snackbarの表示・非表示が自動で行われます）
ViewModelでSnackbarMessageQueue型のプロパティを用意し、SnackbarのMessageQueueプロパティとデータバインディングします。
SnackbarMessageQueueのEnqueueメソッドでメッセージの送信を行います。
メッセージのみ送る場合はEnqueueメソッドの引数に表示するテキストを指定するだけです。
MessageQueueでアクション付きメッセージを送りたい場合はEnqueueメソッドの引数にメッセージの他にアクションボタンのコンテンツとアクションを指定します。
このサンプルでは「カウントアップ」ボタンを押した際にTotalプロパティをインクリメントするアクションを指定しています。
サンプルコードの様に連続してメッセージを送信した場合、送信した順番にSnackbarが表示されます。
次のメッセージが送信されたからといって表示中のメッセージが即座に変更されることはありません。（一定時間が過ぎた後に次が表示されます）
最後にアクションボタンのカラーバリエーションを紹介します。
アクションボタンのスタイルを指定することでアクションボタンの色を変えることができます。
アクションボタンのスタイルを指定するためにはResourceDictionaryにSnackbar.xamlを追加する必要があります。
スポンサーサイト
- 関連するタグ:
- WPF
- MaterialDesignToolkit
