moved Snackbar animations from XAML to code

Author: spiegelp

MainDemo.Wpf/Snackbar.xaml

@@ -42,7 +42,7 @@
 
                 <materialDesign:Snackbar Grid.ColumnSpan="3" Grid.Row="4" x:Name="snackbar" Mode="HalfAutomatic" ActionClick="SnackbarActionClickHandler" />
                 <!-- properties will be set in the order in the xaml, so set the Mode property first for the manual mode -->
-                <materialDesign:Snackbar Grid.Column="3" Grid.Row="4" x:Name="manualSnackbar" Mode="Manual" Content="This is a manually controlled Snackbar." IsOpen="{Binding Path=IsChecked}" />
+                <materialDesign:Snackbar Grid.Column="3" Grid.Row="4" x:Name="manualSnackbar" Mode="Manual" Content="This is a manually controlled Snackbar." IsOpen="{Binding Path=IsChecked, Mode=TwoWay}" />
             </Grid>
         </ScrollViewer>
     </Grid>

MaterialDesignThemes.Wpf/Snackbar.cs

@@ -7,6 +7,7 @@
 using System.Windows.Controls;
 using System.Windows.Input;
 using System.Windows.Media;
+using System.Windows.Media.Animation;
 using System.Windows.Threading;
 
 namespace MaterialDesignThemes.Wpf
@@ -16,13 +17,17 @@ namespace MaterialDesignThemes.Wpf
     /// </summary>
     public class Snackbar : ContentControl
     {
-        public const string PartActionButtonName = "PART_actionButton";
+        private const string PartActionButtonName = "PART_actionButton";
+        private const string PartContentGridName = "PART_contentGrid";
+        private const string PartContentPanelName = "PART_contentPanel";
 
         /// <summary>
-        /// The duration of the animation in milliseconds.
+        /// The duration of the open and close animations in milliseconds.
         /// </summary>
         public const int AnimationDuration = 300;
 
+        private const int OpacityAnimationHintOffset = 50;
+
         /// <summary>
         /// The minimum timeout for a visible <see cref="Snackbar" /> in milliseconds.
         /// </summary>
@@ -150,22 +155,45 @@ public bool IsOpen
             }
         }
 
-        private async static void IsOpenChangedHandler(DependencyObject sender, DependencyPropertyChangedEventArgs args)
+        private static void IsOpenChangedHandler(DependencyObject sender, DependencyPropertyChangedEventArgs args)
         {
-            // the animations are triggered by the value of the IsOpen property
-
+            // trigger the animations
             Snackbar snackbar = (Snackbar)sender;
 
-            // stop the timer because it may mess up the behaviour of the Snackbar
-            snackbar._timer?.Stop();
-
             if ((bool)args.NewValue)
             {
-                await snackbar.ShowAsync();
+                if (snackbar._openStoryboard != null)
+                {
+                    // set the duration of the dummy visibility timeout animation as it may has changed since the last call
+                    if (snackbar._dummyVisibilityAnimation != null)
+                    {
+                        int timeout = snackbar.VisibilityTimeout;
+
+                        if (timeout < MinimumVisibilityTimeout)
+                        {
+                            timeout = MinimumVisibilityTimeout;
+                        }
+
+                        snackbar._dummyVisibilityAnimation.Duration = TimeSpan.FromMilliseconds(timeout);
+                    }
+
+                    // start the open animation
+                    snackbar._openStoryboard.Begin(snackbar, true);
+                }
             }
             else
             {
-                await snackbar.HideAsync();
+                // stop the open animation if the Snackbar should close before the visibility timeout is reached
+                if (snackbar._openStoryboard != null)
+                {
+                    snackbar._openStoryboard.Stop(snackbar);
+                }
+
+                // start the close animation
+                if (snackbar._closeStoryboard != null)
+                {
+                    snackbar._closeStoryboard.Begin(snackbar, true);
+                }
             }
         }
 
@@ -209,8 +237,9 @@ public int VisibilityTimeout
             }
         }
 
-        // used to implement the behaviour of the HalfAutomatic mode defined in the Material Design specs
-        private DispatcherTimer _timer;
+        private Storyboard _openStoryboard;
+        private Storyboard _closeStoryboard;
+        private DoubleAnimation _dummyVisibilityAnimation;
 
         private Button _actionButton;
 
@@ -219,13 +248,14 @@ static Snackbar()
             DefaultStyleKeyProperty.OverrideMetadata(typeof(Snackbar), new FrameworkPropertyMetadata(typeof(Snackbar)));
 
             ContentProperty.OverrideMetadata(typeof(Snackbar), new FrameworkPropertyMetadata(ContentChangedHandler));
