演练：打印发票

2013-03-12

不能直接从 LightSwitch 应用程序打印，但是，您可以创建实现打印的 Silverlight 用户控件并将其添加到 LightSwitch 屏幕。本演练演示如何通过创建 Silverlight 用户控件并将其打印发票为自定义控件在窗体。

创建 LightSwitch 应用程序

首先，使用客户创建一个简单的 LightSwitch 应用程序和 orders 实体和列表和详细屏幕显示它们。

创建应用程序

在菜单栏上，选择**“文件”，“新建**、“项目”。
在 新建项目 对话框中，展开 LightSwitch 节点，然后选择 LightSwitch 应用程序 (Visual Basic) 或 LightSwitch 应用程序 (Visual C#) 模板。
在名称文本框中，输入 LightSwitchInvoice，然后选择确定按钮。
在 LightSwitchInvoice 设计器 窗口中，选择 创建新表 链接。
在属性窗口中，将名称属性的值设置为客户。
在实体设计器中，选择 <Add Property> 该链接，然后输入名称。
在类型列中，选择 String 数据类型。
在工具栏上，选择 新建表 按钮。
在属性窗口中，将名称属性的值设置为顺序。
在实体设计器中，选择 <Add Property> 该链接，然后输入 OrderItem。
在类型列中，选择 String 数据类型。
在实体设计器中，选择 <Add Property> 该链接，然后输入 OrderAmount。
在类型列中，选择 Money 数据类型。
在工具栏上，选择关系按钮。

将显示**“添加新关系”**对话框。
在名称行的列中，选择客户，然后选择确定按钮。
在 解决方案资源管理器，打开客户的快捷菜单，然后选择打开。
在实体设计器中，选择 <Add Property> 该链接，然后输入 OrderTotal。
在类型列中，选择 Money 数据类型。
在属性窗口中，选择 为计算属性 复选框，然后选择 编辑方法 链接。

在代码编辑器中，添加 OrderTotal_Compute 方法的以下代码：

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

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

在 解决方案资源管理器，打开屏幕的快捷菜单，然后选择 添加屏幕。
在 添加新屏幕 对话框中，选择 “列表和详细信息”屏幕 模板。
在 屏幕数据 列表中，选择客户。
选择 客户订单 复选框，然后选择确定按钮。
在菜单栏上，依次选择**“调试”、“启动调试”**。
在客户工具栏上，选择添加按钮。

添加新订单 出现对话框。
在名称文本框中，输入德里克斯奈德，然后选择确定按钮。
在订单工具栏上，选择添加按钮。
在 订单项 文本框中，输入锤子。
在 订单金额 文本框中，输入 9.95，然后选择确定按钮。
在订单工具栏上，选择添加按钮。
在 订单项 文本框中，输入钉子。
在 订单金额 文本框中，输入 4.50，然后选择确定按钮。
在 应用程序 工具栏上，选择保存，然后关闭应用程序。

创建 Silverlight 用户控件

接下来，创建提供打印功能的 Silverlight 用户控件。

创建用户控件

在菜单栏上，选择**“文件”菜单上，“添加”和“新建项目”**。
在 新建项目 对话框中，展开 Visual Basic 或 Visual C# 节点，选择 Silverlight 节点，然后选择 Silverlight 类库 模板。
在名称文本框中，输入 PrintControl，然后选择确定按钮。
在 添加 Silverlight 类库 对话框中，确保 Silverlight 5 中选择，然后选择确定按钮。
在 解决方案资源管理器，打开 Class1.vb 或 Class1.cs的快捷菜单，然后选择删除。
打开 PrintControl的快捷菜单，选择添加，然后选择 新建项。
在 添加新项 对话框中，选择 Silverlight 用户控件 模板。
在名称文本框中，输入发票，然后选择确定按钮。
在菜单栏上，依次选择查看，工具箱。
在 工具箱 窗口中，展开 常用 Silverlight 控件 节点，选择 数据网格 控件，并将其添加到设计图面。

在代码编辑器中，用下面的代码替换现有的 XAML 代码：

<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>

此 XAML 代码定义控件的布局。<sdk:DataGrid.Columns> 部分指定将出现在 DataGrid 的每一列 (在这种情况下，OrderItem 和 OrderAmount 字段从 Customers 实体)。

用户控件应与下图类似：

Silverlight 用户控件

在 解决方案资源管理器，展开 Invoice.xaml 节点，打开 Invoice.xaml.vb 或 Invoice.xaml.cs的快捷菜单，然后选择打开。

在代码编辑器中，用下面的代码替换现有代码：

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;
}
}

在菜单栏上，依次选择生成，BuildSolution。

使用用户控件

最后，您将用户控件添加到 LightSwitch 屏幕并测试程序。

添加用户控件

在 解决方案资源管理器，打开 CustomersListDetail 屏幕的快捷菜单，然后选择打开。
在屏幕设计器中，选择 行布局|Customer Details 节点。
在工具栏上，打开 添加布局项 列表，然后选择 自定义控件。
在 添加自定义控件 对话框中，选择 添加引用 按钮。
在 引用管理器 对话框中，展开 解决方案 节点，选择 PrintControl 复选框，然后选择确定按钮。
在 添加自定义控件 对话框中，展开 PrintControl 节点，选择发票控件，然后选择确定按钮。
在屏幕上编辑，选择 自定义控件|Screen Content 节点，并拖动它，以便显示 Data Grid|订单 节点。
在属性窗口中，将名称属性的值设置为发票。
在 调整大小 组中，选择 水平对齐 和 垂直对齐的拉伸选项按钮。
在菜单栏上，依次选择调试，启动调试 运行应用程序。
在运行的应用程序，请选择打印按钮。

在窗口打印对话框出现后，可以选择打印机。

请参见

其他资源

LightSwitch 中的报告和打印