F# : WPF Hello World

May 22, 2012 by Abhi·Comments Off

Hope you guys had a look at my other F# posts

In this post i am going to talk about how we can create a Hello World program in WPF using F#.

We would need to manually create and include XAML files in WPF projects, they could also be loaded from code at runtime. We would also need to write the code to hook up event handlers. Let’s get started.

Create a new F# application named HelloWorldWPF

Create WPF F# Project

There is no way add a xaml file to a console application so either you would need to create an xml file and start editing it or use any other tool (Like Expression Blend) to create a xaml file and then include it in the project. i have used the 2nd option

F# Add XAML File

You can have a look at the xaml file below:

F# XAML File

Lets add the references required by the WPF application. Add a reference to PresentationCore, PresentationFramework, System.Data, System.Deployment
Open namespace System, System.Windows and System.Windows.Controls. The let keyword is used for simple values.
Create a function that will load my main windows. So lets create a function named loadMyWindow().
Then define a new Uri for loading our MainWindow.xaml. This is the standard .Net specification. We don’t need any line terminatio as F# terminaties lines automatically.
Then we create a window using the resource loaded in the resourceLocator and then we need to cast this to Window using the F# cast operator.
The we find Element which is our clickButton and and we add a function to the Click Event of the Button. In F# we need to also handle all the return vales and hence we have used F# helper function ignore to ignore the values. In F# the last keyword in the function is the return type of the fuction which in our case is a window.
Now we would pass this window to the Application.Run and we ignore the retun value as well. We also then apply the STAThread attribute.

WPF HelloWorld

Now we run the application and this is what we see.

WPF HelloWorld

Any Feedback, comments or questions were most welcome.

F# : Hello World with Windows Forms (Winforms)

May 22, 2012 by Abhi·1 Comment

Hope you guys had a look at my previous F# post

In this post i would be talking about using F# in a Windows Forms application. You should know that there is no designer support for F# so our necessity is to construct Form from code. Standard Mechanishm like Data Binding work well with F# types.

Create a new F# application using Visual Studio named WinFormsHello

F# Project

Go to the references of the application and add a reference to System.Windows.forms and System.Drawing

F# Add Reference

Lets open a namespace System.Windows.Forms. This will have the members of this namespace available for me here without having to reference them again and again.

Open Winforms Namespace in F#

Declare a simple datatype to work with. This particular data types are called as record in F# and when F# recognizes a data type it would use it just like a system data type.
Now we create an array of this record type that we just declared. You would see that semi colons are used as separators here. And if you would have worked in C# this declaration might seem a little different to you, so bear with it. The array starts with opening square bracket and a pipe [| and ends with pipe and a closing Square Bracket |].
Now lets create a new form. Now you should keep in mind that F# wants you (as a convention) to use the new keyword for a type if that type implements iDisposable interface. Else we can leave the new keyword. Also you could see that i have passed a named parameter in Form instantiation. Now what this will do is create an instance of Form for me and then try to assign value to the Text Property of the form.
Now let’s create a new DataGrid and make its source as myEmployees collection. Also lets add the datagrid to the forms controls.
Now let’s pass the form as a parameter to Application.Run command.

WinForms HelloWorld

When we run this application we are able to see our Form with the DataGridView

WinForms HelloWorld

Any Feedback, comments or questions are always welcome.

F# : Hello World Console Application

May 21, 2012 by Abhi·1 Comment

Hey guys,

I am always exited to learn something new and hope you guys feel the same way. Today i am going to share as to how we can write a Hello World console application in F#. Hope you have VS 2010 installed.

Go to File –> New Project

Navigate to Other languages –> F# –> Windows –> F# Application
New F# Project
If you open the references tab you could see a reference to FSharp.Core

FSharp.Core

Now write the following code in program.fs file. You will see that i have added comments along all the lines to explain what each line does.

Code for F# Hello World Console App
Press control F5 and you would see the following screen

Console Screen
Enter some text and press Enter Key and you would see the screen below:

Console Screen

Any comments, feedback or questions are more than welcome.

Expression Blend : Resources, Scope and Resource Dictionary

May 21, 2012 by Abhi·Comments Off

Resources in Expression Blend

We will be using Microsoft Expression Blend 4 for this tutorial.

Resources are integral part of WPF and Silverlight. A resource in nothing but a name and value pair. Say for ex – If I talk to a 2^nd grade student and say my phone’s color is #FF000000, he would not understand what’s that that but when I say my phone’s color is black, he might or might not know what I am talking about.

This is the concept used by Microsoft behind using resources. This enables us to think in terms of names and labels as opposed to talking about the values. Let see this working in Expression Blend.

Create a new project in Expression Blend and name in Resources.

Create a rectangle on to the design surface.

Go to the properties tab and select the color green. Now when you work for any clients or customer designing applications for them they would have specification of color coding standards they want you to follow. Resources follow the same trend so that you can name your resource and use it at multiple places by just referring its name. We will see how that happens a little later.

Click on the PropertyMarker as shown in the Image and select ConvertToNewResource. Every property in Blend has a property marker that means we can convert all the property in blend into a resource.

Just name the property as MyGreen and click ok.

Now as would notice a couple of things have changed. Instead of the ColorPicker now we see Color resources and the also the list of resources available. Also as you can see the MyGreen is highlighted It is the Color that I am using currently.

Now just create a Ellipse and by default you would see that the color selected is the MyGreen color as Blend figures out that MyGreen is the color I am working and probably that’s the color I need.

