リストボックスはデータをロードするとゆっくりです

Question

次のコードはシンプルですが、それは私に大きなトラブルを与えています。

ボタンを押すと、ObservableCollectionにデータを読み込む必要がありますが、（アプリケーションを読み込むときではなく）押したときの読み込みが遅いです。グリッドと境界線オブジェクトを持つアイテムはわずか50アイテムです。

C＃のコードは次のとおりです。

using GalaSoft.MvvmLight; 
using GalaSoft.MvvmLight.Command; 
using SampleUWA.ClassLibrary; 
using System.Collections; 
using System.Collections.ObjectModel; 
using System.Linq; 

namespace SampleUWA.ViewModel 
{ 
    public class MainViewModel : ViewModelBase 
    { 
     #region Objects 
     /// <summary> 
     /// Master list 
     /// </summary> 
     private ObservableCollection<Master> masterList; 

     /// <summary> 
     /// DetailList 
     /// </summary> 
     private ObservableCollection<Detail> detailList; 
     public ObservableCollection<Detail> DetailList 
     { 
      get 
      { 
       return detailList; 
      } 
      set 
      { 
       Set(ref detailList, value); 
      } 
     } 
     #endregion 

     public MainViewModel() 
     { 
      masterList = new ObservableCollection<Master>(); 
      DetailList = new ObservableCollection<Detail>(); 

      if (IsInDesignMode) 
      { 
       DetailList = new ObservableCollection<Detail>() 
       { 
        new Detail() 
        { 
         Name = "EXAMPLE DETAIL" 
        } 
       }; 
      } 
      else 
      { 
       fill(); 
      } 
     } 

     private void fill() 
     { 
      for (int i = 1; i < 5; i++) 
      { 
       Master newMaster = new Master() 
       { 
        Name = "MASTER " + i.ToString() 
       }; 

       newMaster.Details = new ObservableCollection<Detail>(); 

       for (int x = 0; x < 50; x++) 
       { 
        newMaster.Details.Add(new Detail() 
        { 
         Name = newMaster.Name + " - DETAIL " + x.ToString() 
        }); 
       } 

       masterList.Add(newMaster); 
      } 
     } 

     private RelayCommand<string> _selectMasterCommand; 
     public RelayCommand<string> SelectMasterCommand 
     { 
      get 
      { 
       return _selectMasterCommand 
         ?? (_selectMasterCommand = new RelayCommand<string>(
          (name) => 
          { 
           DetailList = new ObservableCollection<Detail>(masterList.First(m => m.Name == name).Details); 
          })); 
      } 
     } 
    } 
} 

そして、XAMLコードは次のとおりです。

<Page.Resources> 
     <DataTemplate x:Key="DataTemplateData"> 
      <Grid> 
       <Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Right" Height="60" Margin="0" VerticalAlignment="Bottom" Width="60" Background="#FFF70000" CornerRadius="2"> 
        <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center"/> 
       </Border> 
      </Grid> 
     </DataTemplate> 
</Page.Resources> 

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition /> 
    </Grid.RowDefinitions> 
    <Grid Width="400" Grid.Row="1" Height="123" VerticalAlignment="Top"> 
     <StackPanel Orientation="Horizontal"> 
      <Button x:Name="button" Content="MASTER 1" HorizontalAlignment="Left" VerticalAlignment="Stretch" Margin="0,0,0,1.333" Width="74" RenderTransformOrigin="0.5,0.501" FontSize="12" Command="{Binding SelectMasterCommand, Mode=OneWay}" CommandParameter="MASTER 1"/> 
      <Button x:Name="button_Copy" Content="MASTER 2" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="30" d:LayoutOverrides="TopMargin, BottomMargin, TopPosition, BottomPosition" FontSize="12" Command="{Binding SelectMasterCommand, Mode=OneWay}" CommandParameter="MASTER 2"/> 
      <Button x:Name="button_Copy1" Content="MASTER 3" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="30" d:LayoutOverrides="TopMargin, BottomMargin, TopPosition, BottomPosition" FontSize="12" Command="{Binding SelectMasterCommand, Mode=OneWay}" CommandParameter="MASTER 3"/> 
      <Button x:Name="button_Copy2" Content="MASTER 4" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="30" d:LayoutOverrides="TopMargin, BottomMargin, TopPosition, BottomPosition" FontSize="12" Command="{Binding SelectMasterCommand, Mode=OneWay}" CommandParameter="MASTER 4"/> 
     </StackPanel> 
    </Grid> 
    <ListBox x:Name="listBox" Margin="10,123,10,10" Grid.Row="1" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition" ItemTemplate="{StaticResource DataTemplateData}" ItemsSource="{Binding DetailList}" Background="{x:Null}"> 
     <ListBox.ItemsPanel> 
      <ItemsPanelTemplate> 
       <toolkit:WrapPanel/> 
      </ItemsPanelTemplate> 
     </ListBox.ItemsPanel> 
    </ListBox> 
</Grid> 

感謝。

UPDATE：私はUWPプロジェクトとテストでは、リストボックスの代わりにのItemsControlを使用している場合、私はより良い

https://github.com/SPKDevelopers/Sample

Answer 1

Isn'itにプロジェクトをアップロードマイクロソフトLumia 640とのでしょうか？

<ItemsControl x:Name="listBox" 
       Margin="10,123,10,10" Grid.Row="1"   
       ItemTemplate="{StaticResource DataTemplateData}" 
       ItemsSource="{Binding DetailList}" > 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <toolkit:WrapPanel/> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
    </ItemsControl>