Animated Window Effects with "Toast" Popup Demo

[jmcilhinney]

VB version here.

FormAnimator class - A helper class that you can add an instance of to a form to provide animation when the form is shown, hidden or closed. Supported animations are Roll (form is unrolled and rolled up from one edge to the opposite), Centre (form unrolls from the centre out and rolls up from all edges in), Slide (form slides in and out from one edge to the opposite) and Blend (form fades in and out). Roll and Slide animations can be up, down, left, right or diagonal. To use this class just add a single line of code similar to this to your form:

private FormAnimator animator;
 
public Form1()
{
    InitializeComponent();
 
    this.animator = new FormAnimator(this,
                                     FormAnimator.AnimationMethod.Slide,
                                     FormAnimator.AnimationDirection.Up,
                                     400);
}

NOTE: The C# Toast demo will be here soon. Watch this space.

[jmcilhinney]

The attached project includes a ToastForm class that uses the FormAnimator class from above to create a popup notification in the lower, right-hand corner of the screen, just above the system tray, as many commercial applications do. You can import this class into your own project as is or create your own using the same pattern.

To see the demo in action, run the attached project and click the Button on the main form several times. You'll see notification windows stack themselves up from the bottom, right-hand corner of the screen. As a new notification window slides up it pushes any existing windows further up the screen.

The notification windows are each a random height and will remain displayed for a random time period. As a window slides out of view again any windows above it will fall down to fill the vacant space.

The last point to note is that the notification window will not take focus when it's first displayed, but if you click it it will be activated.

Edit: 27-Nov-2008
Set the TopMost property of the ToastForm class to True to ensure notification windows were not hidden behind other windows if the caller is not currently active.

[vctor]

We've been trying to adapt your code so I can use it on a socket programming application I am currently working on.

The problem is that the toastform stops working and will not be able to close it, is there a possibility that the timer is creating the problem?

Here's a sample of the code I did

if( nBytesRec > 0 )
				{
					// Wrote the data to the List
					string sRecieved = Encoding.ASCII.GetString( m_byBuff, 0, nBytesRec );

					// WARNING : The following line is NOT thread safe. Invoke is
					// m_lbRecievedData.Items.Add( sRecieved );
					Invoke( m_AddMessage, new string [] { sRecieved } );
                    sliceCount += 1;

                    Form_Animation_and_Toast_Demo.ToastForm slice = new Form_Animation_and_Toast_Demo.ToastForm(this.rng.Next(2000, 10000), sRecieved);

                    slice.Height = this.rng.Next(50, 200);
                    slice.Show();
					// If the connection is still usable restablish the callback
					SetupRecieveCallback( sock );
				}

[bobob]

The attached project includes a ToastForm class that uses the FormAnimator class from above to create a popup notification in the lower, right-hand corner of the screen, just above the system tray, as many commercial applications do. You can import this class into your own project as is or create your own using the same pattern.

What is the licence on the project?

[jmcilhinney]

What is the licence on the project?

I've never gone to the effort of determining which license to officially apply to the stuff I post in the CodeBank forum and the like. As long as you don't try to expressly claim it as your own, I'm happy for you to do whatever you want with it.

[Sherin]

