【C#】【MVVM】非同期でObservableCollectionに追加したデータをViewに反映させる方法が知りたい

Question

###前提・実現したいこと
取得したツイートをViewにバインドしたい

###発生している問題
2点あります。

・1点目
ViewModelのコンストラクタ内で初期表示するツイートを取得しています。
Timelineプロパティの値をViewにバインディングさせています。
このプロパティはObservableCollectionなので、Addされたタイミングで変更通知がいっていると思いますが実際には何もバインドされません。

・2点目
コンストラクタの中で実行している Task.Run内の処理がawaitしているにも関わらずにすぐに処理が通り抜けた後に await内の処理が実行されています。なぜこのような動作になってしまうのでしょうか。

##Code (ViewModel)

public class MainPageViewModel : BindableBase
{
    #region プロパティ
    public ObservableCollection<string> TweetList { get; set; }
    public ObservableCollection<long> UserListIds { get; set; }
    public ObservableCollection<Timeline> Timeline { get; set; }
    #endregion

    #region フィールド
    private Tweet _tweet = new Tweet();
    #endregion

    #region コンストラクタ
    public MainPageViewModel()
    {
        Task.Run(async () =>
        {
            await _tweet.GetListIdsAsync("ユーザ名");
            UserListIds = _tweet.UserListIds;
            await _tweet.GetListTimelineAsync(UserListIds.Skip(2).First());
            Timeline = _tweet.Timeline;
        });
    }
    #endregion
}

##Code (View)

<ListView ItemsSource="{Binding Timeline}"
          RowHeight="80">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="10" />
                        <RowDefinition Height="20" />
                        <RowDefinition Height="40" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="50" />
                    </Grid.ColumnDefinitions>

                    <!--トーク相手の画像-->
                    <Image Source="{Binding ProfileImage}"
                           Grid.RowSpan="3"
                           />
                    <!--トーク相手の名前-->
                    <Label Grid.Row="1" Grid.Column="1"
                           Text="{Binding Name}" 
                           FontAttributes="Bold"
                           />
                    <!--最終トーク内容-->
                    <Label Grid.Row="2" Grid.Column="1"
                           Text="{Binding Text}"
                           FontSize="12"
                           />
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

###試したこと
・Twitter APIからデータを取得するメソッドを同期的にして試してみましたが、対応していないのか例外で落ちてしまいます。
・コンストラクタ内でTimelineプロパティに対してAddをしてみると画面に反映されました。

###GitHub
全体のコードを以下のGitHubにアップロードしています。
https://github.com/karimatan1106/XamarinTweetForList

Answer 1

・1点目

Timeline = _tweet.Timeline;

これではTimeline のインスタンスを書き換えてしまっているので変更が通知されません。

Timeline.Add(_tweet.Timeline.Last());

こんな感じでAdd すれば変更が通知されると思います。

・2点目

        Task.Run(async () =>
        {
            await _tweet.GetListIdsAsync("ユーザ名");
            UserListIds = _tweet.UserListIds;
            await _tweet.GetListTimelineAsync(UserListIds.Skip(2).First());
            Timeline = _tweet.Timeline;
        });

Task.Run をawait していないからでは？
Task.Run 内部のデリゲートだけでいいと思います。
ただ、非同期処理をコンストラクタで実行するよりは、何らかのトリガー（ボタンをタップするなど）を持って実行すべきかと思います。

なので、コンパイルはしていないですが以下のようになるのではないでしょうか。

await _tweet.GetListIdsAsync("ユーザ名");
UserListIds.Add(_tweet.UserListIds.Last());
await _tweet.GetListTimelineAsync(UserListIds.Skip(2).First());
Timeline.Add(_tweet.Timeline.Last());

Answer 2

まずUserListIdsやTimelineはその書き方ですと実体が定義されてないでnullになっていると思いますがそれは意図通りでしょうか?
Task.Runの中のTimeline=_tweet.Timelineで_tweet.TimelineがさしているインスタンスがMainPageViewModelのTimelineにもセットされますがこれも意図通りでしょうか?
本来やりたいことはMainPageViewModel内でTimelineとして扱われるObservableCollectionを生成し、そこに取得されたtweetの中身をコピーすることなのではと思いますが、そうであるならばこのコードでは上記のように不適切です。

ほかの方も言われているようにコンストラクタ内でそのようにTask.Runしても処理実行の終了を待機はしません。したい場合はこちらの質問と同様にすればいいと思いますが、本来やるべきでない実装です。
コンストラクタでの非同期メソッドの実行
またTask.Run内でそのままObservableCollectionに対し編集を行った場合、UIスレッド以外からの編集になりますのでViewがバインディングしている場合は落ちます。間にBeginInvokeOnMainThreadを挟む必要があります。

またそのコードではTimelineに別のObservableCollectionを代入していますが、それではView側はそれを検知はしません。INotifyPropertyChangedのメソッドを使ってTimelineが変わったとNotifyする必要があります。ただしおそらくこのコレクションの入れ替えは上に書いたように本来の意図とは違うのではないかと思いますが。

どこでMainPageViewModelをMainPageのBindingContextにセットされているのかわかりませんが、おそらくTask.Runの実行が終わる前にBindingContextにセットされる->TimelineはまだnullなのでBindingされない->Task.Runの実行が終わってTimelineにセットされたがMainPage側はそれを知る由もない、となっているのではとエスパーします。

Answer 3

1点目

ViewにBindしているのはMainPageViewModel のTimelineなのに、取得した情報をAddしているのは_tweetインスタンスの Timelineだからでは？ Timeline = _tweet.Timeline を有効にしたいのであれば、

//MainPageViewModel 
ObservableCollection<Timeline> _timeline;
public ObservableCollection<Timeline> Timeline 
{ 
	get{ return _timeline;} 
	set
	{
		if( _timeline == value )
			return;
		_timeline = value;
		OnPropertyChanged();
	}
}

のようにObservableCollection自体が差し替えられたことを通知してあげる必要があるかと。

2点目

GetListIdsAsync内で何をやっているか追えていないですが、

await Task.Run(async () =>
{
  await task1();
  await task2();
});

じゃないでしょうか? Task.Run内でのawait って私はやらないパターンですが。。

Answer 4

下記記事のように、非同期処理内で配列にアクセスする処理を、Device.BeginInvokeOnMainThreadに渡して実施してみてはいかがでしょうか。

http://running-cs.hatenablog.com/entry/2016/07/26/220732