Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(InAppNotifications): improve control #1441

Merged
merged 24 commits into from
Nov 7, 2017
Merged

feat(InAppNotifications): improve control #1441

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
844a176
feat(InAppNotifications): add events Opening, Opened and Dismissing
Odonno Aug 26, 2017
4af5fb8
docs(InAppNotifications): add docs on new events
Odonno Aug 26, 2017
348ab1c
feat(InAppNotifications): add details on Dismissing event args
Odonno Aug 26, 2017
4514004
feat(InAppNotifications): improve animations
Odonno Aug 27, 2017
13dbd44
refactor(InAppNotifications): split styles into separate files
Odonno Aug 28, 2017
8b2722a
refactor(InAppNotifications): improve docs and code
Odonno Aug 28, 2017
a8965f6
feat(InAppNotifications): add ability to cancel the opening/closing
Odonno Aug 28, 2017
27539f5
docs(InAppNotifications): update animation part
Odonno Aug 29, 2017
562ac87
docs(InAppNotifications): add styling part
Odonno Aug 29, 2017
9676d3b
docs(InAppNotifications): fix typos and improve animation property de…
Odonno Aug 29, 2017
fb86ea9
merge
Odonno Aug 30, 2017
ad14b9b
fix(InAppNotifications): update animation properties on the control w…
Odonno Aug 30, 2017
227619a
fix(InAppNotifications): add default values for animation in default …
Odonno Aug 31, 2017
828c517
feat(InAppNotification): mark Dimiss events as obsolete and replace t…
Odonno Sep 30, 2017
99ccc76
Moved animation properties to template
nmetulev Oct 9, 2017
31d2568
merge
Odonno Nov 4, 2017
0b0dfb2
Merge branch 'nmetulev/InAppNotifications' of https://github.com/Micr…
Odonno Nov 4, 2017
1178f6b
docs(InAppNotification): update code blocks
Odonno Nov 4, 2017
f5e38ef
docs(InAppNotification): change type of AnimationDuration property
Odonno Nov 4, 2017
fb5282f
docs(InAppNotification): use Note block
Odonno Nov 5, 2017
2093c1a
docs(SampleApp): fix docs on TimeSpan
Odonno Nov 7, 2017
b8c5e5f
refactor(InAppNotification): remove Dismissing event
Odonno Nov 7, 2017
33a1c3e
docs(InAppNotification): add missing header
Odonno Nov 7, 2017
f9ec93a
feat(InAppNotification): add dismiss kind info on closed event
Odonno Nov 7, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions Microsoft.Toolkit.Uwp.SampleApp/SamplePages/InAppNotification/InAppNotificationPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@

<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/InAppNotification/Styles/MSEdgeNotificationStyle.xaml" />
<ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/InAppNotification/Styles/VSCodeNotificationStyle.xaml" />
</ResourceDictionary.MergedDictionaries>

<local:DismissCommand x:Key="DismissCommand" />

<Style x:Key="DismissTextBlockButtonStyle" TargetType="ButtonBase">
Expand Down
36 changes: 14 additions & 22 deletions Microsoft.Toolkit.Uwp.SampleApp/SamplePages/InAppNotification/InAppNotificationXaml.bind
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@

<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/InAppNotification/Styles/VSCodeNotificationStyle.xaml" />
</ResourceDictionary.MergedDictionaries>

<local:DismissCommand x:Key="DismissCommand" />

<Style x:Key="DismissTextBlockButtonStyle" TargetType="ButtonBase">
Expand Down Expand Up @@ -278,41 +282,29 @@

<controls:InAppNotification x:Name="ExampleInAppNotification"
Content="This is a test message."
ShowDismissButton="@[ShowDismissButton:Bool:True]" />
ShowDismissButton="@[ShowDismissButton:Bool:True]"
AnimationDuration="@[AnimationDuration:Slider:100:0-5000]"
VerticalOffset="@[VerticalOffset:DoubleSlider:100.0:-200.0-200.0]"
HorizontalOffset="@[HorizontalOffset:DoubleSlider:0.0:-200.0-200.0]" />

