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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
|
<UserControl x:Class="MaterialDesignDemo.Snackbars"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden">
<Grid Margin="0 0 0 4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="340" />
<ColumnDefinition Width="340" />
<ColumnDefinition Width="340" />
<ColumnDefinition Width="340" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- example 1 -->
<Border Background="{DynamicResource MaterialDesignSelection}"
Padding="8 0 8 0">
<Grid>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock TextWrapping="WrapWithOverflow" Style="{DynamicResource MaterialDesignSubheadingTextBlock}">Example 1.</TextBlock>
<TextBlock TextWrapping="WrapWithOverflow" >Simple definition within XAML. Use the toggle to display the message.</TextBlock>
<ToggleButton IsChecked="{Binding ElementName=SnackbarOne, Path=IsActive, Mode=TwoWay}"
Margin="0 8 0 0"/>
</StackPanel>
<smtx:XamlDisplay Key="snackbar_1">
<!-- simplest form -->
<materialDesign:Snackbar Message="hello 1"
IsActive="False"
x:Name="SnackbarOne" />
</smtx:XamlDisplay>
</Grid>
</Border>
<!-- example 2 -->
<Border Background="{DynamicResource MaterialDesignPaper}"
Padding="8 0 8 0"
Grid.Column="1" Grid.Row="0">
<Grid>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock TextWrapping="WrapWithOverflow" Style="{DynamicResource MaterialDesignSubheadingTextBlock}">Example 2.</TextBlock>
<TextBlock TextWrapping="WrapWithOverflow" >View source to see message defined in long hand, allowing action button content to be set.</TextBlock>
<ToggleButton IsChecked="{Binding ElementName=SnackbarTwo, Path=IsActive, Mode=TwoWay}"
Margin="0 8 0 0" />
</StackPanel>
<smtx:XamlDisplay Key="snackbar_2">
<!-- long hand form for setting the message -->
<materialDesign:Snackbar IsActive="False" x:Name="SnackbarTwo" >
<materialDesign:SnackbarMessage Content="Hello 2" ActionContent="UNDO" />
</materialDesign:Snackbar>
</smtx:XamlDisplay>
</Grid>
</Border>
<!-- example 3 -->
<!--
* using a message queue to manage queuing of messages, and getting onto correct thread
* notice the shorthand syntax {materialDesign:MessageQueue} for creating a new message
queue without expanded XAML. useful in code-behind scenarios if you dont want to bind
a message queue in to the snackbar.
-->
<Border Background="{DynamicResource MaterialDesignSelection}"
Padding="8 0 8 0" Grid.Row="0" Grid.Column="2">
<Grid>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock TextWrapping="WrapWithOverflow" Style="{DynamicResource MaterialDesignSubheadingTextBlock}">Example 3.</TextBlock>
<TextBlock TextWrapping="WrapWithOverflow">In many real world scenario, notification display must deal with threading, queuing, and potentially heavy usage. A MessageQueue can be set to handle much of this for you, gicing the following benefits:</TextBlock>
<TextBlock TextWrapping="WrapWithOverflow" Margin="0 8 0 0" Text=" • Messages can be queued from any thread"/>
<TextBlock TextWrapping="WrapWithOverflow" Text=" • Message will auto hide after a time out period"/>
<TextBlock TextWrapping="WrapWithOverflow" Text=" • Notification will not time out if mouse is over it"/>
<TextBlock TextWrapping="WrapWithOverflow" Text=" • Can be paired with a DialogHost so timeout will pause if a active dialog"/>
<TextBlock TextWrapping="WrapWithOverflow" Text=" • Duplicate within a short period will be discarded"/>
<TextBlock TextWrapping="WrapWithOverflow" Text=" • A single message queue can be shared acros multiple Windows"/>
<TextBlock TextWrapping="WrapWithOverflow" Text=" • Works with code-behind and MVVM"/>
<Grid Margin="0 16 0 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox x:Name="MessageTextBox" VerticalAlignment="Top"
Grid.Column="0">Hello World</TextBox>
<Button Click="SnackBar3_OnClick" Margin="16 0 0 0"
Grid.Column="1">Send</Button>
</Grid>
</StackPanel>
<smtx:XamlDisplay Key="snackbar_3" VerticalContentAlignment="Top">
<materialDesign:Snackbar MessageQueue="{materialDesign:MessageQueue}"
x:Name="SnackbarThree" />
</smtx:XamlDisplay>
</Grid>
</Border>
<!-- example 4 -->
<!-- illustrates queueing uses some action command call backs -->
<Border Background="{DynamicResource MaterialDesignPaper}"
Padding="8 0 8 0" Grid.Column="3" Grid.Row="0">
<Grid>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock TextWrapping="WrapWithOverflow" Style="{DynamicResource MaterialDesignSubheadingTextBlock}">Example 4.</TextBlock>
<TextBlock TextWrapping="WrapWithOverflow">Illustrates queueing (including discarding of duplicates), and handling of commands. Action a notification to see a System.Trace response..</TextBlock>
<Grid Margin="0 16 0 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox AcceptsReturn="True" x:Name="ExampleFourTextBox" TextWrapping="Wrap"
Text="Message One
Message Two
Message Three
Duplicate
Duplicate
Duplicate
Start Fresh
Goodbye" />
<Button Click="SnackBar4_OnClick" HorizontalAlignment="Center" Grid.Column="1">Send</Button>
</Grid>
</StackPanel>
<smtx:XamlDisplay Key="snackbar_4">
<materialDesign:Snackbar MessageQueue="{materialDesign:MessageQueue}"
x:Name="SnackbarFour" />
</smtx:XamlDisplay>
</Grid>
</Border>
<!-- example 5 -->
<!-- full width snack bar -->
<Border Background="{DynamicResource MaterialDesignChipBackground}"
Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="0">
<StackPanel VerticalAlignment="Bottom">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="0 0 0 32">
<TextBlock TextWrapping="WrapWithOverflow" Style="{DynamicResource MaterialDesignSubheadingTextBlock}">Example 5.</TextBlock>
<TextBlock TextWrapping="WrapWithOverflow">Illustrates a full width Snackbar.</TextBlock>
<ToggleButton IsChecked="{Binding ElementName=SnackbarFive, Path=IsActive, Mode=TwoWay}"
Margin="0 8 0 0" />
</StackPanel>
<smtx:XamlDisplay Key="snackbar_5" HorizontalAlignment="Stretch">
<materialDesign:Snackbar HorizontalAlignment="Stretch"
x:Name="SnackbarFive">
<materialDesign:SnackbarMessage Content="This Snackbar is stretched horizontally. Consider allowing your content to push up."
ActionContent="OK" />
</materialDesign:Snackbar>
</smtx:XamlDisplay>
</StackPanel>
</Border>
<!-- example 6 -->
<!-- colour variations -->
<Border Grid.Column="2" Grid.Row="1">
<Border.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!-- here is where you can get additional snackbar button styles from -->
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Snackbar.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Border.Resources>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock TextWrapping="WrapWithOverflow" Style="{StaticResource MaterialDesignSubheadingTextBlock}">Example 6.</TextBlock>
<TextBlock TextWrapping="WrapWithOverflow">Action button colour variations.</TextBlock>
<smtx:XamlDisplay Key="snackbar_6" Margin="0 8 0 0">
<materialDesign:Snackbar IsActive="True">
<materialDesign:SnackbarMessage Content="Default - accent" ActionContent="ACCENT" />
</materialDesign:Snackbar>
</smtx:XamlDisplay>
<smtx:XamlDisplay Key="snackbar_7" Margin="0 8 0 0">
<materialDesign:Snackbar IsActive="True"
ActionButtonStyle="{StaticResource MaterialDesignSnackbarActionLightButton}">
<materialDesign:SnackbarMessage Content="Primary Light" ActionContent="LIGHT" />
</materialDesign:Snackbar>
</smtx:XamlDisplay>
<smtx:XamlDisplay Key="snackbar_8" Margin="0 8 0 0">
<materialDesign:Snackbar IsActive="True" ActionButtonStyle="{StaticResource MaterialDesignSnackbarActionMidButton}">
<materialDesign:SnackbarMessage Content="Primary Mid" ActionContent="MID" />
</materialDesign:Snackbar>
</smtx:XamlDisplay>
<smtx:XamlDisplay Key="snackbar_9" Margin="0 8 0 0">
<materialDesign:Snackbar IsActive="True"
ActionButtonStyle="{StaticResource MaterialDesignSnackbarActionDarkButton}">
<materialDesign:SnackbarMessage Content="Primary Dark" ActionContent="DARK" />
</materialDesign:Snackbar>
</smtx:XamlDisplay>
</StackPanel>
</Border>
</Grid>
</ScrollViewer>
</UserControl>
|
