FuncUI
GitHub Repository
  • Getting Started
  • View Basics
    • Creating views
    • Lifetime
    • Attributes
    • How to create bindings
  • Components
    • Component basics
    • Component lifetime
    • Hooks
  • Common Questions
  • Controls
    • Button
    • Border
    • Calendar
    • CalendarDatePicker
    • CheckBox
    • DatePicker
    • DockPanel
    • Expander
    • ListBox
    • Menu
    • NativeMenu
    • NumericUpDown
    • ProgressBar
    • RadioButton
    • RepeatButton
    • Slider
    • StackPanel
    • Tabs
    • TextBlock
    • TextBox
    • TimePicker
    • ToggleButton
    • ToggleSwitch
Powered by GitBook
On this page
  1. Controls

DockPanel

Last updated 2 years ago

Note: You can check the Avalonia docs for the and if you need more information.

For Avalonia.FuncUI's DSL properties you can check

The DockPanel is a layout construct that allows docking its children to the different sides of it.

Usage

Basic Usage

DockPanel.create [
  DockPanel.children [
    // Some child control
    [..].dock Dock.Top // you can use Left, Right, Top and Bottom
  ]
]

You can use multiple dockings inside of one panel. It will dock in order of the children list (you can see that in the example).

Example

DockPanel.create [
  DockPanel.children [
    Border.create [
      Border.background "blue"
      Border.dock Dock.Left
      Border.padding 20.
    ]
    Border.create [
      Border.background "green"
      Border.dock Dock.Bottom
      Border.padding 20.
    ]
    Border.create [
      Border.background "red"
      Border.dock Dock.Right
      Border.padding 20.
    ]
    Border.create [
      Border.background "orange"
      Border.dock Dock.Top
      Border.padding 20.
    ]
    Border.create [
      Border.background "purple"
      Border.dock Dock.Left
      Border.padding 20.
    ]
    Border.create [
      Border.background "yellow"
    ]
  ]
]
DockPanel
DockPanel API
DockPanel.fs