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

问题

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 doing an async task I can pop up the ProgressRing modal. I don't want to have ProgressRing code in each page. How can I accomplish this?

I've looked into the ContentDialog class, but that seems to require a button in the UI and all I want to show is the ProgressRing itself without a button centered in my window

The Flyout class seems like it's required to be a part of page itself so I cannot share it among multiple pages.

The Popup class looks promising but it's not modal and I cannot understand it's documentation.

Can someone recommend a class or approach for me? How can I just overlay a control on top of my existing page, in the center of the page with no other UI just the single control, in my case a ProgressRing?

回答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();

回答2:

Possible Steps:

Right-click the project.
Add > New Item > User Control
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.

回答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

来源：https://stackoverflow.com/questions/55228547/how-can-i-show-a-progressring-control-only-on-top-of-overlaying-my-current-page

标签

uwp

uwp-xaml