How to show ProgressRing in UWP app with Hub control - xaml

Question

I have a UWP app that needs to get SQL data from a webservice hosted on a .Net server in the cloud as well as some extra data from a web API and I want to show an indeterminate Progress Ring control while it's loading.
I have the control bound to a boolean in my MainViewModel that I set to true at the start of the whole update process (done via an awaited async method which works perfectly) and then to false when all data is downloaded but the ring just never becomes visible. I can see PropertyChanged is getting raised but it makes no difference - the progress ring just never displays.
Here's the thing though - the progress ring IS working, but because I can't get it to display in front of my Hub control it just appears not to be working. I know this because if I move the Hub down 100 pixels and set the vertical alignment of the progress ring to Top I can then see the ring and it behaves exactly as expected. But as I obviously don't want to waste 100 pixels I need to get it to display at the front of all content as you'd expect any progress control to do.
I have also tried putting the ring in the grid of the data template's grid for the middle hub section (there are 3 side by side at 640px each) and in the DataTmeplate itself (the second one in Page.Resources below) but it still won't display it so I am tearing my hair out.
I know this has got to be the simplest XAML issue but I've tried everything I can think of and searched the web so I'm hoping someone else can help me get the progess ring to display in front of the Hub?
Here's a cut down version of my XAML page - I can post the lot but it's a big page.
<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

Have you tried putting the ProgressRing after the Hub in your XAML?
<Hub/>
<ProgressRing/>
Generally it will be displayed in the order which you put them in, so the ProgressRing element will be behind the Hub with your code.