Installation of Silverlight for Visual Studio 2008 and NET Framework 3.5 along with small example:

Monday, March 9, 2009 |

Installation of Silverlight for Visual Studio 2008 and NET Framework 3.5 along with small example:


Microsoft is promoting Silverlight aggressively. I really impressed by its functionality at first glance so I decided to write on article on that. When I wanted to start using Silverlight, I tried to search the web but I didn’t find sure shot and perfect tutorial or article. You can find few things somewhere and another few things somewhere else. This was just my personal experience.


Mr. Rushik Shah has really done an excellent job for this article. He spent his precious personal time for this article so I would like to thanks Mr. Rushik Shah, my cool minded subordinate and real gentleman.


Step 1: Download and install Visual Studio 2008 SP1 form Microsoft web site. Here is the link for the same. http://www.microsoft.com/downloads/details.aspx?FamilyId=FBEE1648-7106-44A7-9649-6D9F6D58056E&displaylang=en


You will have to hold your horses for a while as it may take approx half an hour, based on your internet speed. It will ask you to restart your computer also after successfully completion of installation.


Step 2: Download and install Silverlight Toolkit from Microsoft website for SDK support. Please follow the below link. http://www.microsoft.com/downloads/details.aspx?FamilyId=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&displaylang=en


Step 3: Once you download & install above utilities, you will need some more controls which you would not find in Toolkit downloaded in Step 2. You can download one binary file along with few examples from CodePlex site with below link.


http://www.codeplex.com/Silverlight


Don’t need to install codeplex’s library, it will be used later in step 7


Step 4: After installing all three utilities given above, you will be ready to create Silverlight enable website from your visual studio 2008. Simply create New Website from your Visual Studio 2008 like any other simple website you create from File->New->Website.


Step 5: Now, you will get one tab “Silverlight” in your tool box of your website. Please double click on the control named “Silverlight” in your control tool box. That will draw one silverlight control on your Default.aspx webform. Its ID will be “Silverlight1” in your source of Default.aspx. You can also observer some binary files will be automatically added to your Bin folder.


Make sure you have script manager in your Default.aspx page under the <Form> tag.


<asp:ScriptManager ID="ScriptManager1" runat="server">


</asp:ScriptManager>


Step 6: Now let your web application as it is and click on menu File->Add->New Project. From here, you have to select “Silverlight Application” as your new application. Let default selection as it is in dialog box and click on “OK”. You will see one project is added to your web application and one page named “SilverlightApplication1TestPage.aspx” and another page named “SilverlightApplication1TestPage.html” will be added to your web application.


Step 7: If you observe Page.XMAL in your application “SilverLightApplication1” which you have added to your web application, you will get your playing area. You can also see tool box and silverlight tools. I am going to introduce you with “Auto Complete Textbox” which is not available in Microsoft toolkit, you have to use CODEPLEX’s tool kit which we have downloaded in Step 3. We have to add the reference of “Microsoft.Windows.Controls.dll” found in “Binaries” folder of CODEPLEX’s kit.


Step 8: Right click on “SilverlightApplication1” and click on “Add Reference”. Once you see dialog box, go to “Browse” tab, select directory when you have downloaded CODEPLEX kit and select “Microsoft.Windows.Controls.dll” from “Binaries” folder than click on “OK” button of dialog box.


Step 9: after adding the reference to the project, we have to add controls to our tool box of “SilverLightApplication1” by right clicking on Toolbox and selecting “Choose Item” option. Once dialog box appear, go to “Silverlight” tab in that dialog box. Now click on “Browse” button and you will have to locate the same “Microsoft.Windows.Controls.dll” file. As soon as you will give the reference, you will see many new controls with selected check box. Click on “OK” button and you will see some new control added to your tool box.


Step 10: Drag “AutoCompleteBox” from tool kit to your “PAGE.XAML” and set its name, heigh and width like:


<controls:AutoCompleteBox x:Name="txtAuto" Height="25" Width="150"></controls:AutoCompleteBox>


Step 11: Now, this is a time to go to “Page.XAML.cs” for some programming stuff. You will see public page() constructor there in .CS page. Please add one string array as source of our “txtAuto” below “InitializeComponent()” like:


public Page()


{


InitializeComponent();


txtAuto.ItemsSource = new string[] { "Ritesh", "Shah", "Rushik", "Chirag", "Abhijit", "Monica", "Rashmika", "Krunal", "Jatin", "Zodiac", "Yatin", "Prakash" };



}


Step 12: Once you will done with this, you are ready to launch your web application with silver light power, but before you do that, you have to add reference of your “SilverLightApplication1” in your Default.aspx page you have in your web application. Remember, we have drawn one tool in default.aspx with name “Silverlight1” you have to add source of your “SilverLightAPplication1” in that. See below script, I added the .XAP project as a source. You can simply copy that source from your web application. You might not have forgotten “SilverlightApplication1TestPage.aspx” which has automatically added to your web application.



<asp:Silverlight ID="Silverlight1" runat="server" Source="~/ClientBin/SilverlightApplication1.xap" Height="100px" Width="100px">


</asp:Silverlight>



Now you are ready to launch your application. Run your web application’s default.aspx page.


Note: As per my personal experience, Silverlight is not working with its full feature in other browsers than IE. I tried it in opera, chrome and firefox along with IE. May be I am mistaken or don’t have all plug in.



Reference: Ritesh Shah

0 comments: