See a great article by Jeff Blankenburg.

Jeff demonstrates a step by step procedure with xaml code to create a creative navigation bar. You can also download the entire solution file.

Click to see the sample Silverlight navigation bar in action.

Download the code and play around with the shapes and colors to design navigation bar of your own.

“Silverlight is a powerful development platform for creating engaging, interactive user experiences for Web, desktop, and mobile applications when online or offline.” (as defined on Silverlight website http://silverlight.net/)

It’s been a really long time since Microsoft Silverlight has been released. So far, I am loving it and I am sure most of us do . I am a learner myself, and I really find Silverlight easy and interesting software to learn. Anyone who love to create an application or website with animation and cool design then Silverlight is the software you need. I know it is similar to Adobe Flash, however, it is far simpler and easy to use (I maybe wrong, but atleast I found it easy to use). And most importantly, it is a ‘freeware’.

For more info on Silverlight, please visit http://silverlight.net/

Let’s kick-start with our first Silverlight application.

Software requirements:

MS Visual Studio 2008 or 2010 beta
MS Silverlight 3.0

In our first lesson we will create a very simple Silverlight application  with a Textbox, Label, TextBlock and Button controls.

Step 1:

1. Open MS Visual Studio 2008 or 2010 beta

2. Click File | New | Project

3. Under ‘Project types’ on left hand pane, select ‘Silverlight’ then

4. Select ‘Silverlight Application’ | Type any name for your Silverlight application and click Ok

5. It will open a following window:

6. Click Ok

7. It creates the following files for you:

‘App.xaml’ and ‘MainPage.xaml’ are pages containing xaml code, ‘MainPage.xaml’ is your master page.

“.xap file contains an application manifest (AppManifest.xaml) file and all the necessary DLL’s that are required by the application”. For more info, visit

http://pietschsoft.com/post/2008/03/Silverlight-Anatomy-of-an-XAP-file.aspx

Now, let’s create our textblock, textbox, button and label controls in our Silverlight application.

Step 2:

1. Open MainPage.xaml file by double clicking on it.

2. Add a TextBlock control:

In <Grid x:Name=”LayoutRoot” > type the following code:

<TextBlock x:Name=”contentBlock” Width=”300″ Height=”300″ TextAlignment=”Left”>Hello world!</TextBlock>

3. Add a ‘Button Control’:

<Button x:Name=”btnClick” Content=”Click Me” Width=”150″ Height=”125″ Click=”btnClick_Click”/>

When you type ‘Click=”btnClick_Click”‘, it creates a button click event in MainPage.xaml.cs file.

Let’s run our application and see the result.

Press F5 or Click Debug | Click ‘Start Debugging’ to run the application.

4. Open MainPage.xaml.cs file and type the following code to change the text in Texbox on click:

(Where ‘contentBlock’ is the textbox control)

Step 3:

1. Run your application.

2. Click the button and check for result.

Great, now let’s add two more controls to our Silverlight application.

Add TextBox control:

<TextBox x:Name=”txtboxControl” Height=”23″ Margin=”245,136,0,0″ VerticalAlignment=”Top” HorizontalAlignment=”Left” Width=”61″ />

If you are creating your application in Visual Studio 2010 then, you will be able to see the design view of your (xaml code) Silverlight application. However, the design view is not available in Visual Studio 2008. The best alternative/solution available is installing Microsoft Expression Blend. You can download the trial version or purchase the full licensed version of Expression Studio which includes Expression Web, Expression Studio + Sketch Flow, Expression Encoder and Expression Design.

Aligning the controls is a whole lot easier in Microsoft Expression Blend. To open your xaml file in Expression Blend, right click on your xaml file | Click “Open in Expression Blend”

We’ll learn more about Microsoft Expression Blend in future posts.

Well, let’s move on with our application. Let’s add a Label control, type the following code to do so:

<dataInput:Label x:Name=”lblTest” Margin=”319,188,266,0″ VerticalAlignment=”Top” Content=”Test”/>

And in ‘MainPage.xaml.cs’ update the button_click event to:

private void btnClick_Click(object sender, RoutedEventArgs e)

{

contentBlock.Text = “You clicked the button”; // it will change the content of our textblock control

lblTest.Content = “Hello” + ” ” + txtboxControl.Text; //it will change the content of our label control. It concatenates the strings “Hello” and whatever we type in our textBox control.

}

Output:

So, that’s all for our first step towards learning Silverlight. Next, we’ll learn to create a Silverlight application using Silverlight Template and Microsoft Expression Blend.

I look forward to your feedback.

Learn more, visit:

http://silverlight.net/getstarted/

Tim Heuer’s Blog

]]> http://syedmehdi.wordpress.com/2010/02/12/text-box-button-and-label-control-in-silverlight/feed/ 0 syedmehdi SilverlightApp SilverlightAppWindow2 FilesCreatedForSilverlightApp SilverlightAppOutput SilverlightAppFinalOutput OpenXAMLinExpBlend Output