Skip to content

Latest commit

 

History

History
138 lines (127 loc) · 4.52 KB

README.md

File metadata and controls

138 lines (127 loc) · 4.52 KB

Demo project for Avalonia.FuncUI minWidth/minHeight of cells in Grid

Problems

  • Setting minWidth and/or minHeight on the "cells" directely of a Grid doesn't work in Avalonia, at least not currently (see: AvaloniaUI/Avalonia#7637). image

  • You can't specify minHeight and minHeight when specifying rowDefinition/columnDefinition in string form, instead you have to use ColumnDefinitions and RowDefinitions objects instead.

  • Using the ColumnDefinitions, RowDefinitions, ColumnDefinition, RowDefinition objects in FuncUI results in verbose code that doesn't fit so nicely with the FuncUI DSL

    //Column definitions
let col1 = ColumnDefinition()
let col2 = ColumnDefinition()
let col3 = ColumnDefinition()
col1.Width <- GridLength(1.0, GridUnitType.Star)
col1.MinWidth <- 64.0
col2.Width <- GridLength(4.0, GridUnitType.Pixel)
col2.MinWidth <- 4.0
col3.Width <- GridLength(3.0, GridUnitType.Star)
col3.MinWidth <- 64.0
let colDefs = ColumnDefinitions()
colDefs.Add(col1)
colDefs.Add(col2)
colDefs.Add(col3)
//Row definitions
let row1 = RowDefinition()
let row2 = RowDefinition()
let row3 = RowDefinition()
row1.Height <- GridLength(1.0, GridUnitType.Star)
row1.MinHeight <- 64.0
row2.Height <- GridLength(4.0, GridUnitType.Pixel)
row2.MinHeight <- 4.0
row3.Height <- GridLength(1.5, GridUnitType.Star)
row3.MinHeight <- 64.0
let rowDefs = RowDefinitions()
rowDefs.Add(row1)
rowDefs.Add(row2)
rowDefs.Add(row3)
Grid.create [
    Grid.columnDefinitions colDefs
    Grid.rowDefinitions rowDefs
    Grid.children [
            ...

Proposal

Extend the FuncUI DSL with support for ColumnDefinitions and RowDefinitions, this repository offers one possible implementation of such DSL extensions.

Code using DSL with Grid.columnDefinition.create and Grid.rowDefinitons.create:

Grid.create [
    Grid.columnDefinitions [
        ColumnDefinition.create(GridLength(1.0, GridUnitType.Star), minWidth = 64.)
        ColumnDefinition.create(GridLength(4.0, GridUnitType.Pixel), minWidth = 4.)
        ColumnDefinition.create(GridLength(3.0, GridUnitType.Star), minWidth = 64.)
    ]
    Grid.rowDefinitions [
        ColumnDefinition.create(GridLength(1.0, GridUnitType.Star), minHeight = 64.)
        ColumnDefinition.create(GridLength(4.0, GridUnitType.Pixel), minHeight = 4.)
        ColumnDefinition.create(GridLength(1.5, GridUnitType.Star), minHeight = 64.)
    ]
    Grid.children [
        ...

Code using DSL with shorthand forms for the different types of rows/columns:

Grid.create [
    Grid.columnDefinitions [
        ColumnDefinition.createStar(1.0, minWidth=64.0)
        ColumnDefinition.createPixel(4.0, minWidth=4.0)
        ColumnDefinition.createStar(3.0, minWidth=64.0)
    ]
    Grid.rowDefinitions [
        RowDefinition.createStar(1.0, minHeight=64.0)
        RowDefinition.createPixel(4.0, minHeight=4.0)
        RowDefinition.createStar(1.5, minHeight=64.0)
    ]
    Grid.children [
        ...

Another example of string syntax vs proposed DSL.

String syntax:

Grid.columnDefinitions "200,2*,*"
Grid.rowDefinitions "400,Auto"

DSL:

Grid.columnDefinitions [
    ColumnDefinition.create(GridLength(200., GridUnitType.Pixel))
    ColumnDefinition.create(GridLength(2., GridUnitType.Star))
    ColumnDefinition.create(GridLength(1., GridUnitType.Star))
]
Grid.rowDefinitions [
    ColumnDefinition.create(GridLength(400., GridUnitType.Pixel))
    ColumnDefinition.create(GridLength(0., GridUnitType.Auto))
]

Shorthand DSL:

Grid.create [
    Grid.columnDefinitions [
        ColumnDefinition.createPixel(200.)
        ColumnDefinition.createStar(2.)
        ColumnDefinition.createStar() //same as .createStar(1.0) or .create()
    ]
    Grid.rowDefinitions [
        RowDefinition.createPixel(400.)
        RowDefinition.createAuto()
    ]

Questions

  • Is the .create(GridLength()) form needed? Shorthand DSL provides same functionality and at least to me much easier to read and write.
  • An alternative and/or addition could be a .create(gridlength: CellSize) where CellSize could be: 
    type CellSize =
| Auto
| Pixel of float
| Star of float
    or 
    type CellSize =
| Auto
| Pixel of float
| Proportional of float
    RowDefinition.create(CellSize.Auto)
RowDefinition.create(CellSize.Pixel 200.)
RowDefinition.create(CellSize.Star 1.5)