Windows商店应用：带动态内容的滚动查看器

Question

我有一个带有ItemsControl（其中包含数据行）的scrollViewer作为内容。来自这些行的数据从服务器获取，因此我想用文本显示ProgressRing，直到数据到达。基本上我希望ScrollViewer的内容是一个带有进度环和文本的网格，数据到达后用我的ItemsControl改变内容。

问题是ScrollViewer不接受超过1个元素作为内容。请告诉我如何解决这个问题。 （我是C＃初学者）

<FlipView x:Name="OptionPagesFlipView" Grid.Row="1" TabNavigation="Cycle" SelectionChanged="OptionPagesFlipView_SelectionChanged" ItemsSource="{Binding OptionsPageItems}"> 
      <FlipView.ItemTemplate> 
       <DataTemplate x:Name="OptionMonthPageTemplate"> 
        <ScrollViewer x:Name="OptionsScrollViewer" HorizontalScrollMode="Disabled" HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Auto"> 
         <ItemsControl x:Name="OptionItemsControl" ItemsSource="{Binding OptionItems, Mode=OneWay}" Visibility="Collapsed"> 
          <ItemsControl.ItemTemplate> 
           <DataTemplate x:Name="OptionsChainItemTemplate"> 
            <Grid x:Name="OptionItemGrid" Background="#FF9DBDF7" HorizontalAlignment="Stretch"> 
             <Grid.RowDefinitions> 
              <RowDefinition Height="Auto"/> 
              <RowDefinition Height="Auto"/> 
              <RowDefinition Height="Auto"/> 
              <RowDefinition Height="Auto"/> 
             </Grid.RowDefinitions> 
             <Grid.ColumnDefinitions> 
              <ColumnDefinition Width="*" /> 
              <ColumnDefinition Width="*" /> 
              <ColumnDefinition Width="*" /> 
              <ColumnDefinition Width="*" /> 
              <ColumnDefinition Width="*" /> 
             </Grid.ColumnDefinitions> 
             <!-- CALL BID --> 
             <TextBlock Text="Bid" Foreground="Gray" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" FontSize="18" Margin="5,0,5,0"/> 
             <TextBlock x:Name="CallBidTextBlock" Text="{Binding CallBid}" Foreground="Blue" HorizontalAlignment="Left" Grid.Row="1" Grid.Column="0" Margin="5,0,5,5" FontSize="18"/> 
             <!-- CALL ASK --> 
             <TextBlock Text="Ask" Foreground="Gray" HorizontalAlignment="Left" Grid.Row="2" Grid.Column="0" FontSize="18" Margin="5,0,5,0"/> 
             <TextBlock x:Name="CallAskTextBlock" Text="{Binding CallAsk}" Foreground="Blue" HorizontalAlignment="Left" Grid.Row="3" Grid.Column="0" Margin="5,0,5,0" FontSize="18"/> 
             <!-- CALL LAST --> 
             <TextBlock Text="Last" Foreground="Gray" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="1" FontSize="18" Margin="5,0,5,0"/> 
             <TextBlock x:Name="CallLastTextBlock" Text="{Binding CallLast}" Foreground="Blue" HorizontalAlignment="Left" Grid.Row="1" Grid.Column="1" Margin="5,0,5,5" FontSize="18"/> 
             <!-- CALL NET CHANGE --> 
             <TextBlock Text="Net Ch" Foreground="Gray" HorizontalAlignment="Left" Grid.Row="2" Grid.Column="1" FontSize="18" Margin="5,0,5,0"/> 
             <TextBlock x:Name="CallNetChTextBlock" Text="{Binding CallNetChange}" Foreground="{Binding CallNetChangeForeground}" HorizontalAlignment="Left" Grid.Row="3" Grid.Column="1" Margin="5,0,5,5" FontSize="18"/> 
             <!-- STRIKE --> 
             <TextBlock Text="Strike" Foreground="Gray" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="2" FontSize="18" Margin="5,0,5,0"/> 
             <Border Background="{Binding StrikeBackground}" HorizontalAlignment="Center" Grid.Row="2" Grid.Column="2" Margin="5,0,5,5"> 
              <TextBlock x:Name="StrikeTextBlock" Text="{Binding Strike}" Foreground="Blue" FontSize="18"/> 
             </Border> 
             <!-- PUT LAST --> 
             <TextBlock Text="Last" Foreground="Gray" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="3" FontSize="18" Margin="5,0,5,0"/> 
             <TextBlock x:Name="PutLastTextBlock" Text="{Binding PutLast}" Foreground="Blue" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="3" Margin="5,0,5,5" FontSize="18"/> 
             <!-- PUT NET CHANGE --> 
             <TextBlock Text="Net Ch" Foreground="Gray" HorizontalAlignment="Right" Grid.Row="2" Grid.Column="3" FontSize="18" Margin="5,0,5,0"/> 
             <TextBlock x:Name="PutNetChangeTextBlock" Text="{Binding PutNetChange}" Foreground="{Binding PutNetChangeForeground}" HorizontalAlignment="Right" Grid.Row="3" Grid.Column="3" Margin="5,0,5,5" FontSize="18"/> 
             <!-- PUT BID --> 
             <TextBlock Text="Bid" Foreground="Gray" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="4" FontSize="18" Margin="5,0,15,0"/> 
             <TextBlock x:Name="PutBidTextBlock" Text="{Binding PutBid}" Foreground="Blue" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="4" Margin="5,0,15,5" FontSize="18"/> 
             <!-- PUT ASK --> 
             <TextBlock Text="Ask" Foreground="Gray" HorizontalAlignment="Right" Grid.Row="2" Grid.Column="4" FontSize="18" Margin="5,0,15,0"/> 
             <TextBlock x:Name="PutAskTextBlock" Text="{Binding PutAsk}" Foreground="Blue" HorizontalAlignment="Right" Grid.Row="3" Grid.Column="4" Margin="5,0,15,5" FontSize="18"/> 

             <!-- BOTTOM LINE SEPARATOR--> 
             <Rectangle Fill="Black" Height="1" Grid.ColumnSpan="5" VerticalAlignment="Bottom" Grid.Row="3"/> 
            </Grid> 
           </DataTemplate> 
          </ItemsControl.ItemTemplate> 
         </ItemsControl> 
         <!--<Grid> 
          <Grid.RowDefinitions> 
           <RowDefinition/> 
          </Grid.RowDefinitions> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition/> 
           <ColumnDefinition/> 
          </Grid.ColumnDefinitions> 
          <ProgressRing x:Name="CustomProgressRing" Height="40" Width="40" IsActive="true" Grid.Column="0" Margin="20" Foreground="White"/> 
          <TextBlock x:Name="CustomTextBlock" Height="auto" Width="auto" FontSize="25" Grid.Column="1" Margin="20"/> 
          <Border BorderBrush="#FFFFFF" BorderThickness="1" Grid.ColumnSpan="2"/> 
         </Grid>--> 
        </ScrollViewer> 
       </DataTemplate> 
      </FlipView.ItemTemplate> 

Answer 1

放一个网格在你的ScrollViewer，和你的其他两个控件（ItemsControl的和网格）在网格，像这样：

<ScrollViewer x:Name="OptionsScrollViewer" HorizontalScrollMode="Disabled" HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Auto"> 
    <Grid> 
     <ItemsControl x:Name="OptionItemsControl" ItemsSource="{Binding OptionItems, Mode=OneWay}" Visibility="Collapsed"> 
      <!-- --> 
     </ItemsControl> 
     <Grid> 
      <!-- --> 
     </Grid> 
    </Grid> 
</ScrollViewer> 

注意：您需要使用ProgressRing控制网格的可见性。你可能想给它一个名字，这样你就可以从C＃中做到这一点（我假设你也控制C＃中ItemsControl的可见性）。