Hi All,
Here I'm going to give you a quick tutorial on Silverlight for anyone who would like to start developing a Silverlight Application. There are ample resources for learning Silverlight on the internet and of course you should refer
MSDN for a good learning. So lets start.
What is Silverlight ?
It's a cross-browser, cross-platform .Net framework implementation for developing Rich Interactive Applications (RIA) for web. Not only web, this can be used to develop Desktop applications as well as in Windows Phone Application Development.
- It's a plugin to the browsers.
- Runs on all major browsers.
- User needs to download and install Silverlight Player.
- Allows to create Rich Text Web Applications.
- Gave ability to create rich web apps with VS environment
with good programmability.
- It’s a subset of .Net Framework.
When you are developing Silverlight Applications, you will see that you cannot use the System.Data namespace in your application. Therefore when you need to create you have to use WCF to provide database support for your application.
Lets go through a small Silverlight Application.
Create a new Demo Application check the option to host the Silverlight Application in a new website. This option will create a web project with a Silverlight Application test page.
App.xaml is like a startup guide. It’s got events, when things to start-up. When you create Silverlight Application it will zip the
project into a .xap file.
Don’t just drag and drop the controls, that will just create
a web site not like flow layout. That won’t get adjusted when you resize the
browser. We will discuss later how we can make them more dynamic.
The markups that will be created in your design
window, when you drag and drop a button are the XAML markup. It tells how the
button should be : width, height etc.
You can use the StackPanel to stack the items in your application vertically. You can also change that to stack the items in horizontal direction.
Document outline provides you all the parent child
relationship of the controls. Everything is usercontrol in Silverlight. Inside
that, you’ll have parent and child controls. You can see the relationship in
the Document Outline.
Grid is like a html table. It allows you to create
rows and columns.
<Grid x:Name="LayoutRoot" Background="White"></Grid>
You can use the canvas
controller to provide an absolute layout. Provides an absolute positioning. It
will position the child controls relative to the parent control.
You will see attributes like Canvas.Left="6" Canvas.Top="6" in your XAML code. These are called attached properties.
To create rows and columns in the Grid, you can easily use the Design View.You can click on that border to create row column
definitions. You can move the cross and click to define rows/columns.
You can create a grid like below using the above method.
Following image will give you the idea about Margin, Padding, Border and Content. You can learn more about alignment from this link. Margins and paddings are
just like in CSS. Top-right-bottom-left order is different in XAML. It starts
with Left.
Don’t use hard coded
row/column sizes. You can make them auto.
<Grid x:Name="LayoutRoot"
Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"
/>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
Make use of auto sizing. That will help you a lot.
Once you are not sure about the sizes and if you
want to reset them, you can just right click on the controllers and then Reset
Layout-> All and all the styles will be removed.
If you want to insert
columns/rows you can just add them above or below the columns/rows and the XAML
will be updated accordingly in the designer.
You can add styles like margins by clicking on the control
and updating the Margin property in the property window.
So as this is a demo application this will be fine to add
margins by adding them on each one. But imagine a situation where you want a consistent
style throughout the application with hundreds of controls. It will be a
nightmare to do that. So how can we do it easily?
So first we want to remove margins. You would just select
all controls and set the margin to 0. But that won’t remove the style from the
markup.
But you can remove the markup by resetting the values.
This will remove the markup from your XAML.
In like CSS in web, we can define behaviors for controls in
XAML. We have to create these resources/ set of styles at many different
levels.
So let’s go to Gird and create Grid.Resources Element and
inside that we can add a style with a target type. Inside the style, we can set
the properties where the styles should be added.
So the margins will be added to textblocks within the grid.
So lets apply this style from the UserControl level.
Remove the Grid.Resources and then lets add new element
inside user control named UserControl.Resources
<UserControl.Resources>
<Style TargetType="TextBlock">
<Setter Property="Margin"
Value="10"/>
</Style>
<Style TargetType="TextBox">
<Setter Property="Margin"
Value="10"/>
</Style>
</UserControl.Resources>
So if you want to apply the style to the whole application,
you can do that by applying the style to App.xaml page. So remove the style
from the UserControl.Resources and go to the App.xaml page and add inside the
Application.Resources Tag.
<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="DemoApplication.App"
>
<Application.Resources>
<Style TargetType="TextBlock">
<Setter Property="Margin"
Value="10"/>
</Style>
<Style TargetType="TextBox">
<Setter Property="Margin"
Value="10"/>
</Style>
</Application.Resources>
</Application>
So now we have the style in a global scope.
You can even move these styles into a resource dictionary.
You can put it into a Silverlight class library and you can reference that
throughout the application. That’s great for corporate branding.
There are keyed styles, where you can attach the names into
these and specifically reference to them.
<Style TargetType="TextBlock"
x:Key="TextBlock.Normal">
<Setter Property="Margin"
Value="10"/>
</Style>
Now you can apply the styles by editing the style property
in the control’s window.
Let’s see how would be
the XAML by now.
<TextBlock Name="textBlock1"
Text="First Name" Style="{StaticResource TextBlock.Normal}"
/>
You can also apply styles on another property called
“BasedOn”. So that will add additional styles, based on that style.
However the local Style will always get the priority, so
that the lowest one can override the global styles.
You can use many more controls like, sliders, media players,
text boxes, password boxes etc.
Binding
Bind a checkbox with two child checkboxes so that if only
the main is checked, others will be checked.
Bind text boxe text with a class. Instantiate the class in
XAML markup. Add the class reference.
<UserControl.Resources>
<data:Customer x:Key="myCustomer"
FirstName="Kinath" LastName="Rupasinghe"/>
</UserControl.Resources>
Binding a list of cutomers to a data grid.
Class file.
public class Customer
{
public string FirstName { get;
set; }
public string LastName { get;
set; }
public string FullName
{
get
{
return
this.FirstName + this.LastName;
}
}
}
public class Customers : List<Customer>
{
}
XAML :
<UserControl.Resources>
<data:Customers x:Key="customerCollection">
<data:Customer FirstName="Kinath"
LastName="Rupasinghe"/>
<data:Customer FirstName="Kinath"
LastName="Rupasinghe"/>
<data:Customer FirstName="Kinath"
LastName="Rupasinghe"/>
</data:Customers>
</UserControl.Resources>
<Grid x:Name="LayoutRoot"
Background="White">
<sdk:DataGrid
AutoGenerateColumns="True"
Height="189" HorizontalAlignment="Left" Margin="12,99,0,0"
Name="dataGrid1" VerticalAlignment="Top" Width="376"
ItemsSource="{Binding Source={StaticResource customerCollection}}"
/>
</Grid>
This will produce an application like this.
So this is just a quick tutorial on how we can use Silverlight. Hope this would help.
Thank You.