Now Select the Fill as Gradient Brush

Now go to the Property Marker for the Gradient Brush and Go To local resource and select MyGreen. As you see are using MyGreen as both a SolidColor and a Gradient Color. The Color is the same but we are using it at different places.

Now go to the resources tab at the top and expand that user control and you would see that the MyGreen resource is available in the UserControl Scope.

Now if we change the color here we are able to change the color at all the controls using this resource. So using resource you don’t have to go to each and every control and change the color.

Now go back to selection tool and select the Ellipse. Now go to the Fill property marker of the Ellipse and select ConvertToNewResource.

Name it as BlackToMyGreen.

Now we see a Local Brush resource is available. You should know that a color is just is a 24bit value that probably represents some transparent color in the spectrum but a brush can be a single color or a set color or something else.

Now let’s go back to the Resources tab and expand the UserControl again and change the MyGreen to some other value. Now you would see that not only MyGreen has changed but also the BlackToMyGreen has also changed, so this implies that resources can use other resources as well.

Scope of Resources in Expression Blend

Now let’s talk about Scope of resources. Scope of a resource simply means where are we going to look when we are getting a concept. Let’s talk about a 2^nd grader to whom we say my phone is black. Now he might know what is black, if that’s the case he is going immediately know what color you are talking about. Let’s say he doesn’t know what is black so he’s going ask his parents. Maybe his parents are able to answer it or they then go to their parents and ask what does black mean? This is exactly what scope means. You can define a concept at any level – object level, on a parent, on a document, in an application or a resource dictionary. Now when we say MyGreen then Silverlight or WPF will be able to figure out what is MyGreen.

Let’s see this with the help of an example:

Delete the rectangle and grid in the application we are working on and draw 2 identical Grids as shown below:

Now select the left grid and go to its properties. And select the background as Green.

You can click on the shortcut key and convert a color to resource.

And we will name it Grass and we will define it in the grid instead of the usercontrol.

Now give a background to the other grid and create a new color resource in that grid named as Grass.

Clear the brush on both the grids using the shortcut below:

Create a rectangle in one of the two grids. And using the color resources make the Fill of the rectangle as Grass.

Now using the selection tool drop the rectangle from one grid to another by keeping the alt key pressed.

What you see now is that the rectangle is using the local Resource Grass. Whenever an element is trying to figure out the meaning of the defined resources, it first looks into its own defined resources, then its parent resources and if it still is not able to find it will look further up till the root of the UserControl. And if still it is not able to find it there it will look for it in the application resources. But if a resource is defined at multiple levels then the closest one is adopted by the element. i.e. the resource is defined at a parent level as well as the application level then one the parent returns the meaning of the resource then the element stops looking and uses the same.

Let’s take another rectangle and drop it on the panel and this rectangle also uses the Fill as Grass but is not able to find it. That’s because the Rectangle does not know what Grass is, it asks LayoutRoot but LayoutRoot also does not know what Grass is, then it asks the UserControl which still does not know what grass is. So the unresolved resource gives us a blank fill.

Let’s go ahead and give it a SolidColorBrush and set the alpha value of it to 100 as whenever we get an unresolved resource blend gives it a transparent white brush.

Now convert this to resource and select it to save at the application level.

Let’s go the resources tab and we see that Grass is defined as different color for different levels.

Resource Dictionary in Expression Blend

Let’s again talk about our 2^nd grader who went to his parents to ask what is black, who in turn ask their parent as to what is black. Say their parent also does not know what is black so what they would do is grab one of the reference guides or resource dictionary and look for black color, if that resource dictionary does not have an answer for blue then they will check in other available resource dictionaries. In this case a Resource Dictionary is a single xaml file that contains key value pairs in it.

Let’s have a look at this with the help of an example:

Create a new solution in Blend named ResourceDictionaries and create a rectangle in it.

Convert that into a resource. But we will define it in a new ResourceDictionary.

As Soon as we do that a new xaml is added to the project. The reason for giving description of MyGreen here instead of the application level is the same as printing all the information in the book in the 2^nd grader example. We can very easily transfer this dictionary to a different application.

Let’s just create a couple of more dictionaries. Right click the project and select Add new item and select Resource Dictionary and click ok.

Now we go the rectangle and change the fill color and save it into the resource dictionary 2. Change the color again and save it to the resource dictionary 3.

Now Delete the rectangle and just drag and drop a new one. What you will see is that this rectangle’s fill is yellow i.e. the color from the last resource dictionary. This happens because Blend creates a merged dictionary. So when a resource is found in a resource dictionary the element will look for any other occurrences of the same resource in all the resource dictionaries and will override the previous values with the new one. Below is how the resource dictionaries look like.

We can add or remove reference to a resource dictionary using the interface below.

And when we do the colors will follow a fallback mechanism.

I would like to state here that as of now i.e. Silverlight 4 all the resources are static resource and will take the value at the time instantiation. Where as in WPF we do have Dynamic Resources and at runtime everything will update.

Please find the source sode for the soultions at location below:

http://i.minus.com/1337680217/iM-3YUH7dLJB6ELGpiplpQ/dbuofcNvmgf7Uz.zip

http://i.minus.com/1337680215/Uq65IIajg7rV01b2c715dQ/dbvtJW3hnSasrW.zip

Any comments, feedbacks or question are most welcome.

Abhishek Shukla

Month: May 2012