c# - 使用 xaml 在 windows 8 应用程序中从页面导航到另一个页面时添加进度条

Question

我正在开发一个 Windows 8 应用程序，我想在从一个页面导航到另一个页面时添加一个进度条，因为用户必须等待才能从服务器加载数据。谁能提供我需要在 XAML 和 C# 中添加的代码？应该使用进度条的什么属性或事件？

//XAML 页面

    <common:LayoutAwarePage
    x:Name="Hub1"
    x:Class="App1.GroupedItemsPage1"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:data="using:App1.Data"
    xmlns:common="using:App1.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.BottomAppBar>
        <AppBar>
            <Grid>
                <Button x:Name="Content_Hub"  Height="64" Margin="45,10,0,10" Width="145" Content="CONTENT HUB" FontSize="12" FontFamily="Segui" Click="Content_Hub_Click"/>
                <Button x:Name="MARKET_RESEARCH"  Height="64" Margin="220,10,0,10" Width="145" Content="MARKET RESEARCH" FontSize="12" FontFamily="Segui" Click="MARKET_RESEARCH_Click"/>
                <Button x:Name="LEAD_CONVERSION"  Height="64" Margin="400,10,0,10" Width="145" Content="LEAD CONVERSION" FontSize="12" FontFamily="Segui"/>
                <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                    <Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Help"/>
                    <StackPanel.ChildrenTransitions>
                        <TransitionCollection>
                            <AddDeleteThemeTransition/>
                        </TransitionCollection>
                    </StackPanel.ChildrenTransitions>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

    <Page.Resources>

        <!--
            Collection of grouped items displayed by this page, bound to a subset
            of the complete item list because items in groups cannot be virtualized
        -->
        <CollectionViewSource
            x:Name="groupedItemsViewSource"
            Source="{Binding Groups}"
            IsSourceGrouped="true"
            ItemsPath="TopItems"
            d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:DataSource, IsDesignTimeCreatable=True}}"/>

    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout -->

   <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=Pageroot}" Style="{StaticResource BackButtonStyle}" Margin="36,0,0,36" Grid.Row="0"/>
            <StackPanel x:Name="Header" Grid.Row="0" Grid.Column="1" >
                <StackPanel Orientation="Horizontal">
                    <Image HorizontalAlignment="Left" Height="Auto" Margin="35,30,0,0" VerticalAlignment="Top" Width="202" Source="Assets/ACE-Logo.png"></Image>
                </StackPanel>
            </StackPanel>
        </Grid>
        <ProgressRing x:Name="progressBar" VerticalAlignment="Top" />
        <!-- Horizontal scrolling grid used in most view states -->
       <SemanticZoom Name="Zoom" Grid.Row="1">
           <SemanticZoom.ZoomedInView>
       <GridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemGridView"
            AutomationProperties.Name="Grouped Items"
            Grid.Row="1"
            Margin="0,-3,0,0"
            Padding="116,0,40,46"
            ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
            ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
            SelectionMode="None"
            IsItemClickEnabled="True"
            ItemClick="ItemView_ItemClick">

                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <GridView.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <Grid Margin="1,0,0,6">
                                        <Button
                                    AutomationProperties.Name="Group Title"
                                    Content="{Binding Title}"
                                    Style="{StaticResource TextButtonStyle}" 
                                    />
                                    </Grid>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </GridView.GroupStyle>
                </GridView>
             </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView x:Name="ZoomedOutGV"  VerticalAlignment="Center">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel> 
                                <TextBlock Text="{Binding Group.Title}" Width="200" Height="200" Foreground="Blue"/>
                            </StackPanel>
                         </DataTemplate>
                    </GridView.ItemTemplate>
                  <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                            </StackPanel>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
            </GridView>
            </SemanticZoom.ZoomedOutView>
       </SemanticZoom>


       <!--   Vertical scrolling list only used when snapped -->
         <ListView
            x:Name="itemListView"
            AutomationProperties.AutomationId="ItemListView"
            AutomationProperties.Name="Grouped Items"
            Visibility="Collapsed"
            Margin="0,135,0,0"
            Padding="10,0,0,60"
            ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
            ItemTemplate="{StaticResource Standard80ItemTemplate}"
            SelectionMode="None"
            IsItemClickEnabled="True"
            ItemClick="ItemView_ItemClick" Grid.RowSpan="2">

            <ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="7,7,0,0">
                                 <Button
                                    AutomationProperties.Name="Group Title"
                                    Content="{Binding Title}"

                                    Style="{StaticResource TextButtonStyle}"/>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ListView.GroupStyle>
        </ListView>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="96,0,10,56"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when snapped, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>-->

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>

//C# Page
using App1.Data;
using App1.DataService;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Grouped Items Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234231

