- Notifications
You must be signed in to change notification settings - Fork 1.4k
feat(InAppNotification): first version of the control #1343
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.
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
Merged
IbraheemOsama merged 23 commits into CommunityToolkit:dev from Odonno:inAppNotifications Aug 23, 2017
Merged
Changes from 18 commits
Commits
Show all changes
23 commits Select commit Hold shift + click to select a range
24d0431 feat(InAppNotification): first version of the control
Odonno a712c30 feat(InAppNotification): add animations
Odonno 2babc22 feat(inAppNotification): add ability to use DataTemplate
Odonno b9709df feat(InAppNotification): set responsive design for DataTemplate with …
Odonno a201546 docs(InAppNotification): add bind files
Odonno 019a3dd docs(InAppNotification): add markdown file
Odonno e142ec4 docs(InAppNotification): add link from readme file
Odonno 208a650 feat(InAppNotification): add ability to hide dismiss button
Odonno 682143d docs(InAppNotification): add example with drop shadow
Odonno 62eff8b docs(InAppNotification): add vscode-like notification example
Odonno e1e2a45 feat(InAppNotification): show notification with duration
Odonno f3a2c49 docs(InAppNotification): remove default template explanation
Odonno 4ab647d merge
Odonno 85b5da1 fix(inAppNotification): remove the use of converter
Odonno 1ecc520 docs(InAppNotification): add ability to show or hide dismiss button i…
Odonno b78f3d4 fix(InAppNotification): set dismiss button visiblity after null check
Odonno 8846f3d docs(InAppNotification): add popup animation explanation
Odonno 0a3c40d fix(InAppNotification): set correct animation the first time visibili…
Odonno 2b7ac18 docs(InAppNotifications): add note about the render priority
Odonno ac85365 fix(InAppNotifications): simplify code bind file using a non responsi…
Odonno 8fe1df5 merge
Odonno f4c6902 refactor(InAppNotifications): use return instead of async keyword on …
Odonno 5fb2211 docs(InAppNotifications): use Shell to register commands in the sampl…
Odonno File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Binary file added BIN +694 Bytes ...osoft.Toolkit.Uwp.SampleApp/SamplePages/InAppNotification/InAppNotification.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
85 changes: 85 additions & 0 deletions 85 Microsoft.Toolkit.Uwp.SampleApp/SamplePages/InAppNotification/InAppNotificationCode.bind
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| // ## XAML - Text + buttons (DataTemplate) | ||
| | ||
| <DataTemplate x:Key="InAppNotificationWithButtonsTemplate"> | ||
| <UserControl> | ||
| <Grid DataContext="{Binding ElementName=CurrentPage}"> | ||
| <VisualStateManager.VisualStateGroups> | ||
| <VisualStateGroup> | ||
| <VisualState x:Name="NarrowState"> | ||
| <VisualState.Setters> | ||
| <Setter Target="TextBlock.(Grid.RowSpan)" Value="1" /> | ||
| <Setter Target="TextBlock.(Grid.ColumnSpan)" Value="2" /> | ||
| | ||
| <Setter Target="ButtonsStackPanel.(Grid.Row)" Value="1" /> | ||
| <Setter Target="ButtonsStackPanel.(Grid.RowSpan)" Value="1" /> | ||
| <Setter Target="ButtonsStackPanel.(Grid.Column)" Value="0" /> | ||
| <Setter Target="ButtonsStackPanel.(Grid.ColumnSpan)" Value="2" /> | ||
| <Setter Target="ButtonsStackPanel.Orientation" Value="Vertical" /> | ||
| <Setter Target="ButtonsStackPanel.Margin" Value="0 5 0 0" /> | ||
| | ||
| <Setter Target="YesButton.Width" Value="Auto" /> | ||
| <Setter Target="YesButton.HorizontalAlignment" Value="Stretch" /> | ||
| | ||
| <Setter Target="NoButton.Width" Value="Auto" /> | ||
| <Setter Target="NoButton.HorizontalAlignment" Value="Stretch" /> | ||
| <Setter Target="NoButton.Margin" Value="0 5 0 0" /> | ||
| </VisualState.Setters> | ||
| | ||
| <VisualState.StateTriggers> | ||
| <StateTrigger IsActive="{Binding IsRootGridActualWidthLargerThan700, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}" /> | ||
| </VisualState.StateTriggers> | ||
| </VisualState> | ||
| | ||
| <VisualState x:Name="LargeState"> | ||
| <VisualState.StateTriggers> | ||
| <StateTrigger IsActive="{Binding IsRootGridActualWidthLargerThan700, Mode=OneWay}" /> | ||
| </VisualState.StateTriggers> | ||
| </VisualState> | ||
| </VisualStateGroup> | ||
| </VisualStateManager.VisualStateGroups> | ||
| | ||
| <Grid x:Name="RootGrid" SizeChanged="RootGrid_SizeChanged"> | ||
| <Grid.RowDefinitions> | ||
| <RowDefinition /> | ||
| <RowDefinition Height="Auto" /> | ||
| </Grid.RowDefinitions> | ||
| | ||
| <Grid.ColumnDefinitions> | ||
| <ColumnDefinition /> | ||
| <ColumnDefinition Width="Auto" /> | ||
| </Grid.ColumnDefinitions> | ||
| | ||
| <TextBlock x:Name="TextBlock" Grid.RowSpan="2" | ||
| Text="Do you like it?" VerticalAlignment="Center" /> | ||
| | ||
| <StackPanel x:Name="ButtonsStackPanel" Grid.RowSpan="2" Grid.Column="1" | ||
| Orientation="Horizontal" VerticalAlignment="Center"> | ||
| <Button x:Name="YesButton" Content="Yes" Width="150" Height="30" Click="YesButton_Click" /> | ||
| <Button x:Name="NoButton" Content="No" Width="150" Height="30" Margin="10 0 0 0" Click="NoButton_Click" /> | ||
| </StackPanel> | ||
| </Grid> | ||
| </Grid> | ||
| </UserControl> | ||
| </DataTemplate> | ||
| | ||
| // ## XAML - Control placed where you want the notification to appear | ||
| | ||
| <controls:InAppNotification x:Name="ExampleInAppNotification" /> | ||
| | ||
| // ## C# - Show and dismiss the in app notification | ||
| | ||
| // Show notification with simple text (and a duration of 2 seconds) | ||
| int duration = 2000; | ||
| await ExampleInAppNotification.ShowAsync("Some text.", duration); | ||
| | ||
| // Show notification using a DataTemplate | ||
| object inAppNotificationWithButtonsTemplate; | ||
| bool isTemplatePresent = Resources.TryGetValue("InAppNotificationWithButtonsTemplate", out inAppNotificationWithButtonsTemplate); | ||
| | ||
| if (isTemplatePresent && inAppNotificationWithButtonsTemplate is DataTemplate) | ||
| { | ||
| await ExampleInAppNotification.ShowAsync(inAppNotificationWithButtonsTemplate as DataTemplate); | ||
| } | ||
| | ||
| // Dismiss notification | ||
| ExampleInAppNotification.Dismiss(); | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code. Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes. Only one suggestion per line can be applied in a batch. Add this suggestion to a batch that can be applied as a single commit. Applying suggestions on deleted lines is not supported. You must change the existing code in this line in order to create a valid suggestion. Outdated suggestions cannot be applied. This suggestion has been applied or marked resolved. Suggestions cannot be applied from pending reviews. Suggestions cannot be applied on multi-line comments. Suggestions cannot be applied while the pull request is queued to merge. Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why the SizeChanged event?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do not remember, I think this is a old version. Will update it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok. I remember. I made it that way to be able to detect the change of the Grid Width (not the App Width) so I can create a StateTrigger based on the container Size, not the App Size.
I do not know if there is a better option because it will crash if you do not have this code in your code-behind:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is that required for an example? Should it work without it?
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To be clear, the
DataTemplateavailable in the bind code file is a specific template that handle responsive design based on the container Width. And to make it work, I need a property that tell what StateTrigger I should use, in this case I used a boolean in the code behind.Of course, it is not the default behavior and you can perfectly use the control without extra code :
And then use
.ShowAsync()method.My objective with the
DataTemplatewas to provide a more complete example that mimic MS Edge notification with buttons (Horizontal Orientation when Width > 700px, Vertical Orientation otherwise).Should I remove this template from the code file?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
My thoughts on this are to have a simple template that doesn't complicate the mechanics of the control and shows the minimum needed to try the control. We could always have both?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@nmetulev I can leave the complete Templates in the page (with buttons, with DropShadow, etc..) and add a simple template in the code file. I'll update it.