Windowscommunitytoolkit: [Feature]Add coming in direction property for InAppNotification

[hupo376787]

Describe the problem this feature would solve

Currently InAppNotification always comes from bottom to top. This does not meet all cases.

It's better to leave a Property called "ComingDirection" or something else, let us choose the direction.

[msftbot[bot]]

Hello, 'hupo376787! Thanks for submitting a new feature request. I've automatically added a vote 👍 reaction to help get things started. Other community members can vote to help us prioritize this feature in the future!

[Kyaa-dost]

@hupo376787 This looks like an amazing feature and would really love to see that being implemented 🚀🚀 Is this something you can work on?

Also, let's see if the rest of the community like it as much as I do 🙂

[hupo376787]

Hi, @Kyaa-dost . I know little about animation and tranform, so I can't help currently. Maybe someone else.

[michael-hawker]

FYI @gabbybilka @SavoySchuler for https://github.com/microsoft/microsoft-ui-xaml/issues/913

[hupo376787]

Hi, all. Instead of waiting for the new property, we can use the HorizontalOffset and VerticalOffset to customize the coming in direction.

Thanks to @Faywang - MSFT's so answer. How to change the InAppnitification's coming in direction?.

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 Bottom to Top:

<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 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" />