Виртуализировать загрузку элементов управления XAML Windows 8 в сетке

Question

У меня есть приложение хранилища Window 8 RT (XAML/C#).

У меня есть форма с сеткой в ​​качестве основного компонента. Эта сетка имеет 50 строк, и каждая строка имеет TextBox. Сетка завернутый в ScrollViewer:

<ScrollViewer> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
      ...50 rows 
     </Grid.RowDefinitions> 

     <TextBox Grid.Row="0" /> 
     <TextBox Grid.Row="1" /> 
     <TextBox Grid.Row="2" /> 
     ... 
     <TextBox Grid.Row="50" /> 
    </Grid> 
</ScrollViewer> 

Когда эта форма загружается существует заметная пауза, пока страница загружена, я предполагаю, что это происходит потому, что страница втягивания.

Каков наилучший способ ускорить этот процесс загрузки? Могу ли я виртуализировать загрузку сетки/текстовых полей?

Медленность заметна, когда приложение работает на планшете Windows Surface, это неплохо на моем ПК с дизайном, но это, очевидно, намного мощнее.

Заранее спасибо.

Answer 1

Вы можете использовать ListView вместо Grid в ScrollViewer, поскольку это поддерживает виртуализацию по умолчанию. Помимо этого - неплохо было бы иметь более приятный пользовательский интерфейс, чем пугающий длинный список TextBoxes для заполнения - возможно, разбить форму на нескольких страницах или использовать FlipView для переключения между группами полей.

* EDIT - пример

XAML

<Page 
    x:Class="App10.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:App10" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 
    <Page.Resources> 
     <DataTemplate 
      x:Key="TextFieldTemplate"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition 
         Height="Auto" /> 
        <RowDefinition 
         Height="Auto" /> 
       </Grid.RowDefinitions> 
       <TextBlock 
        Text="{Binding Label}" /> 
       <TextBox 
        Text="{Binding Value, Mode=TwoWay}" 
        Grid.Row="1" /> 
      </Grid> 
     </DataTemplate> 
     <DataTemplate 
      x:Key="BoolFieldTemplate"> 
      <CheckBox 
       Content="{Binding Label}" 
       IsChecked="{Binding Value, Mode=TwoWay}" /> 
     </DataTemplate> 
     <local:FieldTemplateSelector 
      x:Key="FieldTemplateSelector" 
      TextTemplate="{StaticResource TextFieldTemplate}" 
      BoolTemplate="{StaticResource BoolFieldTemplate}" /> 
    </Page.Resources> 
    <Grid 
     Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 
     <ListView 
      x:Name="lv" 
      ItemTemplateSelector="{StaticResource FieldTemplateSelector}" /> 
    </Grid> 
</Page> 

C#

using System.Collections.Generic; 
using App10.Common; 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Navigation; 

namespace App10 
{ 

    public sealed partial class MainPage : Page 
    { 
     public MainPage() 
     { 
      this.InitializeComponent(); 
      this.lv.ItemsSource = 
       new List<object>(
        new object[] 
         { 
          new BoolFieldViewModel { Label = "Some bool field" }, 
          new TextFieldViewModel { Label = "Some text field" }, 
          new TextFieldViewModel { Label = "Some text field" }, 
          new BoolFieldViewModel { Label = "Some bool field" }, 
          new BoolFieldViewModel { Label = "Some bool field" }, 
          new TextFieldViewModel { Label = "Some text field" }, 
         }); 
     } 

     /// <summary> 
     /// Invoked when this page is about to be displayed in a Frame. 
     /// </summary> 
     /// <param name="e">Event data that describes how this page was reached. The Parameter 
     /// property is typically used to configure the page.</param> 
     protected override void OnNavigatedTo(NavigationEventArgs e) 
     { 
     } 
    } 

    public abstract class FieldViewModel<T> : BindableBase 
    { 
     public string Label { get; set; } 

     #region Value 
     private T _value; 
     public T Value 
     { 
      get { return _value; } 
      set { this.SetProperty(ref _value, value); } 
     } 
     #endregion 
    } 

    public class BoolFieldViewModel : FieldViewModel<bool> { } 
    public class TextFieldViewModel : FieldViewModel<string> { } 

    public class FieldTemplateSelector : DataTemplateSelector 
    { 
     public DataTemplate BoolTemplate { get; set; } 
     public DataTemplate TextTemplate { get; set; } 

     protected override DataTemplate SelectTemplateCore(object item, DependencyObject container) 
     { 
      if (item is BoolFieldViewModel) return BoolTemplate; 
      if (item is TextFieldViewModel) return TextTemplate; 

      return base.SelectTemplateCore(item, container); 
     } 
    } 
}