How to add new properties to a View that is already created ? - F#

TopAnswers F#

Meta

Databases

TeX

Code Golf

APL

C++

.net

db<>fiddle

Java

*nix

PHP

PowerShell

Python

Rust

टेक्-मराठी

Typst

Web Client Dev

Web Server Dev

How to add new properties to a View that is already created ?

avalonia funcui add tag

FoggyFinder

I created simple but flexible and independent Views for my model types: 

```text/x-fsharp
let summaryView summary = 
    Grid.create [
        Grid.children [
            // define ui for summary
        ]
    ]
```

Some of them has exactly the same view on different pages but should be placed there differently.

For example, I want to specify View's position in the `Grid` or decorate it with common attributes (like alignments, fontStyles, etc) additionally.

```text/x-fsharp
let page1 page dispatch = 
    let summaryV = page.Summary |> summaryView
    Grid.create [
        Grid.rowDefinitions "Auto, Auto, *"
        Grid.children [
            // how to specify position for this element?
            summaryV
        ]
    ]
```

So, how can I add new properties to instance that is already created ? 
To be more specific: how to put `summaryView` in a third row of `Grid` on the `page1`?

Top Answer

FoggyFinder

Answer written for `0.4.3` version.

To achieve it you can write simple helper functions:

```text/x-fsharp
[<RequireQualifiedAccess>]
module View =                                                                         
    open Avalonia.FuncUI.Types

    let withAttr (attr: IAttr<'view>) (view: IView<'view>) = 
        { viewType = view.ViewType
          attrs = attr::view.Attrs }
        :> IView<'view> 

    let withAttrs (attrs: IAttr<'view> list) (view: IView<'view>) = 
        { viewType = view.ViewType
          attrs = view.Attrs |> List.append attrs }
        :> IView<'view>

```

The first one is handy when only one additional attribute is needed.

Usage

```text/x-fsharp
summaryV
|> View.withAttr (Grid.row 2)
```

or

```text/x-fsharp
summaryV
|> View.withAttrs [
    Grid.row 2
]
```

*Note*: There is a chance that similar functions will be included to the next releases of the `Avalonia.FuncUI.DSL` library.

1 Answer