This talk describes building Silverlight 3 applications using F#. Both Visual Studio 2008 and 2010 RC are demonstrated. This talk was given by Talbott Crowell at the F# User Group meeting on April 4, 2010 at Microsoft, Cambridge, MA.

1. F# and Silverlight Talbott Crowell F# User Group, April 5, 2010http://fsug.org

2. QuickIntro to F# Calculating Moving Average in F# Quick Intro to Silverlight Visualizing F# Using Silverlight Toolkit Agenda

3. Quick Intro to F#

4. Functional language developed by Microsoft Research 2002 language design started by Don Syme 2005 F# 1.0.1 public release (integration w/ VS2003) 2010 F# is “productized” and baked into VS2010 Multi-paradigm Functional/Imperative/OO/Language Oriented Key characteristics Succinct, Type Inference (strongly typed), 1st class functions What is F#

5. Type inferencing Strong typed Functions as values F# Intro b is a float let a = 5 let b = 6.0 let c = “7 feet” let d x = x * x let e = d b d is a function What data type is e?

6. The |> Combinator “Pipe Forward” Example F# Combinators x |> f is the same as f x let sqr x = x * x sqr 5 5 |> sqr

7. Moving Average in F#

8. Start with a list of numbers Moving Average step 1 let testdata = [1.0 .. 10.0] testdata is a list of floats

9. Create windows of the series Moving Average step 2 Seq.windowed 4 testdata it is a sequence of float arrays

10. Average the values in each array Moving Average step 3 Array.average [|1.0; 2.0; 3.0; 4.0|]

11. Use Seq.map to calculate average of all arrays in the sequence Moving Average step 4 let windowedData = Seq.windowed period data Seq.map Array.averagewindowedData the first argument is the function to apply to each item in the sequence the second argument is the sequence

12. Use the pipe forward operator to put it together and omit the let Moving Average step 5 Seq.windowed period data |> Seq.map Array.average

13. Put our algorithm into a function and test it Moving Average function let MovingAverage period data = Seq.windowed period data |> Seq.map Array.average let testdata = [1.0 .. 10.0] let test = MovingAverage 4 testdata

14. Let’s generate some random data open System let GenerateData offset variance count = let rnd = new Random() let randomDouble variance = rnd.NextDouble() * variance let indexes = Seq.ofList [0..(count-1)] let genValuei = let value = float i + offset + randomDouble variance value Seq.map genValue indexes let dataGenerator = GenerateData 50.0 100.0 200

15. Putting it together let data1 = List.ofSeqdataGenerator let data2 = List.ofSeq <| MovingAverage 10 data1

16. Time to visualize…

17. Quick Intro to Silverlight

20. Visual Studio 2008 Using Luke Hoban’s F# Silverlight templates Visual Studio 2010 RC Built-in F# Support for Silverlight in VS http://code.msdn.microsoft.com/fsharpsilverlight

21. Silverlight Toolkit http://silverlight.codeplex.com/ Silverlight SDK Silverlight 3 SDK Silverlight 4 SDK Beta Graphing Controls

22. Visualizing F# using Silverlight Toolkit

23. Use the “Silverlight Application” template in Visual Studio Creates Silverlight Application (produces XAP) Creates Web Application (hosts web site and XAP) Create a Silverlight Application

24. Initial UserControl Notice XML Namespaces (need to add more) XAML

25. Add References

26. Add namespaces to XAML to support Silverlight Toolkit xmlns:controls="clr-namespace: System.Windows.Controls; assembly=System.Windows.Controls" xmlns:controlsToolkit="clr-namespace: System.Windows.Controls; assembly=System.Windows.Controls.Toolkit" xmlns:chartingToolkit="clr-namespace: System.Windows.Controls.DataVisualization.Charting; assembly=System.Windows.Controls.DataVisualization.Toolkit" xmlns:chartingPrimitivesToolkit="clr-namespace: System.Windows.Controls.DataVisualization.Charting.Primitives; assembly=System.Windows.Controls.DataVisualization.Toolkit"

