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

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

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

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

        //Page Constructor
        public MainPage()
        {
            InitializeComponent();
            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;
        }