Walkthrough: Printing an Invoice from a LightSwitch Application

Article
03/27/2017

For the latest documentation on Visual Studio 2017, see Visual Studio 2017 Documentation.

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 Desktop Application (Visual Basic) or LightSwitch Desktop 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.
In the screen designer, on the toolbar choose the Add Data Item button.
In the Add Data Item dialog box, choose Local Property, and in the Name text box enter InvoiceDate, and then choose the OK button.
On the toolbar, open the Write Code list and choose CustomersListDetail_Created.

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

InvoiceDate = DateTime.Today.ToShortDateString()

InvoiceDate == DateTime.Today.ToShortDateString();

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 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" Margin="-1,0,1,0">  

                <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><TextBlock TextWrapping="Wrap" Text="Invoice Date:" FontWeight="Bold" VerticalAlignment="Top"  

                       Grid.Column="1" HorizontalAlignment="Left" Margin="0,0,5,0"/>  

                <TextBlock x:Name="InvoiceDate" TextWrapping="Wrap" Text="{Binding Screen.InvoiceDate}" Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Top" />  
           <TextBlock TextWrapping="Wrap"  

                Text="Invoice For:" FontWeight="Bold" Grid.Row="1" VerticalAlignment="Top" HorizontalAlignment="Left"   

                Grid.Column="1" Margin="0,0,5,0"/>  

                <TextBlock TextWrapping="Wrap"  

                Text="{Binding Screen.Customers.SelectedItem.Name}" Grid.Row="1" Grid.Column="2"   

                       HorizontalAlignment="Left" VerticalAlignment="Top"/>  

                <Rectangle Grid.Column="2" Fill="#FF010108" Height="8" Stroke="Black" VerticalAlignment="Bottom" Grid.Row="3"/>  

                <TextBlock TextWrapping="Wrap"  

                Text="Total:" FontWeight="Bold" Grid.Row="4" VerticalAlignment="Top" Grid.Column="1"  

                 TextAlignment="Right" Margin="0,0,4,0"/>  

                <TextBlock Grid.Column="2" Height="16" Grid.Row="4" TextWrapping="Wrap"  

            Text="{Binding Screen.Customers.SelectedItem.OrderTotal, StringFormat=C}"  

                       VerticalAlignment="Top" Margin="4,0,0,0"/>       
            </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).

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  
        Dim InvoiceDate As String  
         InvoiceDate = 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();  
string InvoiceDate = null;  
            InvoiceDate = 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.lsml 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 below 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.