<controls:InAppNotification x:Name="ExampleVSCodeInAppNotification"
MinHeight="35"
Background="#333333"
Foreground="White"
FontSize="14"
Padding="0"
BorderThickness="0"
ShowDismissButton="False"
VerticalAlignment="Top"
RenderTransformOrigin="0.5,0">
Style="{StaticResource VSCodeNotificationStyle}"
AnimationDuration="@[AnimationDuration]"
VerticalOffset="@[VerticalOffset]"
HorizontalOffset="@[HorizontalOffset]">
<controls:InAppNotification.ContentTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<Grid Margin="10 5" Height="20" Background="#007ACC">
<TextBlock Text="info"
Padding="5 0"
FontWeight="Bold"
VerticalAlignment="Center"
Foreground="White" />
</Grid>

<TextBlock Grid.Column="1"
VerticalAlignment="Center"
<TextBlock VerticalAlignment="Center"
Text="This a test message."
TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" />

<StackPanel Grid.Column="2" Orientation="Horizontal">
<StackPanel Grid.Column="1" Orientation="Horizontal">
<Button Content="Action 1"
Command="{StaticResource DismissCommand}"
CommandParameter="{Binding ElementName=ExampleVSCodeInAppNotification}"
Expand Down
37 changes: 36 additions & 1 deletion Microsoft.Toolkit.Uwp.UI.Controls/InAppNotification/InAppNotification.Events.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,49 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
/// </summary>
public partial class InAppNotification
{
/// <summary>
/// Event raised when the notification is opening
/// </summary>
public event InAppNotificationOpeningEventHandler Opening;

/// <summary>
/// Event raised when the notification is opened
/// </summary>
public event EventHandler Opened;

/// <summary>
/// Event raised when the notification is dismissing
/// </summary>
public event InAppNotificationDismissingEventHandler Dismissing;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Later we may want to discuss if these should be Closing/Closed to align with FlyoutBase.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Of course. I did not wanted to make a breaking change because the Dismissed event was already available in 2.0.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, makes sense. Just wanted to make sure we have something tracking it for a later release.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to decide on this. @nmetulev may have an opinion.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Closed/Closing does fit in better with the Opened/Opening events. If you do want to change it, I recommend marking Dismissed deprecated and adding the new events.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to add this event if it wasn't there before


/// <summary>
/// Event raised when the notification is dismissed
/// </summary>
public event EventHandler Dismissed;

private void DismissButton_Click(object sender, RoutedEventArgs e)
{
Dismiss();
Dismiss(InAppNotificationDismissKind.User);
}

private void DismissTimer_Tick(object sender, object e)
{
Dismiss(InAppNotificationDismissKind.Timeout);
_dismissTimer.Stop();
}

private void OpenAnimationTimer_Tick(object sender, object e)
{
_animationTimer.Stop();
Opened?.Invoke(this, EventArgs.Empty);
_animationTimer.Tick -= OpenAnimationTimer_Tick;
}

private void DismissAnimationTimer_Tick(object sender, object e)
{
_animationTimer.Stop();
Dismissed?.Invoke(this, EventArgs.Empty);
_animationTimer.Tick -= DismissAnimationTimer_Tick;
}
}
}
163 changes: 161 additions & 2 deletions Microsoft.Toolkit.Uwp.UI.Controls/InAppNotification/InAppNotification.Properties.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@
// THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE.
// ******************************************************************

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Media.Animation;

namespace Microsoft.Toolkit.Uwp.UI.Controls
{
Expand All @@ -25,6 +27,24 @@ public partial class InAppNotification
public static readonly DependencyProperty ShowDismissButtonProperty =
DependencyProperty.Register(nameof(ShowDismissButton), typeof(bool), typeof(InAppNotification), new PropertyMetadata(true, OnShowDismissButtonChanged));

/// <summary>
/// Identifies the <see cref="AnimationDuration"/> dependency property.
/// </summary>
public static readonly DependencyProperty AnimationDurationProperty =
DependencyProperty.Register(nameof(AnimationDuration), typeof(int), typeof(InAppNotification), new PropertyMetadata(100, OnAnimationDurationChanged));

/// <summary>
/// Identifies the <see cref="VerticalOffset"/> dependency property.
/// </summary>
public static readonly DependencyProperty VerticalOffsetProperty =
DependencyProperty.Register(nameof(VerticalOffset), typeof(double), typeof(InAppNotification), new PropertyMetadata(100, OnVerticalOffsetChanged));

/// <summary>
/// Identifies the <see cref="HorizontalOffset"/> dependency property.
/// </summary>
public static readonly DependencyProperty HorizontalOffsetProperty =
DependencyProperty.Register(nameof(HorizontalOffset), typeof(double), typeof(InAppNotification), new PropertyMetadata(0, OnHorizontalOffsetChanged));

/// <summary>
/// Gets or sets a value indicating whether to show the Dismiss button of the control.
/// </summary>
Expand All @@ -34,16 +54,155 @@ public bool ShowDismissButton
set { SetValue(ShowDismissButtonProperty, value); }
}

