How can I show a ProgressRing control ONLY on top of/overlaying my current page?

Question

I\'m an Android developer trying to learn UWP development, and stuck on this simple need. I have 3 pages and want to make a ProgressRing accessible to all 3 pages, so when I\'m

Answer 1

How can I show a ProgressRing control ONLY on top of/overlaying my current page?

For your requirement, It looks that you want make HUD for uwp. And you could use Popup class to approach. Popup is a general purpose container for hosting UIElement on top of existing content. So, you could create a UserControl that with ProgressRing and make Popup as host container.

Code behind

public sealed partial class UWPHUDControl : UserControl
{
    Popup popup;
    public UWPHUDControl()
    {
        this.InitializeComponent();                  
    }

    public  UWPHUDControl(string message)
    {
        this.InitializeComponent();
        SystemNavigationManager.GetForCurrentView().BackRequested += UWPHUD_BackRequested;
        Window.Current.CoreWindow.SizeChanged += CoreWindow_SizeChanged;
        msg_Txt.Text = message;
    }

    private void CoreWindow_SizeChanged(CoreWindow sender, WindowSizeChangedEventArgs args)
    {
        UpdateUI();
    }

    private void UWPHUD_BackRequested(object sender, BackRequestedEventArgs e)
    {
        Close();

    }
    private void UpdateUI()
    {

        var bounds = Window.Current.Bounds;
        this.Width = bounds.Width;
        this.Height = bounds.Height;
    }

    public void Show()
    {       
        popup = new Popup();
        popup.Child = this;   
        progress_R.IsActive = true;       
        popup.IsOpen = true;
        UpdateUI();
    }



    public void Close()
    {
        if (popup.IsOpen)
        {
            progress_R.IsActive = false;
            popup.IsOpen = false;
            SystemNavigationManager.GetForCurrentView().BackRequested -= UWPHUD_BackRequested;
            Window.Current.CoreWindow.SizeChanged -= CoreWindow_SizeChanged;
        }
    }
}

Xaml

<Grid Name="mask_grid" Background="{ThemeResource SystemControlAccentAcrylicWindowAccentMediumHighBrush}" Opacity="0.35">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Orientation="Horizontal"
        >
        <ProgressRing
            Name="progress_R"
            Width="50"
            Height="50"
            />
        <TextBlock
            Name="msg_Txt"
            Margin="10,0,0,0"
            VerticalAlignment="Center"
            FontSize="12"
            Foreground="Azure"
            TextAlignment="Center"
            />
    </StackPanel>

</Grid>

Usage

UWPHUDControl hud = new UWPHUDControl("Loading");
hud.Show();
await Task.Delay(2000);
hud.Close();

Answer 2

Possible Steps:

1. Right-click the project.
2. Add > New Item > User Control
3. Inside your CustomUserControl xaml you can add your ProgressRing control which only needs to be customized once. To use this CustomUserControl on any of your pages.

That's a pretty basic way to do it.

Answer 3

you can use a UserControl and put this user control in the top of your UI making this visible or collapsed depending of your logic.

If you are looking for a good control to do that you can consider Loading Xaml Control from Community Toolkit https://docs.microsoft.com/en-us/windows/communitytoolkit/controls/loading