×
Namespaces

Variants
Actions
(Difference between revisions)

Create simple overlay with UserControl in Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata)
hamishwillee (Talk | contribs)
m (Text replace - "[[Category:Silverlight" to "[[Category:XAML")
(5 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Windows Phone]][[Category:Code Examples]][[Category:UI]]
+
[[Category:Windows Phone]][[Category:Code Examples]][[Category:UI]][[Category:XAML]]
{{Abstract|This article explains how to create simple overlay using {{Icode|UserControl}} in windows phone.}}
+
{{Abstract|This article explains how to create a simple overlay using {{Icode|UserControl}} in [[::Category:Windows Phone|Windows Phone]]}}.
  
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
Line 26: Line 26:
  
 
== Introduction ==
 
== Introduction ==
Overlays can be in the any form like progress overlay, simple prompt overlay, using  {{Icode|UserControl}} for implementing overlay gives us feasibility to easily construct any type of overlay.This article shows implementation of progress overlays using [http://msdn.microsoft.com/query/dev11.query?appId=Dev11IDEF1&l=EN-US&k=k(System.Windows.Controls.UserControl);k(TargetFrameworkMoniker-Silverlight,Version%3Dv4.0);k(DevLang-csharp)&rd=true UserControl]. <br />
+
Overlays can have a wide range of applications, be it a simple prompt or displaying a progress indicator. Using [http://msdn.microsoft.com/query/dev11.query?appId=Dev11IDEF1&l=EN-US&k=k(System.Windows.Controls.UserControl);k(TargetFrameworkMoniker-Silverlight,Version%3Dv4.0);k(DevLang-csharp)&rd=true UserControl] for implementing it gives us feasibility to easily construct any type of overlay. This article demonstrates how to implement a sample progress overlay. <br />
  
To implement progress overlay follow the following steps
+
The following steps describe how to implement it:
 
# Create new Windows Phone project from Visual Studio.
 
# Create new Windows Phone project from Visual Studio.
# Add new {{Icode|UserControl}} named OverLay.xaml in current project. <br />
+
# Add new {{Icode|UserControl}} named '''OverLay.xaml''' in current project. <br />
Copy paste following code in your OverLay.xaml file.
+
Copy and paste following code in your '''OverLay.xaml''' file.
  
 
<code xml>
 
<code xml>
Line 57: Line 57:
 
</code>
 
</code>
 
<br />
 
<br />
{{Icode|LayoutRoot }} is populated with [http://msdn.microsoft.com/en-us/library/ms612638.aspx ProgressBar] and [http://msdn.microsoft.com/en-us/library/ms617591.aspx TextBlock] but you can put any UI controls here which you want to show as overlay like suppose you want to show simple About prompt as overlay then you may put simple {{Icode|TextBlock}} and {{Icode|Image}} with custom size.
+
{{Icode|LayoutRoot }} is populated with [http://msdn.microsoft.com/en-us/library/ms612638.aspx ProgressBar] and [http://msdn.microsoft.com/en-us/library/ms617591.aspx TextBlock] but you can put any UI controls here that you want to show on the overlay. For example, if you want to show a simple About prompt then you may put a {{Icode|TextBlock}} and an {{Icode|Image}} with custom size.
  
In code behind file of Overlay.xaml initialize {{Icode|LayoutRoot}} size with the size you want.Refer following code where height and width of {{Icode|LayoutRoot}} is set to height and width of screen.
+
In code behind file of '''Overlay.xaml''' initialize the size of {{Icode|LayoutRoot}} to the value you want. The following code shows how the height and width of {{Icode|LayoutRoot}} are set to the height and width of the screen.
 
<code csharp>
 
<code csharp>
 
public OverLay()
 
public OverLay()
Line 71: Line 71:
  
 
<br />
 
<br />
Now open MainPage.xaml.cs file and copy paste following code in it.
+
Now open '''MainPage.xaml.cs''' file and copy and paste the following code in it:
  
 
<code csharp>
 
<code csharp>
Line 129: Line 129:
 
</code>
 
</code>
 
<br />
 
<br />
{{Icode|BtnStart_Click}} event contains logic of showing progress overlay, with the activation and deactivation of overlay you need to set opacity of underlying page.
+
The {{Icode|BtnStart_Click}} event contains the logic of showing the progress overlay; when activating and deactivating the overlay you need to set the opacity of underlying page.
In the [http://msdn.microsoft.com/en-us/library/system.componentmodel.backgroundworker.dowork.aspx DoWork] method of [http://msdn.microsoft.com/en-us/library/4852et58.aspx BackgroundWorker] you can write actual logic for time being i just block UI thread for some time.
+
In the [http://msdn.microsoft.com/en-us/library/system.componentmodel.backgroundworker.dowork.aspx DoWork] method of [http://msdn.microsoft.com/en-us/library/4852et58.aspx BackgroundWorker], you can write the actual logic. In the current implementation, it just blocks the UI thread for some time.
 
<br />
 
<br />
Following screen shot shows progress overlay of above implementation.
+
The following screen shot shows the above implemententation of the progress overlay:
 
[[File:Overlay.png|frame|none|Progress Overlay]]
 
[[File:Overlay.png|frame|none|Progress Overlay]]
 
<br />
 
<br />
Finally don’t forget to set {{Icode|IsOpen}} property of {{Icode|popup}} to false on {{Icode|OnBackKeyPress}} event otherwise overlay continues to display even though you travel to another xaml page.
+
Finally don't forget to set {{Icode|IsOpen}} property of {{Icode|popup}} to '''false''' on {{Icode|OnBackKeyPress}} event, otherwise the overlay will continue to display even if you navigate to another XAML page.
 
<br />
 
<br />
You can find complete source code below. <br />
+
You can find the complete source code below. <br />
[[File:OverLays.zip]]
+
[[File:OverLays.zip]][[Category:Windows Phone 7.5]]

Revision as of 04:29, 10 April 2013

This article explains how to create a simple overlay using UserControl in Windows Phone.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code Example
Source file: Media:OverLays.zip
Tested with
SDK: windows phone 8.0
Devices(s): windows phone 8.0 emulator
Compatibility
Platform(s): windows phone
Windows Phone 8
Windows Phone 7.5
Article
Created: mehul_raje (16 Nov 2012)
Last edited: hamishwillee (10 Apr 2013)

Introduction

Overlays can have a wide range of applications, be it a simple prompt or displaying a progress indicator. Using UserControl for implementing it gives us feasibility to easily construct any type of overlay. This article demonstrates how to implement a sample progress overlay.

The following steps describe how to implement it:

  1. Create new Windows Phone project from Visual Studio.
  2. Add new UserControl named OverLay.xaml in current project.

Copy and paste following code in your OverLay.xaml file.

<UserControl x:Class="WindowsPhoneSample7.OverLay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
d:DesignHeight="800" d:DesignWidth="480">
 
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="400"/>
<RowDefinition Height="400"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="1">
<ProgressBar IsIndeterminate="True" Foreground="Orange" Height="50" Width="480" VerticalAlignment="Center"/>
<TextBlock Text="Wait" Foreground="Orange" HorizontalAlignment="Center"/>
</StackPanel>
</Grid>
</UserControl>


LayoutRoot is populated with ProgressBar and TextBlock but you can put any UI controls here that you want to show on the overlay. For example, if you want to show a simple About prompt then you may put a TextBlock and an Image with custom size.

In code behind file of Overlay.xaml initialize the size of LayoutRoot to the value you want. The following code shows how the height and width of LayoutRoot are set to the height and width of the screen.

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
}


Now open MainPage.xaml.cs file and copy and paste the following code in it:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Windows.Controls.Primitives;
using System.ComponentModel;
using System.Threading;
 
namespace WindowsPhoneSample7
{
public partial class MainPage : PhoneApplicationPage
{
private Popup popup;
// Constructor
public MainPage()
{
InitializeComponent();
this.popup = new Popup();
}
 
private void BtnStart_Click(object sender, RoutedEventArgs e)
{
this.LayoutRoot.Opacity = 0.2;
OverLay ovr = new OverLay();
this.popup.Child = ovr;
this.popup.IsOpen = true;
BackgroundWorker worker = new BackgroundWorker();
worker.DoWork += (s, a) =>
{
Thread.Sleep(5000);
};
worker.RunWorkerCompleted += (s, a) =>
{
popup.IsOpen = false;
this.LayoutRoot.Opacity = 1.0;
};
worker.RunWorkerAsync();
}
 
protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
{
this.popup.IsOpen = false;
}
}
}


The BtnStart_Click event contains the logic of showing the progress overlay; when activating and deactivating the overlay you need to set the opacity of underlying page. In the DoWork method of BackgroundWorker, you can write the actual logic. In the current implementation, it just blocks the UI thread for some time.
The following screen shot shows the above implemententation of the progress overlay:

Progress Overlay


Finally don't forget to set IsOpen property of popup to false on OnBackKeyPress event, otherwise the overlay will continue to display even if you navigate to another XAML page.
You can find the complete source code below.
File:OverLays.zip

643 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×