/elmish-forms

Elmish Xamarin Forms

Primary LanguageF#

Elmish Xamarin Forms

Usage:

open Elmish
open Elmish.Forms

type Model =
  { Count : int
    Step : int }

type Msg =
    | Increment
    | Decrement
    | Reset
    | SetStep of int

type CounterApp () =
    inherit Xamarin.Forms.Application ()

    let init () = { Count = 0; Step = 1 }

    let update msg model =
        match msg with
        | Increment -> { model with Count = model.Count + model.Step }
        | Decrement -> { model with Count = model.Count - model.Step }
        | Reset -> init ()
        | SetStep n -> { model with Step = n }

    let view _ _ =
        [ "CounterValue" |> Binding.oneWay (fun m -> m.Count)
          "IncrementCommand" |> Binding.cmd (fun _ _ -> Increment)
          "DecrementCommand" |> Binding.cmd (fun _ _ -> Decrement)
          "ResetCommand" |> Binding.cmdIf (fun _ _ -> Reset) (fun _ m -> m <> init ())
          "StepValue" |> Binding.twoWay (fun m -> double m.Step) (fun v m -> v |> int |> SetStep) ]

    let page = Samples.CounterPage ()

    do
        Program.mkSimple init update view
        |> Program.withConsoleTrace
        |> Program.runPage page

        base.MainPage <- page

The page XAML:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Samples.CounterPage">
    <ContentPage.Content>
        <StackLayout Padding="20" VerticalOptions="CenterAndExpand">
            <Label Text="{Binding Path=[CounterValue], StringFormat='{0}'}" HorizontalOptions="Center" />
            <Button Text="Increment" Command="{Binding Path=[IncrementCommand]}" />
            <Button Text="Decrement" Command="{Binding Path=[DecrementCommand]}" />
            <Button Text="Reset" Command="{Binding Path=[ResetCommand]}" />
            <Slider Maximum="10" Minimum="1" Value="{Binding Path=[StepValue]}" />
            <Label Text="{Binding Path=[StepValue], StringFormat='Step size: {0}'}" HorizontalOptions="Center" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

See samples project.

Credit goes to the creators of Elmish.WPF, Fable-Elmish, and Elm.