Fabulous for Xamarin.Forms - Guide

Basic Elements

The basic controls from Xamarin.Forms.Core are available.

Button

Buttons are created using View.Button. The command of a button will normally dispatch a messsage. For example:

View.Button(text = "Deposit", command = (fun () -> dispatch (Add 10.0)))

See also:

Slider

A simple Slider is as follows:

View.Slider(
    minimum = 0.0,
    maximum = 10.0,
    value= double step,
    valueChanged=(fun args -> dispatch (SliderValueChanged (int (args.NewValue + 0.5))))
)

See also:

ActivityIndicator

A simple ActivityIndicator is as follows:

View.ActivityIndicator(isRunning = (count > 0))

See also:

DatePicker

A simple DatePicker is as follows:

View.DatePicker(minimumDate = DateTime.Today,
    maximumDate = DateTime.Today + TimeSpan.FromDays(365.0),
    date = startDate,
    dateSelected=(fun args -> dispatch (StartDateSelected args.NewDate)))

See also:

Editor

An example Editor is as follows:

View.Editor(text = editorText,
    textChanged = (fun args -> dispatch (TextChanged(args.OldTextValue, args.NewTextValue))),
    completed = (fun text -> dispatch (EditorEditCompleted text)))

See also:

BoxView

An example BoxView is as follows:

View.BoxView(Color.CornflowerBlue, cornerRadius=10.)

See also:

Entry

An example Entry is as follows:

View.Entry(
    text = entryText,
    textChanged = (fun args -> dispatch (TextChanged(args.OldTextValue, args.NewTextValue))),
    completed = (fun text -> dispatch (EntryEditCompleted text))
)

An example Entry with password is as follows:

View.Entry(
    text = password,
    isPassword = true,
    textChanged = (fun args -> dispatch (TextChanged(args.OldTextValue, args.NewTextValue))),
    completed = (fun text -> dispatch (EntryEditCompleted text))
)

An example Entry with a placeholder is as follows:

View.Entry(
    placeholder = "Enter text",
    textChanged = (fun args -> dispatch (TextChanged(args.OldTextValue, args.NewTextValue))),
    completed = (fun text -> dispatch (EntryEditCompleted text))
)

See also:

Frame

A frame contains other content. A simple Frame is as follows:

View.Frame(hasShadow = true, backgroundColor = Colors.Fuchsia)

See also:

Image

A simple image drawn from a resource or URL is as follows:

let monkey = "http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"

View.Image(source = monkey)

See also:

Picker

A simple Picker is as follows:

let pickerItems =
    [| ("Aqua", Color.Aqua); ("Black", Color.Black);
       ("Blue", Color.Blue); ("Fucshia", Color.Fuchsia);
       ("Gray", Color.Gray); ("Green", Color.Green);
       ("Lime", Color.Lime); ("Maroon", Color.Maroon);
       ("Navy", Color.Navy); ("Olive", Color.Olive);
       ("Purple", Color.Purple); ("Red", Color.Red);
       ("Silver", Color.Silver); ("Teal", Color.Teal);
       ("White", Color.White); ("Yellow", Color.Yellow ) |]

View.Picker(
    title = "Choose Color:",
    textColor = snd pickerItems.[pickedColorIndex],
    selectedIndex = pickedColorIndex,
    itemsSource = Array.map fst pickerItems,
    selectedIndexChanged = (fun (i, item) -> dispatch (PickerItemChanged i))
)

See also:

A simple SearchBar is as follows:

View.SearchBar(
    placeholder = "Enter search term",
    searchCommand = (fun searchBarText -> dispatch  (ExecuteSearch searchBarText)),
    canExecute=true)

See also: