Показать индикатор в верхней части существующего файла MainPage.xaml в приложении UWP (c ++), маскируя все остальные элементы управления в пользовательском интерфейсе

Question

У меня есть приложение UWP C ++ для получения некоторой информации, для загрузки которой требуется много времени. Во время запуска требуется время для получения информации и обновления пользовательского интерфейса. Так что я подумал о том, чтобы поставить индикатор выполнения, пока пользовательский интерфейс получает данные.,Мне нужно, чтобы индикатор выполнения отображался в пользовательском интерфейсе во время загрузки в MainPage.xaml, делая существующие элементы управления невидимыми. Но он не появляется поверх пользовательского интерфейса. После получения данных в пользовательском интерфейсе индикатор выполнения должен исчезнуть, и все элементы управления должныбыть видимым.

<Page
    x:Class="Ft_Information.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Ft_Information"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"  Loaded="MainWindow_Loaded" BorderThickness="10" IsTabStop="True">

  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid x:Name="ftnfoGrid" Grid.Row="1">
      <Grid.RowDefinitions>
        <RowDefinition Height="25*" />
        <RowDefinition Height="500*" />
        <RowDefinition Height="100*" />

      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50*" />
        <ColumnDefinition Width="500*" />
        <ColumnDefinition Width="800*" />
      </Grid.ColumnDefinitions>

      <StackPanel Orientation="Vertical" Grid.Row="1" Grid.Column="1">
        <TextBox x:Name="ProductNameText"      x:Uid="ProductName"      TextWrapping="Wrap" BorderThickness="0" IsTabStop="False" FontSize="13" IsReadOnly="True" />
       <StackPanel Grid.Row="2" RenderTransformOrigin="0.5,0.5" Grid.ColumnSpan="1" HorizontalAlignment="Stretch" Margin="55,5.333,0.333,-5" VerticalAlignment="Stretch">
        <ProgressRing  Name="ProgressRingLbl" Height="120" Width="109" HorizontalAlignment="Left"
          Foreground="Blue" IsActive="True" Visibility="Visible" VerticalAlignment="Center" Margin="0,0,0,0"/>
      </StackPanel>

    </Grid>
</Grid>

</Page>


MainPage::MainPage()
{
    ProductNameText->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
ProgressRingLbl->IsActive = true;
        ProgressRingLbl->Visibility = Windows::UI::Xaml::Visibility::Visible;
}

MainPage::FuntouploadUI()
{
.............
//after getting data
ProgressRingLbl->IsActive = false;
        ProgressRingLbl->Visibility = Windows::UI::Xaml::Visibility::Collapsed;

ProductNameText->Visibility = Windows::UI::Xaml::Visibility::Visible;

}

Тем не менее индикатор выполнения нигде не отображается в пользовательском интерфейсе.

Answer 1

