Using DataPager Control of silverlight, we can easily create the paging functionality in datagrid of silverlight.We can do this task like this

Step1: Create in one class in Solution Exp of Web i.e Emp.cs like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace GridPaging.Web
{
public class Emp
{
public int Id { get; set; }
public string EmpName { get; set; }
public string EmpSal { get; set; }
}
}

Step2:Create one silverlight enabled WCF and write the code like this

using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;

namespace GridPaging.Web
{
[ServiceContract(Namespace = “”)]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1
{
SqlConnection con = new SqlConnection(“Data Source=.\\SQLEXPRESS;Initial Catalog=Test;Integrated Security=True”);

[OperationContract]
public List GetAllEmpName()
{
List Emps = new List();
con.Open();
using (SqlCommand cmd = new SqlCommand(“Select Id,EmpName,EmpSal from tblEmp”, con))
{
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
Emp emp1 = new Emp();
emp1.Id = Convert.ToInt32(dr[“Id”]);
emp1.EmpSal = dr[“EmpSal”].ToString();
emp1.EmpName = dr[“EmpName”].ToString();
Emps.Add(emp1);
}
con.Close();
return Emps;
}
}
}
}

Step3: Now compile and consume the WCF Service in Silverlight Application
Step4: Take one DataGrid and DataPager control from toolbar
Step5: Configure the XAML code like this

<StackPanel Margin="20,10,0,0">
<sdk:DataGrid AutoGenerateColumns="False" Height="220" HorizontalAlignment="Left" IsReadOnly="True" Name="dataGrid1" VerticalAlignment="Top" Width="219">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Binding="{Binding Id}" Header="EmpId"/>
<sdk:DataGridTextColumn Binding="{Binding EmpName}" Header="EmpName"/>
<sdk:DataGridTextColumn Binding="{Binding EmpSal}" Header="EmpSal"/>

</sdk:DataGrid.Columns>
</sdk:DataGrid>
<sdk:DataPager Height="26" HorizontalAlignment="Left" Source="{Binding Path=ItemsSource,ElementName=dataGrid1}" PageSize="8" Grid.Row="1" Grid.Column="0" Name="DataGridPager" Width="219" />
</StackPanel>

Step6:Write the code behind page for paging functionality like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Data;

namespace GridPaging
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
fillGrid();
}
protected void fillGrid()
{
ServiceReference1.Service1Client client = new ServiceReference1.Service1Client();
client.GetAllEmpNameCompleted += new EventHandler(client_GetAllEmpNameCompleted);
client.GetAllEmpNameAsync();
}

void client_GetAllEmpNameCompleted(object sender, ServiceReference1.GetAllEmpNameCompletedEventArgs e)
{
if (e.Result.Count > 0)
{
dataGrid1.ItemsSource = e.Result;
PagedCollectionView tempListView = new PagedCollectionView(e.Result);
dataGrid1.ItemsSource = tempListView;

}
}
}
}

Note:Donot forget to write “System.Windows.Data” Namespace.

Step7:Now compile the code, you will get the expected output.

For using tab control in silverlight, we have to drag and drop into panel and configure the control like this

<Grid x:Name="LayoutRoot" Background="White">
<sdk:TabControl Height="300" HorizontalAlignment="Left" Margin="10,10,0,0" Name="tabControl1" VerticalAlignment="Top" Width="500">
<sdk:TabItem Header="Asp.net">
<StackPanel Background="BlueViolet">

<TextBlock Text="This is the asp.net tab"/>

</StackPanel>
</sdk:TabItem>

<sdk:TabItem Header="Silverlight">
<StackPanel Background="Brown">

<TextBlock Text="This is the Silverlight"/>

</StackPanel>
</sdk:TabItem>
<sdk:TabItem Header="Asp.net MVC">
<StackPanel Background="Coral">

<TextBlock Text="This is the Asp.net MVC"/>

</StackPanel>
</sdk:TabItem>

</sdk:TabControl>
</Grid>

Hi
Data binding is one of very important concept in silverlight.Before doing any data binding operation in silverlight, we should have to know the exact binding syntax in silverlight.

What is databinding in silverlight ?
Binding is the process of creating connection between User interface(UI) and source of data.
OR
It is the process of pulling information out of an object and displaying it in our application.

In Silverlight we can create the binding using 2 different approaches
a.Binding at runtime
b.Binding at design time.

Binding Modes in Silverlight
There are 3 binding modes
a. Onetime: if we have display some constant data then we can use this mode like database name
b. One-way:It is default mode in silverlight.Here the target property is updated when the source property change. Here will be one-way communication between source and target control.
c.TwoWay: Here will be two way communication between source and target control. If target control data will change then that will reflect in source control and vice-verse.