/// <summary>
/// Gets or sets a value indicating the duration of the popup animation (in milliseconds).
/// </summary>
public int AnimationDuration
{
get { return (int)GetValue(AnimationDurationProperty); }
set { SetValue(AnimationDurationProperty, value); }
}

/// <summary>
/// Gets or sets a value indicating the vertical offset of the popup animation.
/// </summary>
public double VerticalOffset
{
get { return (double)GetValue(VerticalOffsetProperty); }
set { SetValue(VerticalOffsetProperty, value); }
}

/// <summary>
/// Gets or sets a value indicating the horizontal offset of the popup animation.
/// </summary>
public double HorizontalOffset
{
get { return (double)GetValue(HorizontalOffsetProperty); }
set { SetValue(HorizontalOffsetProperty, value); }
}

private static void OnShowDismissButtonChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var inApNotification = d as InAppNotification;

bool showDismissButton = (bool)e.NewValue;

if (inApNotification._dismissButton != null)
{
bool showDismissButton = (bool)e.NewValue;
inApNotification._dismissButton.Visibility = showDismissButton ? Visibility.Visible : Visibility.Collapsed;
}
}

private static void OnAnimationDurationChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var inApNotification = d as InAppNotification;

if (inApNotification._visualStateGroup != null)
{
int duration = (int)e.NewValue;
var keyTimeFromAnimationDuration = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(duration));

foreach (var state in inApNotification._visualStateGroup.States)
{
foreach (var timeline in state.Storyboard.Children)
{
if (timeline is DoubleAnimationUsingKeyFrames daukf)
{
var keyFramesCount = daukf.KeyFrames.Count;
if (keyFramesCount > 1)
{
daukf.KeyFrames[keyFramesCount - 1].KeyTime = keyTimeFromAnimationDuration;
}
}

if (timeline is ObjectAnimationUsingKeyFrames oaukf)
{
var keyFramesCount = oaukf.KeyFrames.Count;
if (keyFramesCount > 1)
{
oaukf.KeyFrames[keyFramesCount - 1].KeyTime = keyTimeFromAnimationDuration;
}
}
}
}
}
}

private static void OnVerticalOffsetChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var inApNotification = d as InAppNotification;

if (inApNotification._visualStateGroup != null)
{
double verticalOffset = (double)e.NewValue;

foreach (var state in inApNotification._visualStateGroup.States)
{
foreach (var timeline in state.Storyboard.Children)
{
if (timeline is DoubleAnimationUsingKeyFrames daukf)
{
var targetProperty = (string)timeline.GetValue(Storyboard.TargetPropertyProperty);

if (targetProperty == "(UIElement.RenderTransform).(CompositeTransform.TranslateY)")
{
var keyFramesCount = daukf.KeyFrames.Count;

if (keyFramesCount > 1)
{
if (state.Name == "Visible")
{
daukf.KeyFrames[0].Value = verticalOffset;
}

if (state.Name == "Collapsed")
{
daukf.KeyFrames[keyFramesCount - 1].Value = verticalOffset;
}
}
}
}
}
}
}
}

private static void OnHorizontalOffsetChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var inApNotification = d as InAppNotification;

if (inApNotification._visualStateGroup != null)
{
double horizontalOffset = (double)e.NewValue;

foreach (var state in inApNotification._visualStateGroup.States)
{
foreach (var timeline in state.Storyboard.Children)
{
if (timeline is DoubleAnimationUsingKeyFrames daukf)
{
var targetProperty = (string)timeline.GetValue(Storyboard.TargetPropertyProperty);

if (targetProperty == "(UIElement.RenderTransform).(CompositeTransform.TranslateX)")
{
var keyFramesCount = daukf.KeyFrames.Count;

if (keyFramesCount > 1)
{
if (state.Name == "Visible")
{
daukf.KeyFrames[0].Value = horizontalOffset;
}

if (state.Name == "Collapsed")
{
daukf.KeyFrames[keyFramesCount - 1].Value = horizontalOffset;
}
}
}
}
}
}
}
}
}
}
Loading