Hello, @jmcilhinney
Please try this code, To Animated Window Effects with "Toast" Popup Demo

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Notifications;
@using Syncfusion.EJ2.DropDowns;
@using Syncfusion.EJ2.Buttons;
@section ControlsSection{
    <div class="col-lg-12 control-section toast-api-section">
        <div class="control_wrapper">
            @Html.EJS().Toast("toastAPI").Position(p => p.X("Right").Y("Bottom")).BeforeOpen("onBeforeOpen").Created("created").Close("onClose").NewestOnTop(true).TimeOut(5000).Render()
            <div class="row">
                <div class="col-lg-6 padding">
                    <div class="input-form">
                        <div class="e-float-input">
                            <input class="e-input" id="toast_input_title" required="">
                            <span class="e-float-line"></span>
                            <label class="e-float-text">Enter the title</label>
                        </div>
                    </div>
                    <div class="input-form">
                        <div class="e-float-input">
                            <textarea class="e-input" id="toast_input_content" rows="3" required=""></textarea>
                            <label class="e-float-text">Enter the content</label>
                        </div>
                    </div>
                    <div class="group-form e-group">
                        @Html.EJS().CheckBox("closeButton").Label("Show Close Button").Change("closeOnChange").Render()
                    </div>
                    <div class="group-form">
                        @Html.EJS().CheckBox("progressBar").Label("Show Progress Bar").Change("OnProgressChange").Render()
                    </div>
                    <div class="group-form">
                        @Html.EJS().CheckBox("newestOnTop").Label("Newest On Top").Change("closeNewestOnChange").Checked(true).Render()
                    </div>
                    <div class="group-form">
                        @Html.EJS().CheckBox("prevDuplicates").Label("Prevent Duplicates").Change("OnPrevDubChange").Render()
                    </div>
                    <div class="group-form">
                        @Html.EJS().CheckBox("actionButtons").Label("Action Buttons").Change("OnactionBtnChange").Render()
                    </div>
                    <div class="input-form">
                        <div class="e-float-input e-input-group">
                            <input class="e-input" id="timeOut" name="Digits" value="5000" digits="true" data-digits-message="Please enter digits only." required="">
                            <span class="e-float-line"></span>
                            <label class="e-float-text" for="Digits">TimeOut</label>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 padding">
                    <div class="input-form">
                        <h4> Show Animation</h4>
                        <div class="e-float-input">
                            <input class="e-input" id="showDuration" value="400" required="">
                            <span class="e-float-line"></span>
                            <label class="e-float-text">Duration</label>
                        </div>
                    </div>
                    <div class="input-form">
                        @Html.EJS().DropDownList("ShowEasing").Placeholder("Select an Easing").DataSource((IEnumerable<object>)ViewBag.EasingData).Created("showEasingCreated").Index(0).Change("onShowEase").Fields(new DropDownListFieldSettings { Text = "Value", Value = "Id" }).Render()
                    </div>
                    <div class="input-form">
                        @Html.EJS().DropDownList("ShowAnimation").Placeholder("Select an Animation").Width("100%").DataSource((IEnumerable<object>)ViewBag.AnimationData).Created("showAnimationCreated").Index(0).Change("showChange").Fields(new DropDownListFieldSettings { Text = "Value", Value = "Id" }).Render()
                    </div>
                    <div class="input-form e-group">
                        <h4> Hide Animation</h4>
                        <div class="e-float-input">
                            <input class="e-input" id="hideDuration" value="400" required="">
                            <span class="e-float-line"></span>
                            <label class="e-float-text">Duration</label>
                        </div>
                    </div>
                    <div class="input-form">
                        @Html.EJS().DropDownList("HideEasing").Placeholder("Select an Easing").DataSource((IEnumerable<object>)ViewBag.EasingData).Created("hideEasingCreated").Index(0).Change("onHideEase").Fields(new DropDownListFieldSettings { Text = "Value", Value = "Id" }).Render()
                    </div>
                    <div class="input-form">
                        @Html.EJS().DropDownList("HideAnimation").Placeholder("Select an Animation").DataSource((IEnumerable<object>)ViewBag.AnimationData).Created("hideAnimationCreated").Index(1).Change("hideChange").Fields(new DropDownListFieldSettings { Text = "Value", Value = "Id" }).Render()
                    </div>
                </div>
            </div>
            <div class="row center">
                @Html.EJS().Button("toastBtnShow").CssClass("e-btn e-primary").Content("Show Toasts").Render()
                @Html.EJS().Button("toastBtnHide").CssClass("e-btn e-primary e-hide-toast").Content("Hide All").Render()
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var toastObj, showEasingObj, showAnimationObj, hideEasingObj, hideAnimationObj;
    var btnEleShow = document.getElementById('toastBtnShow');
    var btnEleHide = document.getElementById('toastBtnHide');
    var prevDuplicates = false;
    function created() {
        toastObj = this;
    }
    function showEasingCreated() {
        showEasingObj = this;
    }
    function showAnimationCreated() {
        showAnimationObj = this;
    }
    function hideEasingCreated() {
        hideEasingObj = this;
    }
    function hideAnimationCreated() {
        hideAnimationObj = this;
    }

    btnEleShow.onclick = function () { showToast(); };
    btnEleHide.onclick = function () {
        toastObj.hide('All');
    };

    document.onclick = function (e) {
        if (e.target !== btnEleShow) {
            toastObj.hide('All');
        }
    };
    function showToast() {
        var title = (document.getElementById('toast_input_title')).value;
        var content = (document.getElementById('toast_input_content')).value;
        if (title === '' && content === '') {
            content = 'You have created a Toast message';
        }
        var showDuration = parseInt((document.getElementById('showDuration')).value, 10);
        var hideDuration = parseInt((document.getElementById('hideDuration')).value, 10);
        var timeOut = parseInt((document.getElementById('timeOut')).value, 10);
        toastObj.show(
            {
                title: title, content: content, timeOut: timeOut,
                animation: {
                    show: { duration: showDuration },
                    hide: { duration: hideDuration }
                }, target: document.body
            });
    }

   
    setTimeout(
        () => {
            showChange();
        }, 500);
    setTimeout(
        () => {
            hideChange();
        }, 500);

    function onShowEase() {
        toastObj.animation.show.easing = showEasingObj.value;;
    }

    function onHideEase() {
        toastObj.animation.hide.easing =hideEasingObj.value;
    }

    function showChange(e) {
        toastObj.animation.show.effect = showAnimationObj.value;
    }

    function hideChange(e) {
        toastObj.animation.hide.effect = hideAnimationObj.value;
    }

    function onClose(e) {
            if (e.toastContainer.childElementCount === 0) {
                btnEleHide.style.display = 'none';
            }
        }

    // Toast beforeOpen Event Function
    function onBeforeOpen(e) {
        btnEleHide.style.display = 'inline-block';
        if (prevDuplicates) {
            e.cancel = preventDuplicate(e);
        }
    }

    // Toast preventDuplicate Function for toast title
    function preventDuplicate(e) {
        var toastEle = e.element;
        var toasts = e.toastObj.element.children;
        for (var i = 0; i < toasts.length; i++) {
            var toastTitle = (toasts[i]).querySelector('.e-toast-title');
            var toastMessage = (toasts[i]).querySelector('.e-toast-message');
            if (toastTitle && toastTitle.isEqualNode(toastEle.querySelector('.e-toast-title'))) {
                return true;
            }
            if (!toastTitle && toastMessage && toastMessage.isEqualNode(toastEle.querySelector('.e-toast-message'))) {
                return true;
            }
        }
        return false;
    }

    function closeOnChange(e) {
        e.checked ? toastObj.showCloseButton = true : toastObj.showCloseButton = false;
    }
    function OnProgressChange(e) {
        e.checked ? toastObj.showProgressBar = true : toastObj.showProgressBar = false;
    }
    function closeNewestOnChange(e) {
        e.checked ? toastObj.newestOnTop = true : toastObj.newestOnTop = false;
    }
    function OnPrevDubChange(e) {
        prevDuplicates = e.checked;
    }
    function onActionBtnClick(e) {
        alert('Action button is clicked');
    }
    function OnactionBtnChange(e) {
        if (e.checked) {
            toastObj.buttons = [{ model: { content: '<div class="e-toast-btn"> Click Here </div>' }, click: onActionBtnClick }];
        } else { toastObj.buttons = []; }
    }
    </script>
    <style>

    </style>
}

I hope this code will be useful to you.
Thank you.