CODEWITHSUNDEEP
c#uwp
user3703456
user3703456

Reputation:

C# UWP - Notification panel

I'm learning c# (UWP) and have created a notification textblock in XAML.

Here it is:

<Storyboard x:Name="notificationPanel1">
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="notificationBorder">
        <DiscreteObjectKeyFrame KeyTime="0">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,-80,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="notificationBorder">
        <EasingDoubleKeyFrame KeyTime="0" Value="0">
            <EasingDoubleKeyFrame.EasingFunction>
                <BackEase EasingMode="EaseInOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
        <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="75">
            <EasingDoubleKeyFrame.EasingFunction>
                <BackEase EasingMode="EaseInOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="75">
            <EasingDoubleKeyFrame.EasingFunction>
                <BackEase EasingMode="EaseInOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
<Grid>
....
        <Border x:Name="notificationBorder" BorderBrush="{x:Null}" VerticalAlignment="Top" Margin="0,-80,0,0" RenderTransformOrigin="0.5,0.5">
            <Border.RenderTransform>
                <CompositeTransform/>
            </Border.RenderTransform>
            <TextBlock x:Name="notificationTxt" TextWrapping="Wrap" Padding="0"  TextAlignment="Center" Foreground="White" Text="sdfdsfsdf" Margin="0,15"/>
        </Border>
....
</Grid>

Is there a better way to do this? Because, now I have to copy this XAML to all pages.

Mb generate this dynamically? But I don't know how, can you give me a hint?

BTW: This is basically animated notification panel enter image description here

Thank you

Upvotes: 0

Views: 242

Answers (1)

Christian Findlay
Christian Findlay

Reputation: 7712

Have a look at this example. It's for Xamarin Apps but the sample is UWP specific. It will show a notification in the bottom of the screen over the top of everything else. It can be called in a static method. The actual sample app may be a little confusing but if you understand how Xamarin Forms works, you'll be able to pull out what you need. The repo is here.

https://github.com/MelbourneDeveloper/Adapt.Presentation

https://github.com/MelbourneDeveloper/Adapt.Presentation/blob/master/Adapt.Presentation.UWP/Adapt/Presentation/UWP/InAppNotification.xaml.cs

https://github.com/MelbourneDeveloper/Adapt.Presentation/blob/master/Adapt.Presentation.UWP/Adapt/Presentation/UWP/InAppNotification.xaml

Upvotes: 1

Related Questions