In-depth analysis: Create a dialog box that disappears automatically

Create a new PopupDemo page, the code is as follows:

Copy the codeThe code is as follows:

<Grid x:Name="LayoutRoot">
        <StackPanel>
            <Button Content="Show" Click="ShowPopup_Clicked"></Button>
        </StackPanel>
    </Grid>

The background cs code is:

Copy the codeThe code is as follows:

private void ShowPopup_Clicked(object sender, RoutedEventArgs e)
{
Popup popup = new Popup();

//Set the Child property of popup to a custom user control.
             = new PopupBorder();
            = true;
        }

Copy the codeThe code is as follows:

 += delegate
            {
                 = new Thickness(
                        ( - ) / 2,
                        ( - ) / 2,
                        0,
                        0);
            };

The complete code is as follows:

Copy the codeThe code is as follows:

PopupBorder pborder = new PopupBorder();

Popup popUp = new Popup();

//Set the Child property of popup to a custom user control.
= pborder;
+= delegate
{
    = new Thickness(
            ( - ) / 2,
            ( - ) / 2,
            0,
            0);
};
= true;

Run it and find that the pop-up message is centered, so how can it disappear automatically? ? ,

To automatically disappear, you have to use a timer. After a period of time, the timer sets the IsOpen property of the popUp control to false, so that the window closes.

So add the timer code to LayoutUpdated:

Copy the codeThe code is as follows:

+= delegate
            {
                = new Thickness(
                        ( - ) / 2,
                        ( - ) / 2,
                        0,
                        0);

                timer = new (
                    (state) =>
                    {
                        (() =>
                        {
                            = false;
                        });
                    }, null, 500, 500);
            };

After 500 seconds passed, set popUp. IsOpen to false.

Run it and find that the window can disappear automatically.

You can see that the pop-up window is closed immediately. So can it slowly disappear? ?

In order to achieve the disappearance of the gradient, animation should be used.

First add in PopupBorder

Copy the codeThe code is as follows:

<>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation
                ="LayoutRoot"
                ="Opacity"
                    From="1.0" To="0" Duration="0:0:1"
                    AutoReverse="True" />
        </Storyboard>
    </>

Of course, this code is already available in the above PopupBorder code. The animation uses DoubleAnimation to set the Opacity property of the LayoutRoot object to change from 1 to 0 in 1 second.

Then add the following code to execute the animation in the button event of the PopupDemo page:

Copy the codeThe code is as follows:

//Set the Child property of popup to a custom user control.
= pborder;

+= delegate
{
= false;
};
();

Then refactor the code in Clicked.

Create a new MessageBoxHelper class:

The code is as follows:

Copy the codeThe code is as follows:

public class MessageBoxHelper
{
#region prompt message ¡ é

    /// <summary>
/// The pop-up message title is a prompt, and the button is OK
    /// </summary>
    /// <param name="msg"></param>
    public static void ShowMessage(string msg)
    {
//ShowFriendMessage(msg, "tip", );

PopupBorder pborder = new PopupBorder();
= " " + msg + " ";

();

Popup popUp = new Popup();
= pborder;

        += delegate
        {
            = false;
        };
        ();

        (() =>
        {
            = new Thickness(
                ( - ) / 2,
                ( - ) / 2,
                0,
                0);

            timer = new (
                (state) =>
                {
                    (() =>
                    {
                        = false;
                    });
                }, null, 500, 500);
        });
        = true;

}

    /// <summary>
/// The pop-up message button is OK
    /// </summary>
    /// <param name="msg"></param>
    public static void ShowMessage(string msg, string title)
    {
        ShowMessage(msg, title, );
    }

    /// <summary>
/// A pop-up message
    /// </summary>
    /// <param name="msg"></param>
    public static void ShowMessage(string msg, string title, MessageBoxButton buttons)
    {
        (msg, title, buttons);
    }

#endregion
}

When using it, only need(“Hello World”);That's it. Be careful not to forget the PopupBorder control.