Skip to content

Commit 5b9c9c5

Browse files
greuelpiratKeboo
greuelpirat
and
Keboo
authored
Added Snackbar.ActionButtonPlacement to support own line for action button (#1755)
* Added Snackbar.ActionButtonPlacement to support own line for action button (#1423) * Fixed typo Co-Authored-By: Kevin B <[email protected]> * Moved SnackbarActionButtonPlacementModeConverter to Converters (#1755) * SnackbarActionButtonPlacementModeConverter.ConvertBack throws InvalidOperationException (#1755) * Move Trigger for DockPanel.Dock into ControlTemplate (#1755) * Added SnackbarMessage.InlineActionButtonMaxHeight * Added SnackbarMessage.ContentMaxHeight, moved usage from ContentPresenter to DockPanel Co-authored-by: Kevin B <[email protected]>
1 parent 6490d2d commit 5b9c9c5

File tree

7 files changed

+180
-123
lines changed

7 files changed

+180
-123
lines changed

‎MainDemo.Wpf/Snackbars.xaml

Lines changed: 42 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<UserControl x:Class="MaterialDesignDemo.Snackbars"
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4-
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
4+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
77
xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
8-
mc:Ignorable="d"
8+
mc:Ignorable="d"
99
d:DesignHeight="300" d:DesignWidth="300">
1010

1111
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden">
@@ -22,40 +22,40 @@
2222
</Grid.RowDefinitions>
2323

2424
<!-- example 1 -->
25-
<Border Background="{DynamicResource MaterialDesignSelection}"
25+
<Border Background="{DynamicResource MaterialDesignSelection}"
2626
Padding="8 0 8 0">
2727
<Grid>
2828
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
2929
<TextBlock TextWrapping="WrapWithOverflow" Style="{StaticResource MaterialDesignSubtitle1TextBlock}">Example 1.</TextBlock>
30-
<TextBlock TextWrapping="WrapWithOverflow" >Simple definition within XAML. Use the toggle to display the message.</TextBlock>
30+
<TextBlock TextWrapping="WrapWithOverflow">Simple definition within XAML. Use the toggle to display the message.</TextBlock>
3131
<ToggleButton IsChecked="{Binding ElementName=SnackbarOne, Path=IsActive, Mode=TwoWay}"
32-
Margin="0 8 0 0"/>
32+
Margin="0 8 0 0" />
3333
</StackPanel>
3434

3535
<smtx:XamlDisplay Key="snackbar_1">
3636
<!-- simplest form -->
37-
<materialDesign:Snackbar Message="hello 1"
38-
IsActive="False"
39-
x:Name="SnackbarOne" />
37+
<materialDesign:Snackbar Message="hello 1"
38+
IsActive="False"
39+
x:Name="SnackbarOne" />
4040
</smtx:XamlDisplay>
4141
</Grid>
4242
</Border>
4343

4444
<!-- example 2 -->
45-
<Border Background="{DynamicResource MaterialDesignPaper}"
45+
<Border Background="{DynamicResource MaterialDesignPaper}"
4646
Padding="8 0 8 0"
4747
Grid.Column="1" Grid.Row="0">
4848
<Grid>
4949
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
5050
<TextBlock TextWrapping="WrapWithOverflow" Style="{StaticResource MaterialDesignSubtitle1TextBlock}">Example 2.</TextBlock>
51-
<TextBlock TextWrapping="WrapWithOverflow" >View source to see message defined in long hand, allowing action button content to be set.</TextBlock>
51+
<TextBlock TextWrapping="WrapWithOverflow">View source to see message defined in long hand, allowing action button content to be set.</TextBlock>
5252
<ToggleButton IsChecked="{Binding ElementName=SnackbarTwo, Path=IsActive, Mode=TwoWay}"
5353
Margin="0 8 0 0" />
5454
</StackPanel>
5555

5656
<smtx:XamlDisplay Key="snackbar_2">
5757
<!-- long hand form for setting the message -->
58-
<materialDesign:Snackbar IsActive="False" x:Name="SnackbarTwo" >
58+
<materialDesign:Snackbar IsActive="False" x:Name="SnackbarTwo">
5959
<materialDesign:SnackbarMessage Content="Hello 2" ActionContent="UNDO" />
6060
</materialDesign:Snackbar>
6161
</smtx:XamlDisplay>
@@ -66,34 +66,30 @@
6666
<!--
6767
* using a message queue to manage queuing of messages, and getting onto correct thread
6868
* notice the shorthand syntax {materialDesign:MessageQueue} for creating a new message
69-
queue without expanded XAML. useful in code-behind scenarios if you dont want to bind
69+
queue without expanded XAML. useful in code-behind scenarios if you do not want to bind
7070
a message queue in to the snackbar.
7171
-->
72-
<Border Background="{DynamicResource MaterialDesignSelection}"
72+
<Border Background="{DynamicResource MaterialDesignSelection}"
7373
Padding="8 0 8 0" Grid.Row="0" Grid.Column="2">
7474
<Grid>
7575
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
7676
<TextBlock TextWrapping="WrapWithOverflow" Style="{StaticResource MaterialDesignSubtitle1TextBlock}">Example 3.</TextBlock>
7777
<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>
78-
<TextBlock TextWrapping="WrapWithOverflow" Margin="0 8 0 0" Text=" • Messages can be queued from any thread"/>
79-
<TextBlock TextWrapping="WrapWithOverflow" Text=" • Message will auto hide after a time out period"/>
80-
<TextBlock TextWrapping="WrapWithOverflow" Text=" • Notification will not time out if mouse is over it"/>
81-
<TextBlock TextWrapping="WrapWithOverflow" Text=" • Can be paired with a DialogHost so timeout will pause if a active dialog"/>
82-
<TextBlock TextWrapping="WrapWithOverflow" Text=" • Duplicate within a short period will be discarded"/>
83-
<TextBlock TextWrapping="WrapWithOverflow" Text=" • A single message queue can be shared acros multiple Windows"/>
84-
<TextBlock TextWrapping="WrapWithOverflow" Text=" • Works with code-behind and MVVM"/>
78+
<TextBlock TextWrapping="WrapWithOverflow" Margin="0 8 0 0" Text=" • Messages can be queued from any thread" />
79+
<TextBlock TextWrapping="WrapWithOverflow" Text=" • Message will auto hide after a time out period" />
80+
<TextBlock TextWrapping="WrapWithOverflow" Text=" • Notification will not time out if mouse is over it" />
81+
<TextBlock TextWrapping="WrapWithOverflow" Text=" • Can be paired with a DialogHost so timeout will pause if a active dialog" />
82+
<TextBlock TextWrapping="WrapWithOverflow" Text=" • Duplicate within a short period will be discarded" />
83+
<TextBlock TextWrapping="WrapWithOverflow" Text=" • A single message queue can be shared acros multiple Windows" />
84+
<TextBlock TextWrapping="WrapWithOverflow" Text=" • Works with code-behind and MVVM" />
8585
<Grid Margin="0 16 0 0">
8686
<Grid.ColumnDefinitions>
8787
<ColumnDefinition Width="*" />
8888
<ColumnDefinition Width="Auto" />
8989
</Grid.ColumnDefinitions>
90-
<TextBox x:Name="MessageTextBox" VerticalAlignment="Top"
91-
Grid.Column="0">Hello World</TextBox>
92-
<Button Click="SnackBar3_OnClick" Margin="16 0 0 0"
93-
Grid.Column="1">Send</Button>
90+
<TextBox x:Name="MessageTextBox" VerticalAlignment="Top" Grid.Column="0">Hello World</TextBox>
91+
<Button Click="SnackBar3_OnClick" Margin="16 0 0 0" Grid.Column="1">Send</Button>
9492
</Grid>
95-
96-
9793
</StackPanel>
9894
<smtx:XamlDisplay Key="snackbar_3" VerticalContentAlignment="Top">
9995
<materialDesign:Snackbar MessageQueue="{materialDesign:MessageQueue}"
@@ -104,7 +100,7 @@
104100

105101
<!-- example 4 -->
106102
<!-- illustrates queueing uses some action command call backs -->
107-
<Border Background="{DynamicResource MaterialDesignPaper}"
103+
<Border Background="{DynamicResource MaterialDesignPaper}"
108104
Padding="8 0 8 0" Grid.Column="3" Grid.Row="0">
109105
<Grid>
110106
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
@@ -117,20 +113,20 @@
117113
<ColumnDefinition Width="Auto" />
118114
</Grid.ColumnDefinitions>
119115
<TextBox AcceptsReturn="True" x:Name="ExampleFourTextBox" TextWrapping="Wrap"
120-
Text="Message One&#x0d;&#x0a;Message Two&#x0d;&#x0a;Message Three&#x0d;&#x0a;Duplicate&#x0d;&#x0a;Duplicate&#x0d;&#x0a;Duplicate&#x0d;&#x0a;Start Fresh&#x0d;&#x0a;Goodbye" />
116+
Text="Message One&#x0d;&#x0a;Message Two&#x0d;&#x0a;Message Three&#x0d;&#x0a;Duplicate&#x0d;&#x0a;Duplicate&#x0d;&#x0a;Duplicate&#x0d;&#x0a;Start Fresh&#x0d;&#x0a;Goodbye" />
121117
<Button Click="SnackBar4_OnClick" HorizontalAlignment="Center" Grid.Column="1">Send</Button>
122118
</Grid>
123119
</StackPanel>
124120
<smtx:XamlDisplay Key="snackbar_4">
125121
<materialDesign:Snackbar MessageQueue="{materialDesign:MessageQueue}"
126-
x:Name="SnackbarFour" />
122+
x:Name="SnackbarFour" />
127123
</smtx:XamlDisplay>
128124
</Grid>
129125
</Border>
130126

131127
<!-- example 5 -->
132128
<!-- full width snack bar -->
133-
<Border Background="{DynamicResource MaterialDesignChipBackground}"
129+
<Border Background="{DynamicResource MaterialDesignChipBackground}"
134130
Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="0">
135131
<StackPanel VerticalAlignment="Bottom">
136132
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"
@@ -142,9 +138,9 @@
142138
</StackPanel>
143139
<smtx:XamlDisplay Key="snackbar_5" HorizontalAlignment="Stretch">
144140
<materialDesign:Snackbar HorizontalAlignment="Stretch"
145-
x:Name="SnackbarFive">
141+
x:Name="SnackbarFive">
146142
<materialDesign:SnackbarMessage Content="This Snackbar is stretched horizontally. Consider allowing your content to push up."
147-
ActionContent="OK" />
143+
ActionContent="OK" />
148144
</materialDesign:Snackbar>
149145
</smtx:XamlDisplay>
150146
</StackPanel>
@@ -159,6 +155,9 @@
159155
<!-- here is where you can get additional snackbar button styles from -->
160156
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Snackbar.xaml" />
161157
</ResourceDictionary.MergedDictionaries>
158+
<Style TargetType="materialDesign:Snackbar" BasedOn="{StaticResource {x:Type materialDesign:Snackbar}}">
159+
<Setter Property="Width" Value="288" />
160+
</Style>
162161
</ResourceDictionary>
163162
</Border.Resources>
164163
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
@@ -171,27 +170,32 @@
171170
</smtx:XamlDisplay>
172171
<smtx:XamlDisplay Key="snackbar_7" Margin="0 8 0 0">
173172
<materialDesign:Snackbar IsActive="True"
174-
ActionButtonStyle="{StaticResource MaterialDesignSnackbarActionLightButton}">
175-
<materialDesign:SnackbarMessage Content="Primary Light" ActionContent="LIGHT" />
173+
ActionButtonStyle="{StaticResource MaterialDesignSnackbarActionLightButton}">
174+
<materialDesign:SnackbarMessage Content="Primary Light - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." ActionContent="LIGHT - very long text" />
176175
</materialDesign:Snackbar>
177176
</smtx:XamlDisplay>
178177
<smtx:XamlDisplay Key="snackbar_8" Margin="0 8 0 0">
179-
<materialDesign:Snackbar IsActive="True" ActionButtonStyle="{StaticResource MaterialDesignSnackbarActionMidButton}">
178+
<materialDesign:Snackbar IsActive="True"
179+
ActionButtonStyle="{StaticResource MaterialDesignSnackbarActionMidButton}"
180+
ActionButtonPlacement="Inline">
180181
<materialDesign:SnackbarMessage Content="Primary Mid" ActionContent="MID" />
181182
</materialDesign:Snackbar>
182183
</smtx:XamlDisplay>
183184
<smtx:XamlDisplay Key="snackbar_9" Margin="0 8 0 0">
184185
<materialDesign:Snackbar IsActive="True"
185-
ActionButtonStyle="{StaticResource MaterialDesignSnackbarActionDarkButton}">
186-
<materialDesign:SnackbarMessage Content="Primary Dark" ActionContent="DARK" />
186+
ActionButtonStyle="{StaticResource MaterialDesignSnackbarActionDarkButton}"
187+
ActionButtonPlacement="SeparateLine">
188+
<materialDesign:SnackbarMessage
189+
Content="Primary Dark"
190+
ActionContent="DARK" />
187191
</materialDesign:Snackbar>
188192
</smtx:XamlDisplay>
189193
</StackPanel>
190194
</Border>
191195

192196
<!-- example 7 -->
193197
<!-- message duration override -->
194-
<Border Background="{DynamicResource MaterialDesignPaper}"
198+
<Border Background="{DynamicResource MaterialDesignPaper}"
195199
Padding="8 0 8 0" Grid.Column="3" Grid.Row="1">
196200
<Grid>
197201
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
@@ -219,4 +223,3 @@
219223
</Grid>
220224
</ScrollViewer>
221225
</UserControl>
222-

‎MaterialDesignThemes.Wpf/Converters/SnackbarActionButtonPlacementModeConverter.cs

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
using System;
2+
using System.Globalization;
3+
using System.Windows.Controls;
4+
using System.Windows.Data;
5+
6+
namespace MaterialDesignThemes.Wpf.Converters
7+
{
8+
public class SnackbarActionButtonPlacementModeConverter : IMultiValueConverter
9+
{
10+
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
11+
{
12+
var mode = (SnackbarActionButtonPlacementMode) values[0];
13+
var inlineMaxHeight = (double) values[1];
14+
var actualHeight = (double) values[2];
15+
return mode switch
16+
{
17+
SnackbarActionButtonPlacementMode.Auto when actualHeight <= inlineMaxHeight => Dock.Right,
18+
SnackbarActionButtonPlacementMode.Auto => Dock.Bottom,
19+
SnackbarActionButtonPlacementMode.Inline => Dock.Right,
20+
SnackbarActionButtonPlacementMode.SeparateLine => Dock.Bottom,
21+
_ => Dock.Right
22+
};
23+
}
24+
25+
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) => throw new InvalidOperationException();
26+
}
27+
}

0 commit comments

Comments
 (0)