-            TagProperty.OverrideMetadata(typeof(Snackbar), new FrameworkPropertyMetadata("0"));
+            TagProperty.OverrideMetadata(typeof(Snackbar), new FrameworkPropertyMetadata(0.0));
         }
 
         public Snackbar() : base() { }
 
         public override void OnApplyTemplate()
         {
+            // set the event handler for the action button from the template
             if (_actionButton != null)
             {
                 _actionButton.Click -= ActionButtonClickHandler;
@@ -238,28 +268,80 @@ public override void OnApplyTemplate()
                 _actionButton.Click += ActionButtonClickHandler;
             }
 
+            // Storyboard for the open animation
+            _openStoryboard = new Storyboard();
+
+            // height
+            DoubleAnimation contentPanelTagAnimation = new DoubleAnimation(0.0, 1.0, TimeSpan.FromMilliseconds(AnimationDuration));
+            contentPanelTagAnimation.BeginTime = TimeSpan.FromMilliseconds(0.0);
+            contentPanelTagAnimation.EasingFunction = new QuarticEase() { EasingMode = EasingMode.EaseOut };
+            Storyboard.SetTarget(contentPanelTagAnimation, GetTemplateChild(PartContentPanelName));
+            Storyboard.SetTargetProperty(contentPanelTagAnimation, new PropertyPath(StackPanel.TagProperty));
+            _openStoryboard.Children.Add(contentPanelTagAnimation);
+
+            // opacity of the content
+            DoubleAnimation contentGridOpacityAnimation = new DoubleAnimation(0.0, TimeSpan.FromMilliseconds(0.0));
+            contentGridOpacityAnimation.BeginTime = TimeSpan.FromMilliseconds(0.0);
+            Storyboard.SetTarget(contentGridOpacityAnimation, GetTemplateChild(PartContentPanelName));
+            Storyboard.SetTargetProperty(contentGridOpacityAnimation, new PropertyPath(Grid.OpacityProperty));
+            _openStoryboard.Children.Add(contentGridOpacityAnimation);
+
+            contentGridOpacityAnimation = new DoubleAnimation(0.0, 1.0, TimeSpan.FromMilliseconds(AnimationDuration - OpacityAnimationHintOffset));
+            contentGridOpacityAnimation.BeginTime = TimeSpan.FromMilliseconds(OpacityAnimationHintOffset);
+            contentGridOpacityAnimation.EasingFunction = new QuarticEase() { EasingMode = EasingMode.EaseOut };
+            Storyboard.SetTarget(contentGridOpacityAnimation, GetTemplateChild(PartContentPanelName));
+            Storyboard.SetTargetProperty(contentGridOpacityAnimation, new PropertyPath(Grid.OpacityProperty));
+            _openStoryboard.Children.Add(contentGridOpacityAnimation);
+
+            // dummy animation to keep the HalfAutomatic mode Snackbar open during the visibility timeout
+            _dummyVisibilityAnimation = new DoubleAnimation(1.0, 1.0, TimeSpan.FromMilliseconds(VisibilityTimeout));
+            _dummyVisibilityAnimation.BeginTime = TimeSpan.FromMilliseconds(AnimationDuration);
+            Storyboard.SetTarget(_dummyVisibilityAnimation, GetTemplateChild(PartContentPanelName));
+            Storyboard.SetTargetProperty(_dummyVisibilityAnimation, new PropertyPath(StackPanel.TagProperty));
+            _openStoryboard.Children.Add(_dummyVisibilityAnimation);
+
+            _openStoryboard.Completed += (object sender, EventArgs args) =>
+            {
+                // close the Snackbar after the animation in the HalfAutomatic mode
+                if (Mode == SnackbarMode.HalfAutomatic)
+                {
+                    IsOpen = false;
+                }
+            };
+
+            // Storyboard for the close animation
+            _closeStoryboard = new Storyboard();
+
+            // height
+            contentPanelTagAnimation = new DoubleAnimation(1.0, 0.0, TimeSpan.FromMilliseconds(AnimationDuration));
+            contentPanelTagAnimation.BeginTime = TimeSpan.FromMilliseconds(0.0);
+            contentPanelTagAnimation.EasingFunction = new QuarticEase() { EasingMode = EasingMode.EaseOut };
+            Storyboard.SetTarget(contentPanelTagAnimation, GetTemplateChild(PartContentPanelName));
+            Storyboard.SetTargetProperty(contentPanelTagAnimation, new PropertyPath(StackPanel.TagProperty));
+            _closeStoryboard.Children.Add(contentPanelTagAnimation);
+
             base.OnApplyTemplate();
         }
 
         private async Task ShowContentAsync(object content)
         {
             if (Mode == SnackbarMode.HalfAutomatic)
             {
-                // first hide the Snackbar if its already visible
+                // first close the Snackbar if it is already visible
                 if (IsOpen)
                 {
                     IsOpen = false;
 
-                    // wait for the animation, otherwise the new content will already be shown in the hide animation
+                    // wait for the animation, otherwise the new content will already be shown in the close animation
                     await Task.Delay(AnimationDuration);
                 }
 
-                // now set the new content and show the Snackbar
+                // now set the new content and open the Snackbar
                 InternalContent = content;
 
                 if (content != null)
                 {
-                    // only show it with content
+                    // only open it with content
                     IsOpen = true;
 
                     await Task.Delay(AnimationDuration);
@@ -272,44 +354,6 @@ private async Task ShowContentAsync(object content)
             }
         }
 
-        private async Task ShowAsync()
-        {
-            // wait for the animation
-            await Task.Delay(AnimationDuration);
-
-            // start the timeout in HalfAutomatic mode
-            if (Mode == SnackbarMode.HalfAutomatic)
-            {
-                // start the timer which will hide the Snackbar
-                int timeout = VisibilityTimeout;
-
-                if (timeout < MinimumVisibilityTimeout)
-                {
-                    timeout = MinimumVisibilityTimeout;
-                }
-
-                if (_timer == null)
-                {
-                    _timer = new DispatcherTimer();
-                }
-
-                _timer.Tick += async (object sender, EventArgs args) =>
-                {
-                    IsOpen = false;
-
-                    await Task.Delay(AnimationDuration);
-                };
-                _timer.Interval = new TimeSpan(0, 0, 0, 0, timeout);
-                _timer.Start();
-            }
-        }
-
-        private async Task HideAsync()
-        {
-            // wait for the animation
-            await Task.Delay(AnimationDuration);
-        }
-
         private async void ActionButtonClickHandler(object sender, RoutedEventArgs args)
         {
             // do not you raise the event if the Snackbar is not fully visible
@@ -320,7 +364,7 @@ private async void ActionButtonClickHandler(object sender, RoutedEventArgs args)
 
             Task task = null;
 
-            // hide the Snackbar in HalfAutomatic mode
+            // close the Snackbar in HalfAutomatic mode
             if (Mode == SnackbarMode.HalfAutomatic)
             {
                 IsOpen = false;

MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Snackbar.xaml

@@ -20,7 +20,7 @@
                 <ControlTemplate TargetType="{x:Type wpf:Snackbar}">
                     <Grid HorizontalAlignment="Center" VerticalAlignment="Bottom">
                         <Border x:Name="PART_border" Background="#FF323232" CornerRadius="2" MaxWidth="568" MinWidth="288" SnapsToDevicePixels="True">
-                            <StackPanel x:Name="PART_contentPanel" HorizontalAlignment="Stretch" Orientation="Vertical">
+                            <StackPanel x:Name="PART_contentPanel" HorizontalAlignment="Stretch" Orientation="Vertical" SnapsToDevicePixels="True">
                                 <StackPanel.Tag>
                                     <system:Double>0.0</system:Double>
                                 </StackPanel.Tag>
@@ -52,7 +52,7 @@
                                             </DataTemplate>
                                         </ContentControl.Resources>
                                     </ContentControl>
-                                    <Button x:Name="PART_actionButton" Grid.Column="1" Content="{Binding Path=ActionLabel, RelativeSource={RelativeSource TemplatedParent}}">
+                                    <Button x:Name="PART_actionButton" Grid.Column="1" Content="{Binding Path=ActionLabel, RelativeSource={RelativeSource TemplatedParent}}" SnapsToDevicePixels="True">
                                         <Button.Style>
                                             <Style TargetType="{x:Type Button}" BasedOn="{StaticResource MaterialDesignFlatAccentButton}">
                                                 <Setter Property="Margin" Value="8,0,8,0" />
@@ -66,38 +66,6 @@
                             </StackPanel>
                         </Border>
                     </Grid>
-                    <ControlTemplate.Triggers>
-                        <Trigger Property="IsOpen" Value="True">
-                            <Trigger.EnterActions>
-                                <BeginStoryboard>
-                                    <Storyboard>
-                                        <DoubleAnimation Storyboard.TargetName="PART_contentPanel" Storyboard.TargetProperty="Tag" From="0" To="1" Duration="0:0:0.3">
-                                            <DoubleAnimation.EasingFunction>
-                                                <QuarticEase EasingMode="EaseOut" />
-                                            </DoubleAnimation.EasingFunction>
-                                        </DoubleAnimation>
-                                        <DoubleAnimation Storyboard.TargetName="PART_contentGrid" Storyboard.TargetProperty="Opacity" To="0" BeginTime="0" Duration="0" />
-                                        <DoubleAnimation Storyboard.TargetName="PART_contentGrid" Storyboard.TargetProperty="Opacity" From="0" To="1" BeginTime="0:0:0.05" Duration="0:0:0.25">
-                                            <DoubleAnimation.EasingFunction>
-                                                <QuarticEase EasingMode="EaseOut" />
-                                            </DoubleAnimation.EasingFunction>
-                                        </DoubleAnimation>
-                                    </Storyboard>
-                                </BeginStoryboard>
-                            </Trigger.EnterActions>
-                            <Trigger.ExitActions>
-                                <BeginStoryboard>
-                                    <Storyboard>
-                                        <DoubleAnimation Storyboard.TargetName="PART_contentPanel" Storyboard.TargetProperty="Tag" From="1" To="0" Duration="0:0:0.3">
-                                            <DoubleAnimation.EasingFunction>
-                                                <QuarticEase EasingMode="EaseOut" />
-                                            </DoubleAnimation.EasingFunction>
-                                        </DoubleAnimation>
-                                    </Storyboard>
-                                </BeginStoryboard>
-                            </Trigger.ExitActions>
-                        </Trigger>
-                    </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>