X
22Sep

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()
        {
            InitializeComponent();
            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()
        {
            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;
        }

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
 
 

 

 

 

Related

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 >

Share

Post a Comment

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

Sign Up

  • Recent
  • Popular
  • Tag
Tags
Monthly Archive
Subscribe
Name

Text/HTML
Text/HTML
Contact Us
  • *
  • *