Step Bi Step

Actually this is  my first Silverlight application development, I didn’t get any chance to work with Silverlight in a real time project, so I just wanted to try an application with Silverlight in Visual Studio 2010. It is pretty simple like windows application. 🙂

This is my environment: Visual Studio 2010, Silverlight 4 developer edition and Windows 7.

When I tried to create an application, I have got few version conflict problems and I resolved them. You can see in my previous post if you need. Okay.. we will see the steps.

Step 1: Open the Visual Studio and click New Project

Step 2: Choose the programming language and select Silverlight node in the left pane.

Step 3:  Select the Silverlight application on the middle pane and enter the application name on the Textbox then click ok. 

Step 4: You will be getting the following screen.

Please Note: If you want to enable the WCF RIA Services to access the external data using this application then click the check box. I don’t want to do any, so I just click ok.

Step 5: Here is our solution explorer. If you want to learn about the files and other stuffs just click here and learn more.

Step 6: Just click on the Toolbox on the left side vertical tab (If not shown just click View –> Toolbox OR Ctrl+W, X) and drag and drop the button.

Step 7: Modify the button properties (You can either modify in the property tab on the right side (as usual we do) OR you can modify in the XAML pane).

I have given the button Name=”buttonClick”, Content=”Click”, Height=”50″ and Width=”100″

Step 8: Like button add TextBox and a Label as well. So our design will be displaying like this.

and the XAML:

<Grid x:Name="LayoutRoot" Background="White">
 <Button Content="Click" Height="50" HorizontalAlignment="Left" Margin="152,133,0,0" Name="buttonClick" VerticalAlignment="Top" Width="100" />
 <TextBox Height="25" HorizontalAlignment="Left" Margin="85,70,0,0" Name="textBoxEnter" VerticalAlignment="Top" Width="230" />
 <TextBlock Height="25" HorizontalAlignment="Left" Margin="85,101,0,0" Name="textBlockDisplay" Text="" VerticalAlignment="Top" Width="230" />
</Grid>

Step 9: Double click on the Button to create the click event (You can do this on the right side event tab also) and then write the c# code to getting the string form TextBox and displaying on the Label.

private void buttonClick_Click(object sender, RoutedEventArgs e)
 {
 textBlockDisplay.Text = "Hello " + textBoxEnter.Text;
 buttonClick.Content = "Clicked";
 }

Step 10: That’s all guys, just click the run button (F5) to see our 1st Silverlight application. 🙂

Happy Silverlighing..! We will see the database access later! 🙂

Thanks R./