Custom Pop Up Notification Dialog Box In Windows 10 UWP

Sometimes we have to show a notification for a few seconds then it will automatically disappear. In windows 10 there is no default control to achieve this. Using storyborad we can achieve this task. I made this control to show simple notifications such as internet or blue tooth connection status.

Let’s see the steps.

Create new Windows 10 UWP app and go to your design page.

Create one TextBlock and wrap it with Border, set the TextBlock visibility properties as collapsed, and create one button to show the popup like the following code.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Border Name="popup" Width="400" VerticalAlignment="Center" Opacity="0" Visibility="Collapsed" HorizontalAlignment="Center" Background="Blue" CornerRadius="10">
        <TextBlock x:Name="PopupTextBlock" TextWrapping="Wrap" Foreground="White" Text="Welcome to C# Corner" FontSize="32" VerticalAlignment="Center" TextAlignment="Center" Margin="20" /> </Border>
    <Button x:Name="showPopupBtn" Content="Show" VerticalAlignment="Bottom" HorizontalAlignment="Center" Click="showPopupBtn_Click">
   </Button>
</Grid>

Next write the following code for Storyboard to show and hide the textblock in a given time.

<Page.Resources>
    <Storyboard x:Name="BlinkPopup">
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="popup">
            <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="0:0:2">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="0:0:5">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Collapsed</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="popup">
            <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1" />
            <EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="0" /> </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

Set the time function of the keyframe to show and hide the control. Time Duration of KeyFrame you can set as you wish and also we need to set the storyboard target name. Here I set the target name to border of the text block.

Now go to your code behind page and write the following code in button click event to show the custom popup.

private void showPopupBtn_Click(object sender, RoutedEventArgs e) {
    BlinkPopup.Begin();
    PopupTextBlock.Visibility = Visibility.Visible;
}

Here I just start the storyboard using begin method and set the textblock visibility properties to visible.

Now run the app and click the button (show) to finally see that the output looks like the following screen.