使用WPF和MVVM编辑F#记录

Question

在我之前的问题中,我询问如何使用WPF和MVVM创建一个可关闭的对话框,用于在F#中添加新的Person记录.现在我的下一步是创建另一个对话框来编辑这些记录.但我还没有弄清楚如何将现有记录传递给ViewModel并使用它来填充对话框的字段.我得到异常,因为F#记录是不可变的,而ViewModel似乎期望一个可变对象.

我将向您展示我现有的Add对话框的代码 - 假设Edit对话框看起来一样.

这是Person记录:

type Person = { Name: string; Email: string }

这是Add对话框的XAML:

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:fsxaml="http://github.com/fsprojects/FsXaml"
    xmlns:local="clr-namespace:ViewModels;assembly=Test3"
    local:DialogCloser.DialogResult="{Binding DialogResult}"
    Title="Add Person" Height="150" Width="210" ResizeMode="NoResize" >
    <Window.DataContext>
        <local:PersonAddVM />
    </Window.DataContext>
    <StackPanel>
        <Grid FocusManager.FocusedElement="{Binding ElementName=_name}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50" />
                <ColumnDefinition Width="140" />
            </Grid.ColumnDefinitions>
            <Label Content="_Name" Target="_name" Grid.Row="0" Grid.Column="0" Margin="2" />
            <TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" x:Name="_name" 
                     Grid.Row="0" Grid.Column="1" Margin="4" />
            <Label Content="_Email" Target="_email" Grid.Row="2" Grid.Column="0" Margin="2" HorizontalAlignment="Left" />
            <TextBox Text="{Binding Email, UpdateSourceTrigger=PropertyChanged}" x:Name="_email" 
                     Grid.Row="1" Grid.Column="1" Margin="4" />
        </Grid>
        <UniformGrid Rows="1" Columns="2" VerticalAlignment="Center" Margin="2,20,2,2" >
            <Button Content="OK" IsDefault="True" IsEnabled="{Binding IsValid}" Command="{Binding OkCmd}"
                    HorizontalAlignment="Right" Margin="6,0" Width="50" />
            <Button Content="Cancel" IsCancel="True" HorizontalAlignment="Left" Margin="6,0" Width="50" />
        </UniformGrid>
    </StackPanel>
</Window>

这是它的(简化)ViewModel:

type PersonAddVM() as self =
    inherit DialogVMBase()  // ViewModelBase with a DialogResult property

    let name = self.Factory.Backing( <@ self.Name @>, "", hasLengthAtLeast 4 )
    let email = self.Factory.Backing( <@ self.Email @>, "", hasLengthAtLeast 5 )

    let makePerson () = { Name = name.Value; Email = email.Value }

    member self.Name with get() = name.Value and set value = name.Value <- value
    member self.Email with get() = email.Value and set value = email.Value <- value

    member self.OkCmd = self.Factory.CommandSync( fun () ->
                            PersonCache.Add (makePerson())  // PersonCache is based on an Observable Dictionary
                            self.DialogResult <- true )

然后从列出所有人员的PersonList对话框中打开"添加"对话框,并具有此ViewModel代码:

    type PersonListView = XAML<"PersonListView.xaml">
    type PersonAddView = XAML<"PersonAddView.xaml">

    module PersonViewHandling =
        let OpenList() = DialogHelper.OpenDialog (PersonListView())
        let OpenAdd() = DialogHelper.OpenDialog (PersonAddView())  // Calls ShowDialog on the view and handles the result

    type PersonListVM() as self =
        inherit DialogVMBase()  

        // I want to use the next 3 lines to access the Person selected in the list, 
        // to pass it to the Edit dialog
        let emptyPerson = { Name = ""; Email = "" }
        let selectedPerson = self.Factory.Backing( <@ self.SelectedPerson @>, emptyPerson )    
        member self.SelectedPerson with get() = selectedPerson.Value and set value = selectedPerson.Value <- value

        member self.AddCmd = self.Factory.CommandSync (fun _ -> PersonViewHandling.OpenAdd() |> ignore)

那么我如何使用这种方法(或类似方法)打开一个相同的编辑对话框并使用SelectedPerson填充其字段？

Answer 1

您当前的方法是合理的,但我建议一个更改.

我不会在对话框中使用View构建VM,而是手动构建它.这将允许您将选定的人员传递给VM,然后可以对其进行编辑:

type PersonAddVM (initial: Person) as self =
    // Then "fill in" based off the selection here...
    let name = self.Factory.Backing( <@ self.Name @>, initial.Name, hasLengthAtLeast 4 )
    // ...

    // Add an easy way to fetch the person:
    member this.EditedPerson with get () = makePerson ()

然后,您可以从XAML中删除VM,并从主VM构建并获取它:

  member self.AddCmd = 
      self.Factory.CommandSync 
         (fun _ -> 
              // Build this out manually:
              let dlg = PersonAddView()
              dlg.DataContext <- PersonAddVM(self.SelectedPerson)
              if  dlg.ShowDialog () = true then
                  let newPerson = dlg.Person
                  // Do something with newPerson here
         )

这也消除了存在缓存的需要,允许您直接推送选择,并获取编辑(并使用它).

如果你想保持对话"服务",你也可以轻松地将它包装成一个像你一样的方法,但是Person option从对话框返回,即:

module PersonViewHandling =
    let OpenAdd initial = 
        let vm = PersonAddVM(initial)
        let win = PersonAddView(DataContext = vm)
        if DialogHelper.OpenDialog (win) then
             Some win.Person
        else 
             None

然后,您可以将结果作为Person option处理对话框结果而不是处理对话框结果.