如何使用 Hub 控件在 UWP 应用程序中显示 ProgressRing

Question

我有一个 UWP 应用程序需要从托管在云中 .Net 服务器上的 Web 服务获取 SQL 数据以及来自 Web API 的一些额外数据，我想在加载时显示不确定的进度环控件。

我将控件绑定到我的 MainViewModel 中的一个布尔值，我在整个更新过程开始时将其设置为 true（通过等待的异步方法完成，该方法完美运行），然后在下载所有数据时设置为 false 但是戒指永远不会变得可见。我可以看到 PropertyChanged 正在提升，但这没有任何区别 - 进度环从不显示。

事情是这样的 - 进度环是工作，但因为我无法让它显示在我的集线器控件前面，它只是出现不工作。我知道这一点，因为如果我将集线器向下移动 100 像素并将进度环的垂直对齐方式设置为顶部，我就可以看到环并且它的行为完全符合预期。但由于我显然不想浪费 100 像素，所以我需要让它显示在所有内容的前面，就像您期望任何进度控制一样。

我还尝试将圆环放在中间中心部分的数据模板网格的网格中（有 3 个并排，每个 640px）和 DataTmeplate 本身（[=27= 中的第二个） ] 下面），但它仍然不会显示它，所以我把头发扯掉了。

我知道这一定是最简单的 XAML 问题，但我已经尝试了所有我能想到的方法并搜索了网络，所以我希望其他人可以帮助我显示进度环在 Hub 前面？

这是我的 XAML 页面的精简版 - 我可以 post 很多，但页面很大。

   <Page
        x:Class="TVTracker.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:TVTracker"
        xmlns:vm="using:TVTracker.ViewModel"
        xmlns:model="using:TVTracker.Model"
        xmlns:hlp="using:TVTracker.Common"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        RequestedTheme="Light">

        <Page.DataContext>
            <vm:MainViewModel/>
        </Page.DataContext>

        <Page.Resources>

            <!-- styles and other resources here -->

            <!-- gets displayed in first of 3 hub sections 640 wide --> 
            <DataTemplate x:Key="ShowListTemplate" x:DataType="model:TVShow">
                <Grid Width="640" Height="Auto" Margin="5" HorizontalAlignment="Stretch" RightTapped="ShowsList_RightTapped">
                <!-- ...etc etc... -->
           <\DataTemplate>

            <!-- gets displayed in second of 3 hub sections 640 wide -->      
            <DataTemplate x:Key="DetailsTemplate" x:DataType="model:TVShow">

                <Grid Width="640" Margin="0,20,0,0" Height="Auto" VerticalAlignment="Top" HorizontalAlignment="Stretch">
                    <!-- ...etc etc... -->
                </Grid>
           </DataTemplate>

            <!-- gets displayed in second of 3 hub sections 640 wide -->   
            <DataTemplate x:Key="EpisodeListTemplate" x:DataType="model:Episode">

                <Grid Width="640" Margin="0,20,0,0" Height="Auto" VerticalAlignment="Top" HorizontalAlignment="Stretch">
                    <!-- ...etc etc... -->
                </Grid>
            </DataTemplate>

        </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <ProgressRing Name="pgbLoadingShow" IsActive="{Binding LoadingShowData}" Width="100" Height="100" VerticalAlignment="top" Foreground="{StaticResource Medium}"/>

        <Hub SectionHeaderClick="Hub_SectionHeaderClick" Margin="0,0,0,0" HorizontalContentAlignment="Stretch" Background="{StaticResource Dark}">

            <Hub.Header>
                <TextBlock Text="ShowTracker" FontSize="14" Foreground="{StaticResource Bright}"/>
            </Hub.Header>
               <HubSection Name="hsShows" MinWidth="640" Padding="20" VerticalAlignment="Top" Background="{StaticResource Dark}" >
<!-- ...etc etc.. -->
</HubSection>

<!-- two other hubsections here -->

        </Hub>
    </Grid>
</Page>

Answer 1

您是否尝试过将 ProgressRing 放在 XAML 中的 Hub 之后？

<Hub/>
<ProgressRing/>

通常它会按照您放置它们的顺序显示，因此 ProgressRing 元素将在您的代码所在的 Hub 后面。

如何使用 Hub 控件在 UWP 应用程序中显示 ProgressRing

How to show ProgressRing in UWP app with Hub control

xaml

progress-bar

win-universal-app