How to add Overlay in Windows phone 8 - Blogs

How to add Overlay in Windows phone 8

Windows Phone is windows mobile operating system from Microsoft.

In my project, there was a requirement of Overlay panel whenever the data is requested from server (i.e., when task takes some time to execute).

Here, I am going to show you a sample example of using overlay in windows phone project.

Find the sample solution here

Overlay, is it a control or a property?

No, the overlay is not a control or a property but it is a process which can be achieved using Popup a Class present in Windows Phone 8 with namespace (System.Windows.Controls.Primitives) and UserControl as Popup.

Steps required

1. Right click in the application -> Select Add -> Select New Item-> Select Windows Phone User control and name it as Overlay.xaml

Step 1


2. Add the below mentioned code in Overlay.xaml.cs replace for constructor

Usercontrol Example

Usercontrol design view

        //usercontrol constructor    
        public Overlay()
            this.LayoutRoot.Height = Application.Current.Host.Content.ActualHeight;
            this.LayoutRoot.Width = Application.Current.Host.Content.ActualWidth;
            SystemTray.IsVisible = false; //to hide system tray

3. Add a property below mentioned into the MainPage.xaml (your required form)

  private Popup popup; //property which make usercontrol as  popup

4. Add the below mentioned into MainPage.xaml constructor

        //Page Constructor
        public MainPage()
            this.popup = new Popup();

5. Call the method OpenOverlay() on any event to open overlay and CloseOverlay() when close is required.

        /// Opens the usercontrol which acts as overlay
        private void OpenOverLay()
            this.LayoutRoot.Opacity = 0.2;
            OverLay ovr = new OverLay();
            this.popup.Child = ovr;
            this.popup.IsOpen = true;

        /// Closes the usercontrol which acts as overlay
        private void CloseOverLay()
            popup.IsOpen = false;
            this.LayoutRoot.Opacity = 1.0;

Note :  The sample shown is with progress bar and TextBlock.
 I have tried to use spinner inside overlay as Loader image. Please, find the design sample OverlaySpinner.xaml 
Usercontrol with spinner





What are Frames? How to handle frames in Selenium WebDriver with C#?

IFrame (FullForm: Inline Frame) is an HTML document that is included in another HTML document and is...

Read More >

What is Synchronization? Handling Synchronization in Selenium WebDriver using C#:

Synchronization meaning: when two or more components involved to perform any action, we expect these...

Read More >

Sending Test reports by Email using Office 365, Gmail

Wouldn’t it be great if Test Report are sent automatically across team as soon the Test Execut...

Read More >

Custom Control in WPF

File Upload Custom Control in WPFThis article is about Custom control in WPF, Custom controls are al...

Read More >

ASP.NET: Audit Trail Implementation using Entity Framework

When you are working with certain projects which involves the Customer records, you might need to tr...

Read More >

Create Restful service using Web API

What is Asp.Net Web API?Asp.Net Web API is a framework for building HTTP services that can be consum...

Read More >

Create custom project templates in Visual Studio

Visual studio installation comes with the various predefined project templates, and we can use one o...

Read More >

WCF SOAP and REST Services

WCF (Windows Communication Foundation) is a programming platform and runtime system for building, co...

Read More >

What's New In C# 6.0?

Microsoft has released the preview version of Visual Studio 2015 and .NET 4.6 for developers to try ...

Read More >

Using XMPP and Openfire Server in Windows Phone 8

Implementing Extensible Messaging and Presence Protocol (XMPP) in Windows phone 8 is really a tough ...

Read More >


Try DevOpSmartBoard Ultimate complete Azure DevOps End-to end reporting tool

Sign Up

  • Recent
  • Popular
  • Tag
Monthly Archive

Contact Us
  • *
  • *