ARTICLE

A Simple Application in Silverlight Using F#

Posted by Dea Saddler Articles | F# August 22, 2011
This article is a demonstration regarding how you can build Silverlight application using F#.Take a quick review to learn.
Reader Level:
Download Files:
 

Introduction

As I have discussed in my previous article about windows and WPF applications using F#. Now I am taking one step Forward towards Silverlight application using F#. If you have Visual Studio 2010 you can make F# silverlight application with in one step.

If you are using an older version of Visual Studio like 2005 or 2008 than you also need to add one Xaml file, Html file and also a zip file with xap extension which will contain SilverlightFSharp.dll, System.Windows.Control.dll, FSharp.Core.dll and AppManifest.xaml to make Silverlight application in F#.

Here I am using Visual Studio 2010 and taking a simple example of Button clicking Event. When you make a project using F# silverlight application Template in Visual Studio 2010. You will get two files in solution Explorer one is MainPage.fs and Second one is App.fs. You will open MainPage.fs and write your code in this file.

The below code block will use to add Button control in application.

// Now here we are adding Button...
        let firstBtn = new Button(HorizontalAlignment = HorizontalAlignment.Center,
                             VerticalAlignment = VerticalAlignment.Center)
        firstBtn.Content <- "Please Click"                             
        firstBtn.Click.Add(fun _ ->
                      firstBtn.Content <- "I am a Button in SilverLight using f#")
        this.Content <- firstBtn

Note The complete code you can see in step 3.

Getting Started With Silverlight Application using F#

If you do not have F# Silverlight application Template in your Visual Studio 2010 you Can download it from below given link.

http://www.c-sharpcorner.com/Resources/1215/fsharp-silverlight-application-template.aspx

Step 1: Firstly Open a new Project in F# using Visual Studio 2010. Select F# Silverlight Application template and give name to the Project like below image.

New Project Dialog Box

Step 2: Now your solution explorer will contain two files MainPage.fs and App.fs as you can see in below image.

Solution Explorer

Step 3: Then Click on MainPage.fs file and write below code, your MainPage.fs window will look like below image.

Silverlight Example

namespace FSharpSilverlightApp
 
open System
open System.Windows
open System.Windows.Controls
open System.Windows.Media
open System.Windows.Media.Imaging
 
type FirstApp = class
    inherit UserControl
    
    new () as this = {} then
        // Now here we are adding Button...
        let firstBtn = new Button(HorizontalAlignment = HorizontalAlignment.Center,
                             VerticalAlignment = VerticalAlignment.Center)
        firstBtn.Content <- "Please Click"                             
        firstBtn.Click.Add(fun _ ->
                      firstBtn.Content <- "I am a Button in SilverLight using f#")
        this.Content <- firstBtn
        
end
 
type SilverApp = class
    inherit Application
    
    new () as this = {} then
        this.Startup.Add(fun _ ->  this.RootVisual <- new FirstApp())
        //base.Exit.Add( fun _ -> ()) //this.Application_Exit)
        //this.InitializeComponent()
 
end 

Step 4: Now press F5 to Execute the code and your first Silverlight application  is ready.

Output

Silverlight Output1

Silverlight Output2

Silverlight Output3

Summary

In this article I have discussed about how you can make a Silverlight application using F#.

Login to add your contents and source code to this article
post comment
     

Hi, I'm try to create a control graphic to open images and move them. I'm following you guide, but I have a problem: I can't modify variables, because mutable variables can not be captured by the closures. Is there another way to create custom control graphics? My code below (it's not complete) and the problem is inside temp.MouseDown when I try to modify StartCord, MovePic, Sizing and SizePic. open System open System.Drawing open System.Windows.Forms type FirstApp = class inherit UserControl new () as this = {} then let firstBtn = new Button() let rnd = new Random() do firstBtn.Location <- new Point(200, 200) firstBtn.Content <- "Open Image" firstBtn.Click.Add(fun _ -> let dialog = new OpenFileDialog() if dialog.ShowDialog()= DialogResult.OK then let img = let temp = new PictureBox(Top=40, Left=8, Width=128, Height= 128, SizeMode=PictureBoxSizeMode.StretchImage, AllowDrop=true) temp.Location <- Point(rnd.Next(0,600), rnd.Next(0,600)) let mutable StartCord = new Point (0,0) let mutable MovePic = false let mutable Sizing = false let mutable SizePic = false temp.MouseDown |> Event.filter (fun e -> e.Button = MouseButtons.Left) |> Event.add (fun e -> StartCord <- e.Location if Sizing then SizePic <- true else MovePic <- true) temp img.Image <- Image.FromFile(dialog.FileName) this.Controls.Add(img) this.Invalidate() ) this.Controls.Add(firstBtn) end type public MyForm() as form = inherit Form() let formLabel = new Label() let c = new FirstApp() ......

Posted by Vale M Aug 26, 2011
COMMENT USING
PREMIUM SPONSORS
Over-C is a holistic consortium of communications and technology specialists. We build, deploy and market both business as well as consumer products and solutions.
Join a Chapter
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Get Career Advice from Experts