Bimal: 2011

Microsoft Silverlight 4.0 supports Printing with the help of Printing API. The article will basically deals with step by step approach in achieving Print functionality with MVVM pattern.

Start Visual Web Developer 2010 Express and create a Silverlight Application
Select Silverlight 4 from Silverlight version dropdown and click Ok
Create three folders, Model, ViewModel and Command.

Right click on Model folder and create a class for model. Let name it as Employee.

and add the following properties

   1: public class Employee

   2: {

   3:     /// <summary>

   4:     /// Gets or sets Employee Id.

   5:     /// </summary>

   6:     public int Id { get; set; }

7:

   8:     /// <summary>

   9:     /// Gets or sets Employee's First name.

  10:     /// </summary>

  11:     public String FirstName { get; set; }

12:

  13:     /// <summary>

  14:     /// Gets or sets Employee's Last name.

  15:     /// </summary>

  16:     public String LastName { get; set; }

17:

  18:     /// <summary>

  19:     /// Gets or sets Location of Employee.

  20:     /// </summary>

  21:     public String Location { get; set; }

22:

  23:     /// <summary>

  24:     /// Gets Employee's full name.

  25:     /// </summary>

  26:     public String FullName { get { return FirstName + " " + LastName; } }

27:

  28:     /// <summary>

  29:     /// Returns a collection of dummy details

  30:     /// </summary>

  31:     /// <returns>Collection of Employee</returns>

  32:     public static Collection<Employee> GetEmployeeDetails()

  33:     {

  34:         Collection<Employee> empList = new Collection<Employee>()

  35:         {

  36:             new Employee() { Id=001, FirstName = "Amanda",

  37:                 LastName = "Hartshorn", Location="United States" },

  38:             new Employee() { Id=002, FirstName = "Binu",

  39:                 LastName = "Babu", Location="India" },

  40:             new Employee() { Id=003, FirstName = "Nihas",

  41:                 LastName = "Alangaden", Location="India" },

  42:             new Employee() { Id=004, FirstName = "Parvathi",

  43:                 LastName = "Mahesh", Location="United States" },

  44:             new Employee() { Id=005, FirstName = "Tony",

  45:                 LastName = "Xavier", Location="India" }

  46:         };

47:

  48:         return empList;

  49:     }

  50: }

Right click on ViewModel folder in the Silverlight project create a BaseViewModel class

and implement INotifyPropertyChanged interface as shown below
```
   1: public class BaseViewModel : INotifyPropertyChanged
```
```
   2: {
```
```
   3:     /// <summary>
```
```
   4:     /// This event occurs when a property value changes
```
```
   5:     /// </summary>
```
```
   6:     public event PropertyChangedEventHandler PropertyChanged;
```
```
   7:  
```
```
   8:     protected void OnPropertyChanged(string name)
```
```
   9:     {
```
```
  10:         if (PropertyChanged!= null)
```
```
  11:         {
```
```
  12:             PropertyChanged(this, new PropertyChangedEventArgs(name));
```
```
  13:         }
```
```
  14:     }
```
```
  15: }
```
Create MainPageViewModel class inside ViewModel folder and Command class inside Command folder.

Implement ICommand interface in Command class as shown below

   1: public class Command : ICommand

   2: {

   3:     private bool m_canExecuteCache;

   4:     private Action<object> m_executeAction;

   5:     private Func<object, bool> m_canExecute;

6:

   7:     /// <summary>

   8:     /// This event occurs when changes occur that

   9:     /// affect whether the command should execute.

  10:     /// </summary>

  11:     public event EventHandler CanExecuteChanged;

12:

  13:     /// <summary>

  14:     /// Initializes a new instance of <see cref="Command"/> class.

  15:     /// </summary>

  16:     /// <param name="canExecute">

  17:     /// Encapsulates a method that has one

  18:     /// parameter and returns a value of the type bool.

  19:     /// </param>

  20:     /// <param name="executeAction">

  21:     /// Encapsulates a method that takes a single

  22:     /// parameter and does not return a value.

  23:     /// </param>

  24:     public Command(Func<object, bool> canExecute, Action<object> executeAction)

  25:     {

  26:         m_canExecute = canExecute;

  27:         m_executeAction = executeAction;

  28:     }

29:

  30:     /// <summary>

  31:     /// This method determines whether the

  32:     /// command can execute in its current state.

  33:     /// </summary>

  34:     /// <param name="parameter">

  35:     /// Data used by the command. If the command does not

  36:     /// require data to be passed, this object can be set to null.

  37:     /// </param>

  38:     /// <returns>

  39:     /// true if this command can be executed; otherwise, false.

  40:     /// </returns>

  41:     public bool CanExecute(object parameter)

  42:     {

  43:         bool enable = m_canExecute(parameter);

44:

  45:         if (m_canExecuteCache != enable)

  46:         {

  47:             m_canExecuteCache = enable;

48:

  49:             if (CanExecuteChanged != null)

  50:             {

  51:                 CanExecuteChanged(this, new EventArgs());

  52:             }

  53:         }

54:

  55:         return m_canExecuteCache;

  56:     }

57:

  58:     /// <summary>

  59:     /// This method will be called when the command is invoked.

  60:     /// </summary>

  61:     /// <param name="parameter">

  62:     /// Data used by the command. If the command does not

  63:     /// require data to be passed, this object can be set to null.

  64:     /// </param>

  65:     public void Execute(object parameter)

  66:     {

  67:         m_executeAction(parameter);

  68:     }

  69: }

