CODEWITHSUNDEEP
uwpwindows-community-toolkit
Vincent
Vincent

Reputation: 3304

How to change the InAppnitification's coming in direction?

Currently when Microsoft.Toolkit.Uwp.UI.Controls.InAppnitification shows up, it always comes from botttom to top. But it's weird when I set the InAppnitification's VerticalAlignment to Top.

So is there any example to redefine it's coming in direction.

enter image description here

Also, I have post a feature request on Github. If you want it, please vote.

Upvotes: 0

Views: 63

Answers (1)

Faywang - MSFT
Faywang - MSFT

Reputation: 5868

Based on the document of InAppnitification, there are two properties: HorizontalOffset and VerticalOffset. They controls the horizontal and vertical offset of the popup animation, you can change them to redefine the notification's popup direction. For example:

From Top to Bottom:

<controls:InAppNotification x:Name="ExampleInAppNotification"
                            Content="This is a test message."
                            ShowDismissButton="True"
                            AnimationDuration="00:00:00.1000000"
                            VerticalOffset="-100"
                            HorizontalOffset="0"
                            StackMode="Replace" />

From Left to Right:

<controls:InAppNotification x:Name="ExampleInAppNotification"
                            Content="This is a test message."
                            ShowDismissButton="True"
                            AnimationDuration="00:00:00.1000000"
                            VerticalOffset="0"
                            HorizontalOffset="-100"
                            StackMode="Replace" />

From Right to Left:

<controls:InAppNotification x:Name="ExampleInAppNotification"
                            Content="This is a test message."
                            ShowDismissButton="True"
                            AnimationDuration="00:00:00.1000000"
                            VerticalOffset="0"
                            HorizontalOffset="100"
                            StackMode="Replace" />

Upvotes: 1

Related Questions