<Page
    x:Class="Ft_Information.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Ft_Information"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"  Loaded="MainWindow_Loaded" BorderThickness="10" IsTabStop="True">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />

        </Grid.RowDefinitions>

        <Grid x:Name="SysInfoGrid" Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="25*" />
                <RowDefinition Height="500*" />
                <RowDefinition Height="100*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*" />
                <ColumnDefinition Width="500*" />
                <ColumnDefinition Width="800*" />
            </Grid.ColumnDefinitions>
            <StackPanel Orientation="Vertical" Grid.Row="1" Grid.Column="1">
                <TextBox x:Name="NameText"      x:Uid="Name"      TextWrapping="Wrap" BorderThickness="0" IsTabStop="False" FontSize="13" IsReadOnly="True" />
                <TextBox x:Name="NumberText"    x:Uid="Number"    TextWrapping="Wrap" BorderThickness="0" IsTabStop="False" FontSize="13" IsReadOnly="True" />
                <TextBox x:Name="dNumberText"    x:Uid="dNumber"    TextWrapping="Wrap" BorderThickness="0" IsTabStop="False" FontSize="13" IsReadOnly="True" />
                <TextBox x:Name="yText"      x:Uid="Ty"      TextWrapping="Wrap" BorderThickness="0" IsTabStop="False" FontSize="13" IsReadOnly="True" />
                <TextBox x:Name="orNameText"    x:Uid="orName"    TextWrapping="Wrap" BorderThickness="0" IsTabStop="False" FontSize="13" IsReadOnly="True" />
                <TextBox x:Name="SNameText"   x:Uid="SName"   TextWrapping="Wrap" BorderThickness="0" IsTabStop="False" FontSize="13" IsReadOnly="True" />
                <TextBox x:Name="nText" x:Uid="Kion" TextWrapping="Wrap" BorderThickness="0" IsTabStop="False" FontSize="13" IsReadOnly="True" />
                <TextBox x:Name="rText"     x:Uid="ber"     TextWrapping="Wrap" BorderThickness="0" IsTabStop="False" FontSize="13" IsReadOnly="True" />
                <TextBox x:Name="teText"      x:Uid="Fte"      TextWrapping="Wrap" BorderThickness="0" IsTabStop="False" InputScope="Number" ManipulationMode="TranslateRailsX"  FontSize="13" IsReadOnly="True" />
            </StackPanel>
              <StackPanel Orientation="Vertical" Grid.Row="1" Grid.Column="2">
                <TextBox x:Name="NameValueText"      TextWrapping="Wrap" BorderThickness="0" FontSize="13" KeyDown="KeyboardKeyDownEvent" KeyUp="KeyboardKeyUpEvent" IsReadOnly="True" />
                <TextBox x:Name="NumberValueText"    TextWrapping="Wrap" BorderThickness="0" FontSize="13" KeyDown="KeyboardKeyDownEvent" KeyUp="KeyboardKeyUpEvent" IsReadOnly="True" />
                <TextBox x:Name="eText"    TextWrapping="Wrap" BorderThickness="0" FontSize="13" KeyDown="KeyboardKeyDownEvent" KeyUp="KeyboardKeyUpEvent" IsReadOnly="True" />
                <TextBox x:Name="eText"      TextWrapping="Wrap" BorderThickness="0" FontSize="13" KeyDown="KeyboardKeyDownEvent" KeyUp="KeyboardKeyUpEvent" IsReadOnly="True" />
                <TextBox x:Name="ProcessorNameValueText"    TextWrapping="Wrap" BorderThickness="0" FontSize="13" KeyDown="KeyboardKeyDownEvent" KeyUp="KeyboardKeyUpEvent" IsReadOnly="True" />
                <TextBox x:Name="SeText"       TextWrapping="Wrap" BorderThickness="0" FontSize="13" KeyDown="KeyboardKeyDownEvent" KeyUp="KeyboardKeyUpEvent" IsReadOnly="True" />
                <TextBox x:Name="ddText" TextWrapping="Wrap" BorderThickness="0" FontSize="13" KeyDown="KeyboardKeyDownEvent" KeyUp="KeyboardKeyUpEvent" IsReadOnly="True" />
                <TextBox x:Name="eText"     TextWrapping="Wrap" BorderThickness="0" FontSize="13" KeyDown="KeyboardKeyDownEvent" KeyUp="KeyboardKeyUpEvent" IsReadOnly="True" />
                <TextBox x:Name="ueText"      TextWrapping="Wrap" BorderThickness="0" FontSize="13" KeyDown="KeyboardKeyDownEvent" KeyUp="KeyboardKeyUpEvent" IsReadOnly="True" />
            </StackPanel>

            <StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2" HorizontalAlignment="Center">
                <Button x:Name="USBTypeCPortsButton" x:Uid="USBTypeCPort" Content="USB Type-C Ports" Margin="120,0,0,0" HorizontalAlignment="Stretch" Width="Auto" Click="USBType_Click"  FontSize="13" />
                <Button x:Name="Advancedbutton"      x:Uid="Advanced"     Content="Advanced..."      Margin="45,0,100,0"  HorizontalAlignment="Stretch" Width="Auto" Click="Advanced_Click" FontSize="13" />
            </StackPanel>           
        </Grid>

        <Grid Grid.Row="2" Width="200" Height="300">
            <Grid.RowDefinitions>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition  />

            </Grid.ColumnDefinitions>

            <Canvas Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" Grid.RowSpan="1" VerticalAlignment="Stretch" >

                <ProgressRing Name="splashProgressRing" IsActive="True" Width="50" Height="50" HorizontalAlignment="Center" Foreground="{ThemeResource SystemControlBackgroundChromeWhiteBrush}" />
                <Button x:Name="Advancedbutton1"      x:Uid="Advanced1"     Content="Advanced...mm"      Margin="100,0,100,0"  HorizontalAlignment="Stretch" Width="Auto" Click="Advanced_Click" FontSize="13" />


            </Canvas>

        </Grid>
    </Grid>



</Page>

Я пробовал это, но в пользовательском интерфейсе все еще не отображается индикатор выполнения, кнопка: Advancedbutton1 видна. Кто-нибудь, пожалуйста, сообщите

Answer 2

Причина, по которой кольцо прогресса не работает, заключается в том, что мы используем другое представление для отображения mainpage.xaml в качестве дочернего элемента к его корневой сетке. Когда я переместил часть кольца прогресса в этот xaml, он работает нормально.Поскольку прогресс-кольцо работает как отдельный поток пользовательского интерфейса, оно не вызывается главной страницей.

Answer 3

Я пишу простую демонстрацию ниже. Вы можете использовать этот код в своем приложении, чтобы проверить, может ли кольцо прогресса отображаться в пользовательском интерфейсе.

<Page ...>   
  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel Background="AliceBlue">
       <TextBlock x:Name="MyTextBlock" Height="50" FontSize="16" Margin="0,20,0,20">Hello,world</TextBlock>​
       <Button x:Name="MyButton" Click="Button_Click">click me</Button>​
       <ProgressRing x:Name="MyProgressRing" Height="120" Width="109" Foreground="Blue" IsActive="True" Visibility="Visible" HorizontalAlignment="Center" VerticalAlignment="Center"></ProgressRing>​
     </StackPanel>
  </Grid>
</Page>

MainPage::MainPage()
{​
  InitializeComponent();​

  MyTextBlock->Visibility = Windows::UI::Xaml::Visibility::Collapsed;​
  MyButton->Visibility = Windows::UI::Xaml::Visibility::Collapsed;​
  MyProgressRing->IsActive = true;​
  MyProgressRing->Visibility = Windows::UI::Xaml::Visibility::Visible;​
​
}