如何仅在当前页面的顶部/覆盖上显示 ProgressRing 控件?

问题描述

我是一名 Android 开发人员，正在尝试学习 UWP 开发，并坚持这个简单的需求.我有 3 个页面，并且希望所有 3 个页面都可以访问 ProgressRing，因此当我执行异步任务时，我可以弹出 ProgressRing 模式.我不想在每个页面中都有 ProgressRing 代码.我怎样才能做到这一点?

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?

我查看了 ContentDialog 类，但这似乎需要 UI 中的按钮，而我只想显示 ProgressRing 本身，而没有按钮居中在我的窗口中

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

Flyout 类似乎需要成为页面本身的一部分，因此我无法在多个页面之间共享它.

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

Popup 类看起来很有前途，但它不是模态的，我无法理解它的文档.

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

有人可以为我推荐课程或方法吗?我怎样才能在现有页面的顶部覆盖一个控件，在页面的中心，没有其他 UI，只有一个控件，在我的例子中是一个 ProgressRing?

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?

推荐答案

根据您的要求，看起来您想要为 uwp 制作 HUD.你可以使用 Popup 类来接近.Popup 是一个通用容器，用于在现有内容之上托管 UIElement.因此，您可以使用 ProgressRing 创建一个 UserControl 并使 Popup 作为主机容器.

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.

背后的代码

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>

使用

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

这篇关于如何仅在当前页面的顶部/覆盖上显示 ProgressRing 控件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！