Browse Source

Add some bubble notification animations + make IsClosing a direct property.

pull/2453/head
Jumar Macato 7 years ago
parent
commit
8283f3bca7
No known key found for this signature in database GPG Key ID: B19884DAC3A5BF3F
  1. 17
      src/Avalonia.Controls/Notifications/Notification.cs
  2. 28
      src/Avalonia.Themes.Default/NotificationArea.xaml

17
src/Avalonia.Controls/Notifications/Notification.cs

@ -2,13 +2,14 @@
using System.Reactive.Linq;
using System.Threading.Tasks;
using Avalonia.Controls.Primitives;
using Avalonia.Data;
using Avalonia.Interactivity;
namespace Avalonia.Controls.Notifications
{
public class Notification : ContentControl
{
private TimeSpan _closingAnimationTime = TimeSpan.Zero;
private TimeSpan _closingAnimationTime = TimeSpan.FromSeconds(0.25);
static Notification()
{
@ -42,7 +43,19 @@ namespace Avalonia.Controls.Notifications
});
}
public bool IsClosing { get; set; }
private bool _isClosing;
/// <summary>
/// Determines if the notification is already closing.
/// </summary>
public bool IsClosing
{
get { return _isClosing; }
private set { SetAndRaise(IsClosingProperty, ref _isClosing, value); }
}
public static readonly DirectProperty<Notification, bool> IsClosingProperty =
AvaloniaProperty.RegisterDirect<Notification, bool>(nameof(IsClosing), o => o.IsClosing);
/// <summary>
/// Defines the <see cref="NotificationCloseInvoked"/> event.

28
src/Avalonia.Themes.Default/NotificationArea.xaml

@ -28,6 +28,34 @@
</Border>
</ControlTemplate>
</Setter>
<Style.Animations>
<Animation Duration="0:0:0.200" Easing="CubicEaseInOut">
<KeyFrame Cue="0%">
<Setter Property="Opacity" Value="0"/>
<Setter Property="TranslateTransform.X" Value="250"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Opacity" Value="1"/>
<Setter Property="TranslateTransform.X" Value="0"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="Notification[IsClosing=true]">
<Style.Animations>
<Animation Duration="0:0:0.150" Easing="CubicEaseInOut" FillMode="Forward">
<KeyFrame Cue="0%">
<Setter Property="Opacity" Value="1"/>
<Setter Property="TranslateTransform.X" Value="0"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Opacity" Value="0"/>
<Setter Property="TranslateTransform.X" Value="250"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="Notification /template/ Button#PART_CloseButton">

Loading…
Cancel
Save