How to show a progress ring with a text in Windows Universal Apps?

Question

I am migrating my Windows Phone 8 App to Windows Universal Apps. In that, I used Progress Indicator to show some text like "Loading Please Wait.." till I receive response form server for a Web Service Call. Now I want to achieve the same purpose in the Windows 8.1 App also. In Windows 8.1 there is Progress Ring control but in that Text attribute is not there. Can anyone suggest with some sample code how to achieve this. And I want to use this in my entire app?

Even, text that I used to show in Progress Indicator are stored in a json file in local storage.

Also, I want to achieve this using Dispatcher and in c# not using Xaml.

Answer 1

You can create your own UserControl which will contain both the ProgressRing and a TextBlock for the message, here is an example:

<UserControl
x:Class="YourNamespace.ProgressRingWithText"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:YourNamespace"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400"
x:Name="uc">

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <ProgressRing IsActive="{Binding IsActive, ElementName=uc}"/>
    <TextBlock Text="{Binding Text, ElementName=uc}" HorizontalAlignment="Center"/>
</Grid>

And the C#:

public sealed partial class ProgressRingWithText : UserControl
{
    public bool IsActive
    {
        get { return (bool)GetValue(IsActiveProperty); }
        set { SetValue(IsActiveProperty, value); }
    }

    // Using a DependencyProperty as the backing store for IsActive.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty IsActiveProperty =
        DependencyProperty.Register("IsActive", typeof(bool), typeof(ProgressRingWithText), new PropertyMetadata(false));

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(ProgressRingWithText), new PropertyMetadata("Loading..."));

    public ProgressRingWithText()
    {
        this.InitializeComponent();
    }
}

You can then reference these properties when you add them to your window/page.

You could even go one step further and use a boolean to visibility converter to convert the IsActive property to an Visibility in order to change the visibility of the TextBlock.

Of course, this is a very simple UI, but play around with it and see if this works for you.