• 本文
• 編集
• 差分
• RSS

WP TIPS に戻る

ListBox のアイテム描画の完了を確認する方法

サンプルプロジェクト ListBox_Timing.zip

ListBox のアイテム表示の方法は、ListBox.ItemSource に表示するコレクションをバインドするのが一般的な方法で、みなさんも良くお使いなのではないでしょうか。WinForm の頃のように ListBox.Items.Add メソッドでアイテムを追加する事は少なくなりましたね。

しかしアイテム描画は非同期で行われます。
描画が完了したら次のアクションを行う、という事をしたい場合はどうしたらよいでしょうか？
例えば以下のコードは、ListBox.ItemSource にバインドしている Items にアイテムを追加し、完了したら最後のアイテムまでスクロールを行う、というものです。が、このコードではスクロールが出来ません。

なぜなら ScrollIntoView メソッドを実行したときには、まだアイテムの描画が完了していないからです。

private void Update()
{
   this.Items = new ObservableCollection<string>();

   for(int i = 0; i< 100; i++)
   {
       this.Items.Add(i.ToString() + " " + DateTime.Now.ToString());
   }

   this.OnPropertyChanged("Items");
   
   // スクロールするが出来ない - 描画完了前なので
   this.listbox.ScrollIntoView(this.Items[this.Items.Count - 1]);
}

実は ListBox.ItemSouce にバインドしているアイテムの描画が完了したら LayoutUpdated イベントが立ち上がる＆ ItemSource.Count が更新されるので、これをトリガにすれば可能です。

public ObservableCollection<string> Items { get; set; }

// コンストラクター
public MainPage()
{
   InitializeComponent();
   this.DataContext = this;
   
   this.listbox.LayoutUpdated += new EventHandler(listbox_LayoutUpdated);
}

int Count
{
   get
   {
       int count = this.listbox.ItemsSource == null ? 0 : ((ICollection)this.listbox.ItemsSource).Count;
       return count;
   }
}

void listbox_LayoutUpdated(object sender, EventArgs e)
{
   System.Diagnostics.Debug.WriteLine("listbox_LayoutUpdated " + this.Count);

   // 描画完了後のスクロールなのでちゃんとスクロールする。
   if (this.Items != null && this.Count == this.Items.Count)
   {
       this.listbox.ScrollIntoView(this.Items[this.Items.Count - 1]);
   }
}