wpfでの非同期バインディングの方法について

Question

実現したいこと・分からないこと

• wpfで、重い処理の進捗をUI(View)に逐次反映させたいですが、反映できません。
• MVVMでコマンドから起動する処理が発行するメッセージを、処理が終わってから一度に表示するのではなく、都度Viewに反映させたいです。
• 非同期(Task)は使ったことがなかったので、あまり理解できてないかもしれません。
• 逐次反映させる方法が知りたいです。

よろしくお願いいたします。

    ' ViewModel
    Private _MyCommand As ICommand
    Public ReadOnly Property MyCommand As ICommand
        Get
            If Me._MyCommand Is Nothing Then
                Me._MyCommand = New DelegateCommand With {
                    .ExecuteHandler = AddressOf _MyCommandExecute,
                    .CanExecuteHandler = AddressOf _MyCommandCanExecute
                }
            End If
            Return Me._MyCommand
        End Get
    End Property
    Private Sub MyCommandExecute(ByVal para As Object)
        Threading.Thread.Sleep(1000)
        Me.Output = "hoge"    ' 進捗1    
        Threading.Thread.Sleep(1000)
        Me.Output &= "fuga"   ' 進捗2
    End Sub
    Private Function MyCommandCanExecute(ByVal para As Object) As Boolean
        Return True
    End Function

    <!-- View -->
    <Grid>
        <Menu>
            <MenuItem Icon="{Binding Icon}" Command="{Binding MyCommand}" />
        </Menu>
        <TextBlock Text="{Binding Output}" />
    </Grid>

やってみたこと

ViewのIsAsyncプロパティにTrueを指定

    <!-- View -->
    <Grid>
        <Menu>
            <MenuItem Icon="{Binding Icon}" Command="{Binding MyCommand}" />
        </Menu>
        <TextBlock Text="{Binding Output, IsAsync=True}" />
    </Grid>

• バインディングソースにセットするメソッドをわざわざ非同期にしなくとも、ターゲット側を非同期に反映できればいいのかと思ったが、msdnのIsAsyncに関する資料を見たら、どうやら読み書きに時間が掛かる場合に、一旦パスができるという、こちらの期待と違う感じ。

非同期処理（？）にセットさせてみる

    Private Async Sub MyCommandExecute(ByVal para As Object)
        Dim t As Task(Of String) = Task.Run(
            Function()
                Me.Output &= "hoge"
                Return "hoge"
            End Function
        )
        Await t
        Threading.Thread.Sleep(1000)
        Me.Output &= t.Result

        Threading.Thread.Sleep(1000)
        Dim t2 As Task(Of String) = Task.Run(
            Function()
                Me.Output &= "fuga"
                Return "fuga"
            End Function
        )
        Await t2
        Me.Output &= t2.Result
    End Sub

• そもそも、これで非同期処理が書けているのかが疑問。また参考にしたサイトによると、「UIスレッド以外でセットさせると例外が発生する」とのことだが、発生しないのが謎(コマンドからの起動がおかしい？)

一応、別スレッド側で値を返して、本スレッドでセットさせるロジックも書いてみたが、やはりセットされない。
(そもそも本スレッドでセットしたら、非同期にならないんじゃないかとも思う)

追記

考えが逆だったかも・・・
下のように書いたら、逐次反映できてた

    Private Async Sub MyCommandExecute(ByVal para As Object)
        Dim t As Task(Of String) = Task.Run(
            Function()
                Threading.Thread.Sleep(1000)
            End Function
        )
        Await t
        Me.Output &= "hoge"

        Threading.Thread.Sleep(1000)
        Dim t2 As Task(Of String) = Task.Run(
            Function()
                Threading.Thread.Sleep(1000)
            End Function
        )
        Await t2
        Me.Output &= "fuga"
    End Sub

Answer 1

基本的には重い処理をTask.Run()に包むだけです。

「UI以外にセットさせると例外が発生する」

UIスレッド以外からいじれないのはコントロール類です（textBlock.Text=""のような）
バインディングに使用しているプロパティは、スレッドに関係なく変更できます。

<Window
  x:Class="MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:Questions321254"
  Width="800"
  Height="450">
  <Window.DataContext>
    <local:ViewModel />
  </Window.DataContext>
  <DockPanel>
    <Menu DockPanel.Dock="Top">
      <MenuItem Command="{Binding MyCommand}" Header="MyCommand" />
      <MenuItem Command="{Binding MyCommand2}" Header="MyCommand2" />
      <MenuItem Command="{Binding AsyncReactiveCommand}" Header="AsyncReactiveCommand" />
    </Menu>
    <TextBlock Text="{Binding Output}" />
  </DockPanel>
</Window>

Imports System.Threading
Imports Prism.Commands
Imports Prism.Mvvm
Imports Reactive.Bindings

Public Class ViewModel
    Inherits BindableBase

    Private _Output As String
    Public Property Output As String
        Get
            Return _Output
        End Get
        Set(ByVal value As String)
            SetProperty(_Output, value)
        End Set
    End Property

    'MyCommand2で実行可否に使用
    Private _CanExecute As Boolean = True
    Private Property CanExecute As Boolean
        Get
            Return _CanExecute
        End Get
        Set(ByVal value As Boolean)
            SetProperty(_CanExecute, value)
        End Set
    End Property

    Public ReadOnly Property MyCommand As DelegateCommand
    Public ReadOnly Property MyCommand2 As DelegateCommand
    Public ReadOnly Property AsyncReactiveCommand As AsyncReactiveCommand

    Public Sub New()
        MyCommand = New DelegateCommand(AddressOf MyCommandExecute)
        MyCommand2 = New DelegateCommand(Async Sub() Await MyCommand2Execute()).ObservesCanExecute(Function() CanExecute)
        AsyncReactiveCommand = New AsyncReactiveCommand().WithSubscribe(AddressOf AsyncReactiveCommandExecute)
    End Sub

    '何の制御もないので連打できてしまう
    Private Sub MyCommandExecute()
        Task.Run(Sub() HeavyWork()) '投げっぱなしTask
    End Sub

    '処理中は押せないようにCanExecuteプロパティで制御
    Private Async Function MyCommand2Execute() As Task
        CanExecute = False
        Await Task.Run(Sub() HeavyWork())
        CanExecute = True
    End Function

    'AsyncReactiveCommandならおまかせできる
    Private Async Function AsyncReactiveCommandExecute() As Task
        Await Task.Run(Sub() HeavyWork())
    End Function

    Private Sub HeavyWork()
        Output += "はじめるよ" & vbLf
        Thread.Sleep(1000)
        Output += "もうちょっと" & vbLf
        Thread.Sleep(1000)
        Output += "おわったよ" & vbLf
    End Sub
End Class

VBは全然わかっていないので、変な書き方をしていたらすいません。

DelegateCommand実装は↓を使用しました。
NuGet Gallery | Prism.Core 8.0.0.1909

おまかせ例のAsyncReactiveCommandは↓に含まれています。
NuGet Gallery | ReactiveProperty 7.7.0

Comments

[Hayashi_Jelly]

ありがとうございます。おっしゃる通り、処理をTask.Run()内に囲っておいたら、すべて逐次更新されました。
xamlやVBのソースもありがとうございます。