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.

Silverlight 5 : About Silverlight 5, Development Enviorment Setup and Silverlight Application Startup : Part 1

April 30, 2012 by Abhi·Comments Off

Silverlight is a cross platform plugin which works with all the popular browsers.

What is covered in the tutorial:

How to use Visual Studio and Expression Blend to create and edit your applications.
What’s new with XAML and how simple it has made application development with Silverlight.
Silverlight Panels
Silverlight Controls
How to add media and images to a Silverlight page
Animation and Storyboard
Templates
Dependency property and development concepts

Silverlight brings the power of the real desktop apps to browser applications. Now Microsoft is also working on the HTML5 framework keeping the future of web in mind. Silverlight can be considered as Microsoft’s platform for developing and deploying Rich internet Applications.

Silverlight 5 has

– Great Media Support

– Helps building Line of Business applications

– 3D support (through XNA 3D integration)

– GPU accelerated video encoding.

– Open Fonts type support

– Text Improvements

– Binding, debugging and other improvements.

– Animation , Binding, Skinning and more

Silverlight is a native application and it runs on the computer but the default configuration is to run Silverlight as a browser plugin. It helps you write awesome cross browser application that can run either on PCs or MACs. You would be really excited to know that Silverlight is installed on 67% of the Internet connected devices (http://www.Statowl.com/custom_ria_market_penetration.php). You can program in Silverlight using your favourite .NET language like C#, VB or Dynamic languages like python or ruby.

How To Get Your Development Environment Ready

– Install Visual Studio (Professional, Premium and Ultimate). You can get it at http://www.microsoft.com/visualstudio/

– Install Silverlight 5 Tools for Visual Studio 2010. It will configure VS for creating Silverlight 5 projects using Visual studio. It also enables VS o use the latest WCF RIA Services (SP1). You can get it at http://www.microsoft.com/download/en/details.aspx?id=28358

– Install Expression Blend Preview for Silverlight 5. You can get it at http://www.microsoft.com/download/en/details.aspx?id=9503

– Install XA Game Studio 4.0 for game development. http://www.microsoft.com/download/en/details.aspx?id=23714

– Install Microsoft Toolkit (Optional). You can get it at http://silverlight.codeplex.com

Silverlight Application Start up process for an Application

The key players in this case are Application manifest file and the Silverlight plugin. The steps are as follows:

User requests an HTML page from the server.
The Browser downloads the page and detects that there is a Silverlight content in the page. It does this by seeing that there is an <object> tag on the page.
The Browser loads the Silverlight Plugin using the mime type.

Once you have built a Silverlight 5 project you will see the files in the Bin folder something like the below image:

Silverlight App Bin folder

Now when we open StartingUPTestpage.html it looks like something as below:

Silverlight App TestPage

Now You can see the object tag (in the form section à div) that I was taking about. This will cause the Silverlight plugin to load.

Once the Silverlight Plugin is loaded the Browser goes back to the server and asks for the xap file.

Then the browser opens the xap file which is nothing but a zip file. It then reads the AppManifest.xaml file.The AppManifest.xaml file looks something like below:

Appmanifest.xaml

You can see that the Manifest file contains the assemblies to load.

The Silverlight plugin then loads the runtime and then loads these assemblies.

Next it goes the Manifest and reads the information about the startup. As you can see in the Deployment part in the image above the EntrypointAssembly is StartingUP. Then it will find the class StartingUP.app which is mentioned as the EntryPointType. Now this Class is shown in the image below:

App.xaml.cs

As you can see there is App Class in the StartingUP namespace. You can see in the Application_Startup method we have the RootVisual (Startup Page) as MainPage.

Now once this page loads the application is running and will run till either there is an unhandled exception or the user navigates away or the browser is closed.

Media Element in Silverlight and WPF

March 19, 2012 by Abhi·1 Comment

Hey guys. Today i am going to discuss about the MediaElement in Silverlight and see how we can put it in use in Silverlight and WPF applications. We can integrate media into our Silverlight pages and WPF UserControls.

MediaElement Objects

To add media to the Silverlight page just add a MediaElement to your XAML and provide a URI (Uniform Resource Identifier) to the media to play. The code below will show you how to create a MediaElement and set its Source proprty to URI of a video file. You can add the video file to Visual Studio project also and then set its property to Resource and the MediaElement will begin playing when the page loads.

XAML

<StackPanel Width="300" Height="300">
  <MediaElement x:Name="media" Source="xbox.wmv" Width="300" Height="300" />
</StackPanel>

Note – The MediaElement object can play WMV (Windows Media Video), WMA (Windows Media Audio), MP3 Files.
MediaElement Properties
The MediaElement object provides several media-specific properties. The following list describes the commonly used properties.

AutoPlay: Specifies whether the MediaElement should begin playing automatically. The default value is True.
IsMuted: Specifies whether the MediaElement is silenced. A value of True mutes the MediaElement. The default value is False.
Stretch: Specifies how video is stretched to fill the MediaElement object. Possible values are None, Uniform, UniformToFill, and Fill. The default is Fill.
Volume: Specifies the volume of the MediaElement object’s audio as a value from 0 to 1, with 1 being the loudest. The default value is 0.5.

In addition to its media-specific properties, MediaElement also has all the properties of a UIElement, such as Opacity and Clip.

Controlling Media Playback

You can control media playback by using the Play, Pause, and Stop methods of a MediaElement object.

XAML

<Grid>
   <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*" />
         <ColumnDefinition Width="*" />
         <ColumnDefinition Width="*"/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
         <RowDefinition Height="*" />
         <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <MediaElement x:Name="media" Source="xbox.wmv" Width="300" Height="300" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" />
    <!-- Stops media playback.-->
     <Button Click="StopMedia" Grid.Column="0" Grid.Row="1" Content="Stop" />
    <!-- Pauses media playback. -->
     <Button Click="PauseMedia" Grid.Column="1" Grid.Row="1" Content="Pause" />
    <!-- Begins media playback. --> 
    <Button Click="PlayMedia" Grid.Column="2" Grid.Row="1" Content="Play" />
</Grid>

C#

private void StopMedia(object sender, RoutedEventArgs e)
{
     media.Stop();
}
private void PauseMedia(object sender, RoutedEventArgs e)
{
    media.Pause();
}
private void PlayMedia(object sender, RoutedEventArgs e)
{
    media.Play();
}

Visual Basic

Private Sub StopMedia(ByVal sender As Object, ByVal e As RoutedEventArgs)
     media.Stop() End Sub
Private Sub PauseMedia(ByVal sender As Object, ByVal e As RoutedEventArgs)
     media.Pause() End Sub
Private Sub PlayMedia(ByVal sender As Object, ByVal e As RoutedEventArgs)
     media.Play() End Sub

Video Player Sample with Code

The following example illustrates typical features of a video player including playback control, a progress/seek slider, and full screen toggling.

Smooth Streaming

Smooth Streaming is an IIS (Internet Information Services) technology that enables adaptive streaming over HTTP to Silverlight clients. Smooth Streaming breaks video feeds into small fragments which enables it to quickly alter the quality of the video, depending on the current bandwidth of the client. This creates a high-quality viewing experience that scales massively on content distribution networks. For more information on Smooth Streaming, see the IIS Smoothing Streaming site.

For an indepth example of Smooth Streaming, see the Microsoft Silverlight Media Framework CodePlex project.