Common Questions
There are 2 recommended ways of obtaining the reference of an underlaying control.
Use the Control.init attribute to run code on control creation.
ListBox.create [
ListBox.init (fun listBox ->
listBox.Items <- [ 1 .. 3 ]
)
]
Calls the
listBox.Set
function when the control is created.Component(fun ctx ->
let listBox = ctx.useState<ListBox>(null)
ctx.useEffect (
handler = (fun _ ->
listBox.Current.Items <- [ 1 .. 3 ]
),
triggers = [ EffectTrigger.AfterInit ]
)
View.createWithOutlet listBox.Set ListBox.create [ ]
)
The Component reference can be accessed via
ctx.control
.Component(fun ctx ->
ctx.useEffect (
handler = (fun _ ->
ctx.control.Tag <- 0
),
triggers = [ EffectTrigger.AfterInit ]
)
Button.create []
)
Component(fun ctx ->
ctx.attrs [
Component.background "transparent"
Component.borderThickness 1
]
Button.create []
)
This is possible by intercepting the TextInputEvent and modifying its event args. It's important to attache the handler to the tunnelled event. More details about event routing can be found here.
In the example below whatever a user types in a TextBox will end up as uppercase text.
TextBox.create [
TextBox.init (fun control ->
control.AddHandler(
TextBox.TextInputEvent,
(fun sender args ->
args.Text <- args.Text.ToUpper()
),
RoutingStrategies.Tunnel
)
)
]
Here another example that prevents users from entering anything but numbers.
TextBox.create [
TextBox.init (fun control ->
control.AddHandler(
TextBox.TextInputEvent,
(fun sender args -> args.Text <- String.filter Char.IsNumber args.Text),
RoutingStrategies.Tunnel
)
)
]
let renderToFile (target : Control, path : string) =
let pixelSize = PixelSize(int target.Bounds.Width, int target.Bounds.Height)
let size = Size(target.Bounds.Width, target.Bounds.Height)
use bitmap = new RenderTargetBitmap(pixelSize, new Vector(96.0, 96.0))
target.Measure(size)
target.Arrange(Rect(size))
bitmap.Render(target)
bitmap.Save(path)
Last modified 6mo ago