namespace App1
{
    /// <summary>
    /// A page that displays a grouped collection of items.
    /// </summary>
    public sealed partial class GroupedItemsPage1 : App1.Common.LayoutAwarePage
    {
        public GroupedItemsPage1()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// Populates the page with content passed during navigation.  Any saved state is also
        /// provided when recreating a page from a prior session.
        /// </summary>
        /// <param name="navigationParameter">The parameter value passed to
        /// <see cref="Frame.Navigate(Type, Object)"/> when this page was initially requested.
        /// </param>
        /// <param name="pageState">A dictionary of state preserved by this page during an earlier
        /// session.  This will be null the first time a page is visited.</param>
        protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
        {
            // TODO: Create an appropriate data model for your problem domain to replace the sample data

                var sampleDataGroups = DataSource.GetGroups((String)navigationParameter);
                this.DefaultViewModel["Groups"] = sampleDataGroups;


                var tracks = groupedItemsViewSource.View.CollectionGroups;
                (Zoom.ZoomedOutView as GridView).ItemsSource = tracks;

           // GetSectors();


        }
          /// <summary>
        /// Invoked when an item within a group is clicked.
        /// </summary>
        /// <param name="sender">The GridView (or ListView when the application is snapped)
        /// displaying the item clicked.</param>
        /// <param name="e">Event data that describes the item clicked.</param>

        /*protected async override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
        {

            var client = new DataServiceSoapClient();
            var sectors = await client.GetSectorsAsync(1);
            this.DefaultViewModel["sectors"] = sectors;

        }*/

        void ItemView_ItemClick(object sender, ItemClickEventArgs e)
        {
            // Navigate to the appropriate destination page, configuring the new page
            // by passing required information as a navigation parameter
            var itemId = ((DataItem)e.ClickedItem).UniqueId;
            this.Frame.Navigate(typeof(GroupDetailPage1), itemId);
        }


        private void Content_Hub_Click(object sender, RoutedEventArgs e)
        {
            Frame.Navigate(typeof(App1.GroupedItemsPage1));
        }

        private void MARKET_RESEARCH_Click(object sender, RoutedEventArgs e)
        {
            Frame.Navigate(typeof(App1.SamplePage));
        }

        }

    }

score 2 · Accepted Answer

在 LoadState 中异步加载数据。在获取数据显示内容网格并隐藏进度条后，将 ProgressBar（或 ProgressRing）可见性设置为可见并隐藏主内容网格。

protected async override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
{
  ProggressBarVisible(true);
  try
  {
    MainContentGrid.Visibility = Visibility.Collapsed;       
    this.DataContext = await MyDataSource.GetData(navigationParameter);
  }
  finally
  {
    ProggressBarVisible(false);
    MainContentGrid.Visibility = Visibility.Visible;
  }
}


private void ProggressBarVisible(bool visible)
{
  ProgressRingLoad.Visibility = visible ? Visibility.Visible : Visibility.Collapsed;
  ProgressRingLoad.IsActive = visible;
}

空页面的 XAML 应该是这样的：

<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="WindowsStorePlayground.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WindowsStorePlayground"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

  <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    <Grid x:Name="MainContentGrid">
      <!-- page content goes here -->
    </Grid>

    <ProgressRing x:Name="ProgressRingLoad" Visibility="Collapsed"></ProgressRing>

  </Grid>
</common:LayoutAwarePage>

顺便提一句。要获取 LoadState，您应该使用 LayoutAwarePage

score 1 · Accepted Answer

如果您正在加载数据async而不是将其添加到您的函数中

private async void LoadDataAsync()
{
//progressbar start
progressBar.IsIndeterminate = true;

//Some async calls

//other stuff

//stop progressbar
progressBar.IsIndeterminate = false;
}

score 0 · Accepted Answer

您的问题是您在页面构造函数、 OnNavigatedTo 事件或 Loaded 事件中获取数据。显示页面的所有块。所以你必须找到另一个解决方案。我在那里看到两个：

1.稍后加载您的数据。延迟加载，您可以显示带有进度或类似的页面

 <ProgressRing x:Name="PrgRing" IsActive="True" Visibility="Collapsed"/>

在你的 OnNavigatedTo-handler

PrgRing.Visibility = Visibility.Visible;

然后加载您的数据，完成后，显示并设置

PrgRing.Visibility = Visibility.Collapsed;

2.使用中间的页面，加载您的数据并显示进度。

XAML：

<ProgressRing x:Name="PrgRing" IsActive="True" Visibility="Collapsed"/>

C＃

//load the data and then
this.rootFrame.Navigate(typeof(TargetPage));

c# - 使用 xaml 在 windows 8 应用程序中从页面导航到另一个页面时添加进度条

3 回答 3

Related

Reference