c# - xamlを使用してwindws8アプリでページ間を移動するときにプログレスバーを追加する

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）の可視性をVisibleに設定し、メインコンテンツグリッドを非表示にします。

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-event、またはLoaded-eventのいずれかでデータをフェッチすることです。ページを表示するすべてのブロック。したがって、別の解決策を見つける必要があります。そこに2つあります。

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を使用してwindws8アプリでページ間を移動するときにプログレスバーを追加する

3 に答える 3

Related

Reference