Fsharp.wpf 0.1.2

fsharp.wpf

介绍

优雅的F#和WPF

fork 自 https://gitcode.net/withstand/fsharp.wpf

本项目无须编写任何xaml文件。

本项目定义了基本的 ViewModelBase 和定义命令的函数。

本项目定义了基本的控件简化定义写法。

计划

• 事件转命令模式。

• 样式和模板

新手入门

定义viewmodel

• 定义一个model 定义一个记录，表示数据的模型。

type Data =
    {
        A:string
        B:string
        C:string
    }

• 定义一个viewmodel

这是一个很简单的viewmodel定义：

type DatagridVm () =
    inherit ViewModelBase()  // 继承 ViewModelBase
    let mutable txt = "haha:" // 定一个私有的字段
    let data = ObservableCollection<Data>()  // 定义一个 ObservableCollection 以便自动通知
    // 初始化 data
    do
        data.Add({A="1";B="2";C="3"})
        data.Add({A="4";B="5";C="6"})
        data.Add({A="7";B="8";C="9"})
        data.Add({A="1";B="2";C="3"})
        
    // 定义一个用于和 view 绑定的属性
    member this.DataTmp
        with get() = data
    
    // 定义一个带通知的属性
    member this.SelText
        with get() = txt
        and set v =
            txt <- v
            this.OnPropertyChanged(<@ this.SelText @>) // 属性通知，这里的参数为一个代码引用
    
    // 定义一个命令，调用 createCommand 函数
    member this.AddDataCommand  =
        createCommand (fun _ -> data.Add({A="4";B="f";C="a"})) (fun _ -> true)

定义 view

// 定义一个函数，参数为 viewmodel 对象
let datatest (datasource: DatagridVm) =
    // 定义一个DataGrid
    let datagrid =
        DataGrid(
            AutoGenerateColumns = false,
            SelectionMode = DataGridSelectionMode.Extended,
            SelectionUnit = DataGridSelectionUnit.FullRow,
            IsReadOnly = true, // 防止点击频繁崩溃
            // 绑定数据
            Bind = (DataGrid.ItemsSourceProperty, datasource, nameof datasource.DataTmp, BindingMode.Default)
        )
    datagrid.SelectionChanged.Add(fun _ -> printfn("add")) // 定义一个事件
    // 定义三个列
    datagrid.Columns.Add(
        DataGridTextColumn(
            Header = "第一个",
            Width = DataGridLength(50, DataGridLengthUnitType.Star),
            Binding = Binding("A")
        )
    )
    datagrid.Columns.Add(
        DataGridTextColumn(
            Header = "第一个",
            Width = DataGridLength(50, DataGridLengthUnitType.Star),
            Binding = Binding("B")
        )
    )
    datagrid.Columns.Add(
        DataGridTextColumn(
            Header = "第一个",
            Width = DataGridLength(50, DataGridLengthUnitType.Star),
            Binding = Binding("C")
        )
    )
    // 定义一个 TextBlock，和 SelText 绑定
    let tb = TextBlock(
        TextAlignment = TextAlignment.Center,
        HorizontalAlignment = HorizontalAlignment.Center,
        VerticalAlignment = VerticalAlignment.Center,
        Bind = (TextBlock.TextProperty, datasource, nameof datasource.SelText, BindingMode.Default)
    )
    // 定义一个按钮和 AddDataCommand 命令绑定
    let button1 =
        Button(
            Content = "增加",
            Command = datasource.AddDataCommand
        )
    // 定义一个网格布局
    Grid()
        |> Grid.rows [1.0; 0.0; 0.0]
        |> Grid.columns [1.0; 1.0]
        |> Grid.place 0 0 1 2 datagrid
        |> Grid.place 1 0 1 2 tb
        |> Grid.place 2 0 1 2 button1

定义启动函数

    [<STAThread>]
    [<EntryPoint>]
    let main _ =
        let DatagridVm = DatagridVm()
        let app = Application()
        let window = Window()
        let user = UserControl()
        user.Content <- datatest DatagridVm
        window.Content <- user
        window.MinHeight <- 200
        window.MinWidth <- 300
        app.Run(window) |> ignore
        0

编译后，就可以看到页面了。 具体的代码可以看 示例代码。