How to Create a Web Application in Silverlight Using F#

Introduction

Today I am discussing that how you can create a simple web application in Silverlight using F#. We are creating a web application in F# but we also need to add a C# silverlight application for this. We need a F# silverlight library template, a C# silverlight application template and a little bit of code. Just follow the steps given below.

Step 1: Firstly open a new project in F# using Visual Studio 2010. Slecct F# silverlight library template and give name to it like below image.

New Project Dialog Box

Step 2: Select Silverlight Version 4 from the add Silverlight Class Library window like below image.

Silverlight Class Library

Step 3: Now Write below code in Module1.fs File.

namespace MyFSharp

type FirstApp() =
static member FilterOutZs (strs:seq<string>) =
seq { for s in strs do
if not(s.StartsWith("Z")) then
yield s }

Step 4: Now right click on Solution in solution Explorer and click on add new Project. Select C# Silverlight application project like below Image.

Add New Project Dialog Box

Step 5: Now uncheck the checkbox in New Silverlight application dialog box and select Silverlight Version 4 and press Ok like below image.

New Silverlight Application

Step 6: When you will add C# Silverlight Application your Solution Explorer will look like below image.

Solution Explorer

Step 7: Now Click on MainPage.xaml and write below code.

<UserControl x:Class="SilverlightApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">
<TextBlock x:Name="TextBl" MouseEnter="TheText_MouseEnter"/>
</Grid>
</UserControl>

Step 8: Now right click on Mainpage.xaml file and select view code your MainPage.xaml.cs file will open.

Step 9: Now write below code in MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightApplication1
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void TheText_MouseEnter(object sender, MouseEventArgs e)
{
this.TextBl.Text =
string.Join(" ", MyFSharp.FirstApp.FilterOutZs(
new[] { "ZZZ", "Silverlight", "ZZZ", "Application", " In F#", "ZZZ" }).ToArray());
}
}
}

Step 10: Now right click on C# silverlight application in Solution Explorer and click on add Reference. Select Project tab and select Your F# project name which will appear under Project tab and press ok like below Image.

Add Reference