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

Question

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

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

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

我还尝试将环放在中间集线器部分的数据模板网格的网格中（有 3 个并排，每个 640 像素）和 DataTmeplate 本身（下面的 Page.Resources 中的第二个）但是它仍然不会显示它，所以我正在撕扯我的头发。

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

这是我的 XAML 页面的精简版 - 我可以发布很多内容，但页面很大。

   <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

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

<Hub/>
<ProgressRing/>

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