Inside F#

Brian's thoughts on F# and .NET

F# and Silverlight

Posted by Brian on March 30, 2010

I finally took some time to learn enough about Silverlight to try to create a little F# demo to attempt to host in my blog.  It turns out that Windows Live Spaces has a bunch of content restrictions that appear to prevent embedding Silverlight directly, so I hosted it elsewhere instead.  Click here to go have a look at the demo, and then come back here and read the rest of this blog :)

You’ll recognize this as the second client-side demo I mentioned in a recent blog entry.  I only had to make minor changes to get it running in Silverlight.  Though the standard/recommended way to use F# with Silverlight is to create e.g. a C# Silverlight app (and use designer tools or what have you) and then reference an F# Silverlight library, I did a little hacking to make this completely F# – no C#, no XAML, just pure F# code.  The source code is below (I also had to do a little hacking on the project file to get it to compile into .xap with the correct entry point); it is very similar to the WPF app.

namespace Module1

open System.Windows 
open System.Windows.Controls 
open System.Windows.Media 

type MyApp() as this =
    inherit Application()
    let cc = new ContentControl()
    let CYAN = new SolidColorBrush(Colors.Cyan)
    let BLACK = new SolidColorBrush(Colors.Black)
    let canvas = new Canvas(Width=600.0, Height=400.0, Background = CYAN)
    let WIDTH = 20.0
    do
        this.Startup.Add(fun _ ->
            let chars = 
                " F# reacts to events!"
                |> Seq.map (fun c -> 
                    new TextBlock(Width=WIDTH, Height=30.0, FontSize=20.0, Text=string c, 
                                  Foreground=BLACK))
                |> Seq.toArray 
            for tb in chars do                                     
                canvas.Children.Add(tb) |> ignore 

            canvas.MouseMove 
            |> Observable.map (fun ea -> ea.GetPosition(canvas))
            |> Observable.add (fun p -> 
                async {
                    for i in 0..chars.Length-1 do
                        do! Async.Sleep(90)
                        Canvas.SetTop(chars.[i], p.Y)
                        Canvas.SetLeft(chars.[i], p.X + float i*WIDTH)
                } |> Async.StartImmediate
            )
            cc.Content <- canvas
            this.RootVisual <- cc
        )

That’s all for today – I just wanted to take my first steps into the world of Silverlight!

Advertisements

2 Responses to “F# and Silverlight”

  1. Frank said

    Thanks! Could you list the steps required to hack this into a .xap file? And is there ANY chance that there will be support for creating UIs in F#? The message box and the async monad superpowers of F# really shine in that area. And the use of Rx just seems more obvious in F#.

  2. John said

    I did this a while ago with older version of Silverlight (http://jyliao.blogspot.com/2008/11/f-and-silverlight-20.html) and it illustrates what goes into the .xap file. I also managed to get it hosted on an Apache web server. (http://jyliao.blogspot.com/2009/01/hosting-silverlight-applications-on.html)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: