Style DSL

I had a go at hacking a style DSL. It seems to work. I’m sure you could pick it apart but maybe it’s a start for some ideas. XAML really should die!!

module Control =
    open Avalonia.Styling
    open Avalonia.Controls
    open FSharpx
    let styling stylesList = 
        let styles = Styles()
        for style in stylesList do
            styles.Add style
        Control.styles styles


    let style (selector:Selector->Selector) (setters:IAttr<'a> seq) =
        let s = Style(fun x -> selector x )
        for attr in setters do
            match attr.Property with
            | Some p -> 
                match p.accessor with
                | InstanceProperty x -> failwith "Can't support instance property" 
                | AvaloniaProperty x -> s.Setters.Add(Setter(x,p.value))
            | None -> ()
        s

and then in my view

  let private binFileTemplate (indexedBinFile: IndexedBinFile) (binFileViewer:BinFile->unit) (dispatch: Msg -> unit) =
        let (id, binFile) = indexedBinFile
        let foreground = 
            match binFile.eq_status with
            | DEGREE_EQUAL                                             -> "green" 
            | DEGREE_DIFFERENT                                         -> "red"
            | DEGREE_EXCEPTION_0|DEGREE_EXCEPTION_1|DEGREE_EXCEPTION_2 -> "yellow"
            | DEGREE_SIMILAR|DEGREE_EQUAL_IN_TOLERANCE                 -> "darkgreen"
            | _                                                        -> "brightred"

        (* create row for name, eq_status, deviation *)
        StackPanel.create [
            StackPanel.orientation Orientation.Horizontal
            StackPanel.background "black"
            StackPanel.onDoubleTapped (fun _ -> ViewBinFile(binFileViewer, binFile) |> dispatch )
            let style = [
                TextBlock.width columnWidth
                TextBlock.foreground foreground
                TextBlock.horizontalAlignment HorizontalAlignment.Left
            ]
            StackPanel.children [
                TextBlock.createFromSeq <| seq {
                    yield TextBlock.text binFile.name
                    yield! style
                } 
                TextBlock.createFromSeq <| seq {
                    TextBlock.text (binFile.eq_status |> DU.toString )
                    yield! style
                }
                TextBlock.createFromSeq <| seq {
                    TextBlock.text (binFile.deviation |> sprintf "%g") 
                    yield! style
                }
            ] 
        ]

[JaggerJo]

Yeah, I should do that (and maybe add it to the Wiki - not just because I don’t have a blog 😃). It’s actually not that complicated (or at least I try to keep things simple).

[bradphelan]

Another (maybe) bug with style diffing. If I add duplicate properties to a textblock then I would assume that the last one wins. ie

TextBlock.create [
    TextBlock.width 100.0
    TextBlock.width 200.0
]

However I’ve seen, at least in the context of my datatemplate that it seems to randomly pick between the two. This is important when using yield! to do styling. My code looked like

                TextBlock.create [
                    yield! style
                    TextBlock.text binFile.name
                    ToolTip.tip binFile.name
                    TextBlock.width columnWidth
                ] 

with the defaults in style and overrides in the array.