0

hi i need to how can i make a overlay like page in xaml for windows phone ? Like, if i tap a button it will show a overlay like message loading... and then actually start to work. All i have been able to create a popup in xaml.

<Popup x:Name="myPopup" HorizontalAlignment="Center" VerticalAlignment="Center" >
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TextBlock FontSize="25" Grid.Column="1" Margin="20" Text="loading"/>
    </Grid>
</Popup>

Can you plz tell me how can make overlay like message ?

1 Answer 1

2

If you need and overlay there it is. First you need an usercontrol.

<UserControl x:Class="ABC.Test.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="Red" Height="80" Width="480" VerticalAlignment="Center"/>
        <TextBlock Text="loading" Foreground="Red" HorizontalAlignment="Center" FontSize="20"/>
    </StackPanel>
</Grid>

In Codebehind :

public OverLay()
    {
        InitializeComponent();
        this.LayoutRoot.Height = Application.Current.Host.Content.ActualHeight;
        this.LayoutRoot.Width = Application.Current.Host.Content.ActualWidth;
        SystemTray.IsVisible = false;
    }

In the page where you would show the overlay, create an instance of popup just like this:

private Popup popup;

Initialize it after InitializeComponent(),like this :

this.popup = new Popup();

on the event where you need the overlay to show up, try like this :

        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) =>
        {
            //you can do your work here.
            Thread.Sleep(3000);
        };
        _worker.RunWorkerCompleted += (s, a) =>
        {
            popup.IsOpen = false;
            this.LayoutRoot.Opacity = 1.0;
        };

        _worker.RunWorkerAsync();

Find the working Here on Nokia Developers community

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.