27. Sample Series comes from Static Resource. Define Static Resource in App.xaml Add a chart to MainPage.xaml

28. add namespace add sample dataset Static Resource App.xaml

29. Similar to a Class Library project except it compiles with special options to target the Silverlight CLR Use file links to share F# files between Class Library and Silverlight Library Add Existing File Choose “Add As Link” from dropdown Create an F# Silverlight Library

30. SeriesDataPoint is a class (type) that has two members, Index and Value Used for series data Add Chart Helper type SeriesDataPoint(index, value) = member this.Index with get() = index member this.Value with get() = value

31. Used by XAML Designer to bind at design time Add Sample Data Set type SampleDataSet() = static member SampleSeries1 = let data = new ObjectCollection() data.Add(new SeriesDataPoint(0, 124.1)) data.Add(new SeriesDataPoint(1, 124.3)) data.Add(new SeriesDataPoint(2, 125.7)) data.Add(new SeriesDataPoint(3, 115.4)) data.Add(new SeriesDataPoint(4, 115.9)) data.Add(new SeriesDataPoint(5, 125.0)) data.Add(new SeriesDataPoint(6, 133.6)) data.Add(new SeriesDataPoint(7, 131.9)) data.Add(new SeriesDataPoint(8, 127.3)) data.Add(new SeriesDataPoint(9, 137.3)) data

32. Designer is now binding with F#

33. Code behind for MainPage.xaml Use constructor to wire up events Add code behind for MainPage public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); SilverlightEvents.RegisterHandlers(this.LayoutRoot); } }

34. Event handling code for application in F# SilverlightEvents in F#

35. Sample Button Click Event buttonGenerateSampleData.Click.Add(fun(_) -> let data = GenerateDataPoints 125.0 10.0 10 let series = DataConverter.ConvertDataPointsToLineSeries "Sample Series 3" data chart.Series.Add(series) )

36. Slider Events - Mouse slider.MouseLeftButtonUp.Add(fun(_) -> model.UpdateSeries()) member internal this.UpdateSeries() = m_range <- (intslider.Value) let movingAverage = MovingAveragem_rangem_data let newSeries = this.GetMovingAverageSeriesmovingAverage chart.Series.[1] <- newSeries ()

37. Slider Events – Value Changed slider.ValueChanged.Add(fun(callback) -> model.UpdateMovingAverage(callback)) member this.UpdateMovingAverage(args:RoutedPropertyChangedEventArgs<float>) = let oldVal = intargs.OldValue let newVal = intargs.NewValue if oldVal = newVal then () elif (Math.Abs(oldVal - newVal) > 4) then m_range <- newVal this.UpdateSeries() () else m_range <- newVal ()

38. Generate Data and Moving Average

39. Getting Started http://www.silverlight.net/getstarted/silverlight-4/ Tim Heuer’s Blog http://timheuer.com/blog/archive/2010/03/15/whats-new-in-silverlight-4-rc-mix10.aspx Silverlight 4 and Visual Studio 2010 RC

40. Bart Czernicki’s Silverlight Hack Blog http://www.silverlighthack.com/post/2009/11/04/Silverlight-3-and-FSharp-Support-in-Visual-Studio-2010.aspx Luke Hoban’s WebLog http://blogs.msdn.com/lukeh/archive/2009/06/26/f-in-silverlight.aspx support for F# in VS 2008 http://code.msdn.microsoft.com/fsharpsilverlight F# and Silverlight 2.0 http://jyliao.blogspot.com/2008/11/f-and-silverlight-20.html Other Helpful Links

41. http://fsug.org Thank you. Questions?F# and Silverlight Talbott Crowell ThirdM.com http://talbottc.spaces.live.com Twitter: @talbottand @fsug