如何在带有Hub控件的UWP应用中显示ProgressRing

时间:2016-03-16 08:03:14

标签: xaml progress-bar win-universal-app

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

我将控件绑定到我的MainViewModel中的布尔值,我在整个更新过程开始时设置为true(通过等待的异步方法完成,完美地工作)然后在下载所有数据但是环时为false永远不会变得可见。我可以看到PropertyChanged正在被提升,但它没有任何区别 - 进度环从未显示过。

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

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

我知道这必须是最简单的XAML问题但是我已经尝试了我能想到的所有内容并搜索了网络,所以我希望其他人可以帮助我在Hub前面显示progess响铃?

这是我的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>

1 个答案:

答案 0 :(得分:1)

您是否尝试将Hub之后的ProgressRing放入XAML?

<Hub/>
<ProgressRing/>

通常它会按照您输入的顺序显示,因此ProgressRing元素将在您的代码后面的Hub后面。