Create a property for Print Command and another one for Employees collection in the view model. Create an instance of Command and pass the methods which handles can execute and print.

   1: public class MainPageViewModel : BaseViewModel

   2: {

   3:     /// <summary>

   4:     /// Initializes a new instance of <see cref="MainPageViewModel"/> class.

   5:     /// </summary>

   6:     public MainPageViewModel()

   7:     {

   8:         //Gets dummy data from model

   9:         Employees = Employee.GetEmployeeDetails();

  10:         //Setting the Command to the property

  11:         PrintCommand = new Command.Command(CanPrint, Print);

  12:     }

13:

  14:     /// <summary>

  15:     /// Gets or sets a collection of Employee.

  16:     /// </summary>

  17:     public Collection<Employee> Employees { get; private set; }

18:

  19:     /// <summary>

  20:     /// Gets or sets the Print Command.

  21:     /// </summary>

  22:     public ICommand PrintCommand { get; private set; }

23:

  24:     #region Private Methods

25:

  26:     /// <summary>

  27:     /// Method which is called when the command is invoked.

  28:     /// </summary>

  29:     /// <param name="obj">Data used for Printing</param>

  30:     private void Print(object obj)

  31:     {

  32:         //Creates a new instance of the System.Windows.Printing.PrintDocument class.

  33:         PrintDocument document = new PrintDocument();

34:

  35:         //Event handler which fires when each page is printing.

  36:         document.PrintPage += (s, arg) => { arg.PageVisual = obj as UIElement; };

37:

  38:         // Starts the printing process for the specified

  39:         // document by opening the print dialog box.

  40:         document.Print("Print");

  41:     }

42:

  43:     /// <summary>

  44:     /// Method which determines whether the

  45:     /// command can execute in its current state.

  46:     /// </summary>

  47:     /// <param name="obj">Data used for Printing</param>

  48:     /// <returns>true if the command can be executed; otherwise, false</returns>

  49:     private bool CanPrint(object obj)

  50:     {

  51:         return true;

  52:     }

53:

  54:     #endregion

  55: }

Build the Solution and import ViewModel namespace in MainPage.xaml as shown below

   1: xmlns:vm="clr-namespace:PrintApplication.ViewModel"

Set the DataContext of the MainPage usercontrol.

   1: <UserControl.DataContext>

   2:     <vm:MainPageViewModel />

   3: </UserControl.DataContext>

Add reference to System.Windows.Controls.Data.dll to the Silverlight project and

import System.Windows.Controls.Data as shown below for adding DataGrid Control to list the Employee details.
```
   1:  xmlns:data="clr-namespace:System.Windows.Controls; assembly=System.Windows.Controls.Data"
```

Add a TextBlock for displaying Title, DataGrid for displaying the Employees Collection and a button for handling Print action in MainPage.xaml.

   1: <UserControl x:Class="PrintApplication.MainPage"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   6:     xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

   7:     xmlns:vm="clr-namespace:PrintApplication.ViewModel" mc:Ignorable="d">

   8:     <UserControl.DataContext>

   9:         <vm:MainPageViewModel />

  10:     </UserControl.DataContext>

  11:     <Grid x:Name="LayoutRoot" Background="White" Height="270">

  12:         <Grid.RowDefinitions>

  13:             <RowDefinition Height="50" />

  14:             <RowDefinition />

  15:             <RowDefinition Height="50" />

  16:         </Grid.RowDefinitions>

  17:         <TextBlock x:Name="trbBlock" Text="Printing API Sample" FontSize="18"

  18:                    Margin="3,10,3,14" HorizontalAlignment="Center" Height="26" />

  19:         <StackPanel x:Name="DisplayPanel" Grid.Row="1" HorizontalAlignment="Center">

  20:             <data:DataGrid ItemsSource="{Binding Path=Employees}"

  21:                            AutoGenerateColumns="False">

  22:                 <data:DataGrid.Columns>

  23:                     <data:DataGridTextColumn Header="Id" Width="50"

  24:                                              Binding="{Binding Id}" />

  25:                     <data:DataGridTextColumn Header="First Name" Width="100"

  26:                                              Binding="{Binding FirstName}" />

  27:                     <data:DataGridTextColumn Header="Last Name" Width="100"

  28:                                              Binding="{Binding LastName}" />

  29:                     <data:DataGridTextColumn Header="Location" Width="100"

  30:                                              Binding="{Binding Location}" />

  31:                 </data:DataGrid.Columns>

  32:             </data:DataGrid>

  33:         </StackPanel>

  34:         <Button Content="Print" Grid.Row="2" Width="100" Height="30"

  35:                 Command="{Binding PrintCommand}"

  36:                 CommandParameter="{Binding ElementName=DisplayPanel}" />

  37:     </Grid>

  38: </UserControl>

Run the solution and click the Print button to get the Print dialog box.

Thanks
Bimal

Bimal

Saturday, April 16, 2011

Printing in Silverlight 4.0 with MVVM