Walkthrough: Printing an Invoice

Article
05/17/2013

You can’t print directly from a LightSwitch application, but you can create a Silverlight user control that implements printing and add it to a LightSwitch screen. This walkthrough shows how to print an invoice by creating a Silverlight user control and using it as a custom control on a form.

Create the LightSwitch Application

First, you create a simple LightSwitch application with Customer and Order entities and a List and Details screen to display them.

To create the application

On the menu bar, choose File, New, Project.
In the New Project dialog box, expand the LightSwitch node, and then choose either the LightSwitch Application (Visual Basic) or LightSwitch Application (Visual C#) template.
In the Name text box, enter LightSwitchInvoice, and then choose the OK button.
In the LightSwitchInvoice Designer window, choose the Create New Table link.
In the Properties window, set the value of the Name property to Customer.
In the entity designer, choose the <Add Property> link, and then enter Name.
In the Type column, choose the String data type.
On the toolbar, choose the New Table button.
In the Properties window, set the value of the Name property to Order.
In the entity designer, choose the <Add Property> link, and then enter OrderItem.
In the Type column, choose the String data type.
In the entity designer, choose the <Add Property> link, and then enter OrderAmount.
In the Type column, choose the Money data type.
On the toolbar, choose the Relationship button.

The Add New Relationship dialog box appears.
In the To column of the Name row, choose Customer, and then choose the OK button.
In Solution Explorer, open the shortcut menu for Customers, and then choose Open.
In the entity designer, choose the <Add Property> link, and then enter OrderTotal.
In the Type column, choose the Money data type.
In the Properties window, select the Is Computed check box, and then choose the Edit Method link.

In the code editor, add the following code for the OrderTotal_Compute method:

result = (From items In Orders).Sum(Function(X) X.OrderAmount)

result = (from items in Orders select items).Sum(X => X.OrderAmount);

In Solution Explorer, open the shortcut menu for Screens, and then choose Add Screen.
In the Add New Screen dialog box, choose the List and Details Screen template.
In the Screen Data list, choose Customers.
Select the Customer Orders check box, and then choose the OK button.
On the menu bar, choose Debug, Start Debugging.
On the Customers toolbar, choose the Add button.

The Add New Order dialog box appears.
In the Name text box, enter Derek Snyder, and then choose the OK button.
On the Orders toolbar, choose the Add button.
In the Order Item text box, enter Hammer.
In the Order Amount text box, enter 9.95, and then choose the OK button.
On the Orders toolbar, choose the Add button.
In the Order Item text box, enter Nails.
In the Order Amount text box, enter 4.50, and then choose the OK button.
On the Application toolbar, choose Save, and then close the application.

Create the Silverlight User Control

Next, you create a Silverlight user control that provides printing capabilities.

To create a user control

On the menu bar, choose File, Add, New Project.
In the New Project dialog box, expand either the Visual Basic or Visual C# node, choose the Silverlight node, and then choose the Silverlight Class Library template.
In the Name text box, enter PrintControl, and then choose the OK button.
In the Add Silverlight Class Library dialog box, make sure that Silverlight 5 is selected, and then choose the OK button.
In Solution Explorer, open the shortcut menu for Class1.vb or Class1.cs, and then choose Delete.
Open the shortcut menu for PrintControl, choose Add, and then choose New Item.
In the Add New Item dialog box, choose the Silverlight User Control template.
In the Name text box, enter Invoice, and then choose the OK button.
On the menu bar, choose View, Toolbox.
In the Toolbox window, expand the Common Silverlight Controls node, choose the DataGrid control, and add it to the design surface.

In the code editor, replace the existing XAML code with the following code:

<UserControl
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:sdk="https://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="PrintControl.Invoice"
    mc:Ignorable="d" d:DesignWidth="474" Height="278">
<StackPanel>

        <Button Content="Print" x:Name="btnPrint" Click="PrintButton_Click" />

        <Border BorderThickness="1" BorderBrush="#FF504F4F">



            <Grid x:Name="LayoutRoot">

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="0.02*"/>

                    <ColumnDefinition Width="0.2*"/>

                    <ColumnDefinition Width="0.5*"/>

                    <ColumnDefinition Width="0.1*"/>

                    <ColumnDefinition Width="0.18*"/>

                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>

                    <RowDefinition Height="0.053*"/>

                    <RowDefinition Height="0.08*"/>

                    <RowDefinition Height="0.533*"/>

                    <RowDefinition Height="0.133*"/>

                    <RowDefinition Height="0.2*"/>

                </Grid.RowDefinitions>

                <sdk:DataGrid ItemsSource="{Binding Screen.Orders, Mode=OneWay}"

            AutoGenerateColumns="False" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" >

                    <sdk:DataGrid.Columns>

                        <sdk:DataGridTextColumn Binding="{Binding OrderItem}" CanUserSort="True" DisplayIndex="0"

            Header="Order Item" MaxWidth="100" MinWidth="50" Visibility="Visible" Width="Auto"/>

                        <sdk:DataGridTextColumn Binding="{Binding OrderAmount, StringFormat=C}" CanUserSort="True" DisplayIndex="1"

            Header="Order Amount" MaxWidth="100" MinWidth="50" Visibility="Visible" Width="Auto"/>

                    </sdk:DataGrid.Columns>

                </sdk:DataGrid>
               </Grid>
            </Border>
        </StackPanel>
</UserControl>

This XAML code defines the layout of the control. The <sdk:DataGrid.Columns> section specifies what will appear in each column of the DataGrid (in this case, the OrderItem and OrderAmount fields from the Customers entity).

The user control should resemble the following illustration:

Silverlight User Control

In Solution Explorer, expand the Invoice.xaml node, open the shortcut menu for Invoice.xaml.vb or Invoice.xaml.cs, and then choose Open.

In the code editor, replace the existing code with the following code:

Imports System.Windows.Printing

Partial Public Class Invoice
    Inherits UserControl
    Private WithEvents pd As PrintDocument
    Public Sub New()
        InitializeComponent()
        pd = New PrintDocument
        InvoiceDate.Text = DateTime.Today.ToShortDateString()
    End Sub
    Private Sub PrintButton_Click(ByVal sender As Object, _
            ByVal e As RoutedEventArgs)
        pd.Print(String.Format("Invoice Date: {0}", DateTime.Today.ToShortDateString()))
    End Sub
    Private Sub pd_PrintPage(ByVal sender As Object, _
            ByVal e As PrintPageEventArgs) Handles pd.PrintPage
        e.PageVisual = LayoutRoot
    End Sub

End Class

using System.Windows.Printing;

public partial class Invoice : UserControl
{
private PrintDocument withEventsField_pd;
private PrintDocument pd {
get { return withEventsField_pd; }
set {
if (withEventsField_pd != null) {
withEventsField_pd.PrintPage -= pd_PrintPage;
}
withEventsField_pd = value;
if (withEventsField_pd != null) {
withEventsField_pd.PrintPage += pd_PrintPage;
}
}
}
public Invoice()
{
InitializeComponent();
pd = new PrintDocument();
InvoiceDate.Text = DateTime.Today.ToShortDateString();
}
private void PrintButton_Click(object sender, RoutedEventArgs e)
{
pd.Print(string.Format("Invoice Date: {0}", DateTime.Today.ToShortDateString()));
}
private void pd_PrintPage(object sender, PrintPageEventArgs e)
{
e.PageVisual = LayoutRoot;
}
}

On the menu bar, choose Build, BuildSolution.

Consume the User Control

Lastly, you add the user control to the LightSwitch screen and test it.

To add the user control

In Solution Explorer, open the shortcut menu for the CustomersListDetail screen, and then choose Open.
In the screen designer, choose the Rows Layout | Customer Details node.
On the toolbar, open the Add Layout Item list, and then choose Custom Control.
In the Add Custom Control dialog box, choose the Add Reference button.
In the Reference Manager dialog box, expand the Solution node, select the PrintControl check box, and then choose the OK button.
In the Add Custom Control dialog box, expand the PrintControl nodes, choose the Invoice control, and then choose the OK button.
In the screen editor, choose the Custom Control | Screen Content node, and drag it so it appears the Data Grid | Orders node.
In the Properties window, set the value of the Name property to Invoice.
In the Sizing group, choose the Stretch option buttons for Horizontal Alignment and Vertical Alignment.
On the menu bar, choose Debug, Start Debugging to run the application.
In the running application, choose the Print button.

When the Windows Print dialog box appears, you can choose a printer.