如何仅在当前页面顶部 of/overlaying 显示 ProgressRing 控件？

Question

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

我查看了 ContentDialog class，但这似乎需要 UI 中的一个按钮，而我想要显示的只是 ProgressRing 本身，而我的 window

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

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

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

Answer 1

可能的步骤：

右键单击该项目。
添加 > 新项目 > 用户控件
在您的 CustomUserControl xaml 中，您可以添加 ProgressRing 控件，只需自定义一次。在您的任何页面上使用此 CustomUserControl。

这是一种非常基本的方法。

Answer 2

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

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

代码隐藏

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

Answer 3

您可以使用 UserControl 并将此用户控件放在 UI 的顶部，使其可见或折叠，具体取决于您的逻辑。

如果你正在寻找一个好的控件来做到这一点，你可以考虑正在从社区工具包加载 Xaml 控件 https://docs.microsoft.com/en-us/windows/communitytoolkit/controls/loading

如何仅在当前页面顶部 of/overlaying 显示 ProgressRing 控件？

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

c#

uwp

uwp-xaml

可能的步骤：