用FSharp.ViewModule关闭对话框

时间:2016-12-06 08:41:46

标签: wpf mvvm f# fsharp.viewmodule

在我之前的问题"使用FSharp.ViewModule"启用对话框确定按钮时,我已经到了只有在对话框的验证器启用了对话框的确定​​按钮的位置字段为true,ViewModule的IsValid属性为true。但在那之后我遇到了几个问题:

1)即使我在XAML中设置IsDefault="true",单击“确定”按钮也不会关闭对话框。

2)单击确定按钮时,有时我想进行比ViewModule验证器提供的更多检查(例如,检查电子邮件地址)。然后,如果此自定义验证失败,我想停止关闭对话框。

但是我不知道在使用F#和MVVM时如何做到这两点。首先,我尝试将XAML放入C#项目和F#库中的视图模型代码。然后我在后面的代码中使用了OK按钮的Click处理程序来关闭窗口。这固定1),但不是2)。

所以这是我的XAML:

<TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}"/>
<TextBox Text="{Binding Email, UpdateSourceTrigger=PropertyChanged}" />
<Button Content="OK" IsEnabled="{Binding IsValid}" IsDefault="true" Command="{Binding OkCommand}" 
    <!--Click="OnOK"--> />

我的视图模型 - 在validate函数中添加注释,以显示单击“确定”按钮时我想要执行的操作:

let name = self.Factory.Backing( <@ self.Name @>, "", notNullOrWhitespace)
let email = self.Factory.Backing( <@ self.Email @>, "", notNullOrWhitespace)
let dialogResult = self.Factory.Backing( <@ self.DialogResult @>, false )

let isValidEmail (e:string) = e.Length >= 5

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.DialogResult
    with get() = dialogResult.Value
    and set value = dialogResult.Value <- value

member self.OkCommand = self.Factory.CommandSync(fun () ->
                        if not <| isValidEmail(email.Value) then
                            MessageBox.Show("Invalid Email") |> ignore
                        else
                            dialogResult.Value <- true
                        )

1 个答案:

答案 0 :(得分:4)

值得指出的是,MVVM和代码隐藏不是最好的朋友。

您引用的C#事件处理程序位于Window代码隐藏文件(即部分类)中。虽然代码隐藏被认为对于视图相关逻辑是好的,但MVVM纯粹主义者不赞成。因此,MVVM不是在XAML中指定事件处理程序,而是更喜欢使用Commands

选项A - 在代码隐藏中实现,务实。

请注意,FsXaml不提供事件的直接连接(在XAML中指定处理程序),但您可以在代码隐藏中自己连接事件。

在XAML中命名控件后,您可以在相应的源文件中保留它。

<强> UserDialog.xaml

<Button x:Name="butt" ... >

<强> UserDialog.xaml.fs

namespace Views

open FsXaml

type UserDialogBase = XAML<"UserDialog.xaml">

type UserDialog() as dlg =
    inherit UserDialogBase()

    do dlg.butt.Click.Add( fun _ -> dlg.DialogResult <- System.Nullable(true) )

验证最好在ViewModel中处理,例如使用电子邮件地址的自定义验证:

选项B - 您可以使用DialogCloser跟踪MVVM模式。

首先在解决方案的顶部添加一个新的源文件(解决方案资源管理器)

<强> DialogCloser.fs

namespace Views

open System.Windows

type DialogCloser() =    
    static let dialogResultProperty =
        DependencyProperty.RegisterAttached("DialogResult", 
            typeof<bool>, typeof<DialogCloser>, 
                new PropertyMetadata(DialogCloser.DialogResultChanged))

    static member SetDialogResult (a:DependencyObject) (value:string) = 
        a.SetValue(dialogResultProperty, value)

    static member DialogResultChanged 
        (a:DependencyObject) (e:DependencyPropertyChangedEventArgs) =
        match a with
        | :? Window as window
            -> window.DialogResult <- System.Nullable (e.NewValue :?> bool)
        | _ -> failwith "Not a Window"

假设我们的解决方案被称为WpfApp(在XAML标头中引用),我们可以像这样实现DialogCloser

<强> UserDialog.xaml

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:views="clr-namespace:Views;assembly=WpfApp"
    xmlns:fsxaml="http://github.com/fsprojects/FsXaml"
    views:DialogCloser.DialogResult="{Binding DialogResult}"
    >

        ...

</Window>

现在在UserDialog的ViewModel中,您可以挂钩Command并通过将dialogResult设置为true来关闭对话框。

member __.OkCommand = __.Factory.CommandSync(fun () ->
                         if not <| isValidEmail(email.Value) then
                             System.Windows.MessageBox.Show ("...") |> ignore                       
                         else 
                             // do stuff (e.g. saving data)

                             ...

                             // Terminator
                             dialogResult.Value <- true 
                         )

您还可以跳过if / else子句并使用自定义验证验证电子邮件。

要将其包装起来,您可以使用此辅助函数从MainViewModel调用该对话框:

<强> UserDialog.xaml.fs

namespace Views

open FsXaml

type UserDialog = XAML<"UserDialog.xaml">

module UserDialogHandling =    
    /// Show dialog and return result
    let getResult() = 
        let win = UserDialog()
        match win.ShowDialog() with
        | nullable when nullable.HasValue
            -> nullable.Value
        | _ -> false

请注意,没有&#39;代码隐藏&#39;在这种情况下(UserDialog类型声明中没有代码)。