绑定到F#WPF MVVM应用程序中TextBox的TextChanged事件

Question

我想绑定到使用FsXaml和FSharp.ViewModule构建的MVVM F#应用程序中的WPF TextBox。我向此处描述的应用程序添加了一个名为"SetA"的命令，并尝试使用以下XAML绑定到它：

<TextBox Text="{Binding Score.ScoreA, Mode=OneWay}" FontFamily="Lucida Console">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<fsx:EventToCommand Command="{Binding SetA}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>

TextBox是从ScoreA属性正确填充的，但当我在TextBox中键入新值时，不会调用SetA命令。我对F#很满意，但这是我的第一个WPF MVVM应用程序，所以我不确定我做错了什么。当用户更改文本值时，如何触发SetA处理程序？

这是我的ViewModel:

type MainViewModel(controller : Score -> ScoringEvent -> Score) as self = 
inherit EventViewModelBase<ScoringEvent>()
let score = self.Factory.Backing(<@ self.Score @>, Score.zero)
let eventHandler ev =
score.Value <- controller score.Value ev
do
self.EventStream
|> Observable.add eventHandler
member this.IncA = this.Factory.EventValueCommand(IncA)
member this.DecA = this.Factory.EventValueCommandChecked(DecA, (fun _ -> this.Score.ScoreA > 0), [ <@@ this.Score @@> ])
member this.IncB = this.Factory.EventValueCommand(IncB)
member this.DecB = this.Factory.EventValueCommandChecked(DecB, (fun _ -> this.Score.ScoreB > 0), [ <@@ this.Score @@> ])
member this.NewGame = this.Factory.EventValueCommand(New)
member this.SetA = this.Factory.EventValueCommand(SetA)
member __.Score = score.Value 

我只添加了一行定义SetA。

Answer 1

很可能正在调用Command，但结果不是您所期望的。

出于测试目的，请尝试

member this.SetA = 
this.Factory.CommandSync(
fun _ -> System.Windows.MessageBox.Show("TextChanged","RoutedEv") |> ignore)

注意CommandSync而不是EventValueCommand。无论您如何更改比分，都会弹出一个消息框。

你也可以保留EventValueCommand

member this.SetA = this.Factory.EventValueCommand(SetA)

并在updatefun 中执行相同操作

let update score event =
match event with
| IncA -> {score with ScoreA = score.ScoreA + 1}
| DecA -> {score with ScoreA = max (score.ScoreA - 1) 0}
| IncB -> {score with ScoreB = score.ScoreB + 1}
| DecB -> {score with ScoreB = max (score.ScoreB - 1) 0}
| New -> zero 
| SetA -> System.Windows.MessageBox.Show("TextChanged","RoutedEv") |> ignore ; score

回到而不是您所期望的部分，我假设您希望在更改TextBox.Text值时更新记分板中的分数。

正如您所注意到的，使用当前的controller没有(纯粹的)方法将TextBox.Text值带入update的乐趣中。与IncX、DecX或New事件不同，由于SetX行为未修复。

选项：

• 您可以将控制器的签名更改为Score -> ScoringEvent -> string option -> Score，并使用选项值来处理update乐趣中的SetX事件。

• 您可以处理ViewModel中的所有内容。记录的不可变性质迫使使用OneWay Binding。我会让它保持不变，但您可以(去)组合ViewModel中的所有内容。

尝试

ViewModel

type MainViewModel(controller : Score -> ScoringEvent -> Score) as self = 
inherit EventViewModelBase<ScoringEvent>()
let scoreA = self.Factory.Backing(<@ self.ScoreA @>, 0)
let scoreB = self.Factory.Backing(<@ self.ScoreB @>, 0)
let updateVM score = 
scoreA.Value <- score.ScoreA
scoreB.Value <- score.ScoreB
let eventHandler ev = 
updateVM <| controller {ScoreA = scoreA.Value ; ScoreB = scoreB.Value} ev
do
self.EventStream
|> Observable.add eventHandler
member this.IncA = this.Factory.EventValueCommand(IncA)
member this.DecA = this.Factory.EventValueCommandChecked(DecA, (fun _ -> this.ScoreA > 0), [ <@@ this.ScoreA @@> ])
member this.IncB = this.Factory.EventValueCommand(IncB)
member this.DecB = this.Factory.EventValueCommandChecked(DecB, (fun _ -> this.ScoreB > 0), [ <@@ this.ScoreB @@> ])
member this.NewGame = this.Factory.EventValueCommand(New)
member __.ScoreA
with get() = scoreA.Value 
and set v = scoreA.Value <- v
member __.ScoreB
with get() = scoreB.Value 
and set v = scoreB.Value <- v

XAML

<DockPanel LastChildFill="True">
<StackPanel DockPanel.Dock="Bottom" Height="75" Orientation="Horizontal" Background="#FF3A3A3A">
<Button Height="70" Width="70" Margin="2" Command="{Binding NewGame}">
<TextBlock Text="New" FontSize="18"></TextBlock>
</Button>
<TextBox Text="{Binding ScoreA, UpdateSourceTrigger=PropertyChanged}" 
Margin="2" FontSize="18" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
</TextBox>
</StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Background="#FF024D70" Grid.Column="0">
<Grid>
<Viewbox>
<Label Content="{Binding ScoreA}" ContentStringFormat="D2" FontFamily="Lucida Console"></Label>
</Viewbox>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Command="{Binding DecA}"  Height="70" Width="70" VerticalAlignment="Bottom" Opacity="0.5" Margin="20">
<TextBlock Text="-" FontSize="36" Height="60"></TextBlock>
</Button>
<Button Command="{Binding IncA}"  Height="70" Width="70" VerticalAlignment="Bottom" Opacity="0.5" Margin="20">
<TextBlock Text="+" FontSize="36" Height="60"></TextBlock>
</Button>
</StackPanel>
</Grid>
</Border>
<Border Background="#FF7E0E03" Grid.Column="1">
<Grid>
<Viewbox>
<Label Content="{Binding ScoreB}" ContentStringFormat="D2"  FontFamily="Lucida Console"></Label>
</Viewbox>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Command="{Binding DecB}"  Height="70" Width="70" VerticalAlignment="Bottom" Opacity="0.5" Margin="20">
<TextBlock Text="-" FontSize="36" Height="60"></TextBlock>
</Button>
<Button Command="{Binding IncB}"  Height="70" Width="70" VerticalAlignment="Bottom" Opacity="0.5" Margin="20">
<TextBlock Text="+" FontSize="36" Height="60"></TextBlock>
</Button>
</StackPanel>
</Grid>
</Border>
</Grid>
</DockPanel>

票据

• Score.ScoreX更改为ScoreX
• Text="{Binding Score.ScoreA, Mode=OneWay}"改为Text="{Binding ScoreA, UpdateSourceTrigger=PropertyChanged}"
• 删除Interaction.Trigger