Create simple overlay in windows phone
mehul_raje
(Talk | contribs) m (Mehul raje -) |
mehul_raje
(Talk | contribs) m (Mehul raje -) |
||
| Line 128: | Line 128: | ||
} | } | ||
</code> | </code> | ||
| − | + | <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. | {{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. | ||
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 actual logic for time being i just block UI thread for some time. | ||
Revision as of 13:24, 16 November 2012
This article explains how to create simple overlay using UserControl in windows phone.
Article Metadata
Code Example
Tested with
Compatibility
Article
Introduction
Overlays can be in the any form like progress overlay, simple prompt overlay, using UserControl for implementing overlay gives us feasibility to easily construct any type of overlay.This article shows implementation of progress overlays using UserControl.
To implement progress overlay follow the following steps
- Create new Windows Phone project from Visual Studio.
- Add new UserControl named OverLay.xaml in current project.
Copy 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 which you want to show as overlay like suppose you want to show simple About prompt as overlay then you may put simple TextBlock and Image with custom size.
In code behind file of Overlay.xaml initialize LayoutRoot size with the size you want.Refer following code where height and width of LayoutRoot is set to height and width of 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 paste 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;
}
}
}
BtnStart_Click event contains logic of showing progress overlay, with the activation and deactivation of overlay you need to set opacity of underlying page.
In the DoWork method of BackgroundWorker you can write actual logic for time being i just block UI thread for some time.
Following screen shot shows progress overlay of above implementation.
Finally don’t forget to set IsOpen property of popup to false on OnBackKeyPress event otherwise overlay continues to display even though you travel to another xaml page.
You can find complete source code below.
File:OverLays.zip