Simple databinding example in silverlight 4.0

Step1:Create one Emp class and declare the property like this

public class Emp
{
public int Id { get; set; }
public string EmpName { get; set; }
public string EmpSal { get; set; }
}

Step2:Create one silverlight page and Using GridPanel create one simple form for displaying data like this

<UserControl x:Class="Binding_In_Silverlight.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid Name="GridEmp">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Margin="7" Grid.Row="0">EmpId:</TextBlock>
<TextBox Margin="5" Grid.Column="1" Text="{Binding Id}" Grid.Row="0"/>
<TextBlock Margin="7" Grid.Row="1">EmpName:</TextBlock>
<TextBox Margin="5" Grid.Column="1" Text="{Binding EmpName}" Grid.Row="1"/>
<TextBlock Margin="7" Grid.Row="2">EmpSalary:</TextBlock>
<TextBox Margin="5" Grid.Column="1" Text="{Binding EmpSal}" Grid.Row="2"/>

</Grid>

</UserControl>

Step3: Write the binding code in code behind page like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Binding_In_Silverlight
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
FillGridPanel();
}

protected void FillGridPanel()
{
Emp emp = new Emp();
emp.Id = 122;
emp.EmpName = "Ram Mohan";
emp.EmpSal = "35000";
GridEmp.DataContext = emp;

}

}
}

Step4:Compile the code, then you will get op like this

Binding with collection of data
Here we will bind the collection of items using listbox silverlight control

Step1:Take one listbox silverlight control and configure like this

<navigation:Page x:Class="Binding_In_Silverlight.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
mc:Ignorable="d"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
d:DesignWidth="640" d:DesignHeight="480"
Title="Page1 Page">
<Grid x:Name="LayoutRoot">
<ListBox ItemsSource="{Binding}" Width="200" Height="100">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding EmpName}"></TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</navigation:Page>

Step2:Write the code in code behind page for binding like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

namespace Binding_In_Silverlight
{
public partial class Page1 : Page
{
public Page1()
{
InitializeComponent();

var employees = new List<Emp>()
{
new Emp{ EmpName = "Chandradev Prasad Sah" },
new Emp { EmpName = "Murli Reddy"},
new Emp { EmpName = "Krishana" }
};
this.DataContext = employees;
}

}
}

Step3:Now compile the code then you will get op like this

Here i have used 2 types of property binding data with listbox and textbox i.e DataContext & Itemsource

What is the difference between DataContext & Itemsource property?
Datacontext is used for binding single data item on silverlight control like textbox but item source is used to display the collection of data item in Silverlight control like listbox and dataGrid

Thank you for reading this artical and feel free to send comment, if have any suggestion.

Hi
Style in Silverlight is similar to CSS of asp.net page. Silverlight style allows us to define a common set of formatting characteristics and apply them throughout our application to ensure the consistency in page design.

Here i have created style for button like this

<UserControl x:Class="SilverlightApplication3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
mc:Ignorable="d" Height="300" Width="400">
<UserControl.Resources>
<Style x:Key="ButtonCSS" TargetType="Button">
<Setter Property="Foreground" Value="SeaGreen"/>
<Setter Property="FontSize" Value="28"/>
<Setter Property="Height" Value="50"/>
<Setter Property="Width" Value="200"/>
<Setter Property="FontStyle" Value="Italic"/>
</Style>
</UserControl.Resources>

<Grid>
<Button Content="Submit" Style="{StaticResource ButtonCSS}"/>
</Grid>

</UserControl>

Hi

Silverlight4.0 support Printing Api, using this api we can do the print functionality in silverlight 4.0 like this
Step1: Create the XAML page design like this

<StackPanel>
<Image x:Name="imgOne" Source="Img/Winter.jpg"
Height="300" Width="500"/>

<Button x:Name="Print" Content="Print" Width="150" Height="40"
Click="Print_Click" />
</StackPanel>

Step2:Write the code on Click Event in Code behind page like this
and make ensure to use “System.Windows.Printing” namespace.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Printing;

namespace PrintTest
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}

private void Print_Click(object sender, RoutedEventArgs e)
{
PrintDocument pdoc = new PrintDocument();
pdoc.PrintPage += (p, args) =>
{
args.PageVisual = imgOne;
args.HasMorePages = false;

};

pdoc.EndPrint += (p, args) =>
{
MessageBox.Show("Printing operation completed");
};

pdoc.Print("Some Document");

}
}
}