다음을 통해 공유

연습: LightSwitch 응용 프로그램에서 송장 인쇄

  • 아티클

LightSwitch 응용 프로그램에서 직접 인쇄할 수는 없지만 인쇄를 구현하는 Silverlight 사용자 정의 컨트롤을 만들어 LightSwitch 화면에 추가할 수는 있습니다. 이 연습에서는 Silverlight 사용자 정의 컨트롤을 만든 다음 폼에서 사용자 지정 컨트롤로 사용하여 송장을 인쇄하는 방법을 보여 줍니다.

LightSwitch 응용 프로그램 만들기

먼저 Customer 및 Order 엔터티와 이러한 엔터티를 표시하는 목록 및 세부 정보 화면이 포함된 간단한 LightSwitch 응용 프로그램을 만듭니다.

응용 프로그램을 만들려면

  1. 메뉴 모음에서 파일, 새로 만들기, 프로젝트를 차례로 선택합니다.

  2. 새 프로젝트 대화 상자에서 LightSwitch 노드를 확장하고 LightSwitch Desktop 응용 프로그램(Visual Basic) 또는 LightSwitch Desktop 응용 프로그램(Visual C#) 템플릿을 선택합니다.

  3. 이름 텍스트 상자에 LightSwitchInvoice를 입력한 후 확인 단추를 선택합니다.

  4. LightSwitchInvoice 디자이너 창에서 새 테이블 만들기 링크를 선택합니다.

  5. 속성 창에서 이름 속성의 값을 Customer로 설정합니다.

  6. 엔터티 디자이너에서 <속성 추가> 링크를 선택하고 Name을 입력합니다.

  7. 형식 열에서 String 데이터 형식을 선택합니다.

  8. 도구 모음에서 새 테이블 단추를 선택합니다.

  9. 속성 창에서 이름 속성의 값을 Order로 설정합니다.

  10. 엔터티 디자이너에서 <속성 추가> 링크를 선택하고 OrderItem을 입력합니다.

  11. 형식 열에서 String 데이터 형식을 선택합니다.

  12. 엔터티 디자이너에서 <속성 추가> 링크를 선택하고 OrderAmount를 입력합니다.

  13. 형식 열에서 Money 데이터 형식을 선택합니다.

  14. 도구 모음에서 관계 단추를 선택합니다.

    새 관계 추가 대화 상자가 나타납니다.

  15. 이름 행의 대상 열에서 Customer를 선택한 다음 확인 단추를 선택합니다.

  16. 솔루션 탐색기에서 Customers의 바로 가기 메뉴를 열고 열기를 선택합니다.

  17. 엔터티 디자이너에서 <속성 추가> 링크를 선택하고 OrderTotal을 입력합니다.

  18. 형식 열에서 Money 데이터 형식을 선택합니다.

  19. 속성 창에서 계산됨 확인란을 선택한 다음 편집 메서드 링크를 선택합니다.

  20. 코드 편집기에서 OrderTotal_Compute 메서드에 대해 다음 코드를 추가합니다.

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

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

  21. 솔루션 탐색기에서 화면의 바로 가기 메뉴를 열고 화면 추가를 선택합니다.

  22. 새 화면 추가 대화 상자에서 목록 및 세부 정보 화면 템플릿을 선택합니다.

  23. 화면 데이터 목록에서 Customers를 선택합니다.

  24. Customer Orders 확인란을 선택하고 확인 단추를 선택합니다.

  25. 화면 디자이너의 도구 모음에서 데이터 항목 추가 단추를 선택합니다.

  26. 데이터 항목 추가 대화 상자에서 로컬 속성을 선택하고, 이름 텍스트 상자에 InvoiceDate를 입력한 후 확인 단추를 선택합니다.

  27. 도구 모음에서 코드 작성 목록을 열고 CustomersListDetail_Created를 선택합니다.

  28. 코드 편집기에서 CustomersListDetail_Created 메서드에 대한 다음 코드를 추가합니다.

    InvoiceDate = DateTime.Today.ToShortDateString()

    InvoiceDate == DateTime.Today.ToShortDateString();

  29. 메뉴 모음에서 디버그, 디버깅 시작을 차례로 선택합니다.

  30. Customers 도구 모음에서 추가 단추를 선택합니다.

    새 주문 추가 대화 상자가 나타납니다.

  31. 이름 텍스트 상자에 Derek Snyder를 입력한 후 확인 단추를 선택합니다.

  32. Orders 도구 모음에서 추가 단추를 선택합니다.

  33. 주문 항목 텍스트 상자에 Hammer를 입력합니다.

  34. 주문 금액 텍스트 상자에 9.95을 입력한 후 확인 단추를 선택합니다.

  35. Orders 도구 모음에서 추가 단추를 선택합니다.

  36. 주문 항목 텍스트 상자에 Nails를 입력합니다.

  37. 주문 금액 텍스트 상자에 4.50을 입력한 후 확인 단추를 선택합니다.

  38. 응용 프로그램 도구 모음에서 저장을 선택하고 응용 프로그램을 닫습니다.

Silverlight 사용자 정의 컨트롤 만들기

다음으로는 인쇄 기능을 제공하는 Silverlight 사용자 정의 컨트롤을 만듭니다.

사용자 정의 컨트롤을 만들려면

  1. 메뉴 모음에서 파일, 추가, 새 프로젝트를 차례로 선택합니다.

  2. 새 프로젝트 대화 상자에서 Visual Basic 또는 Visual C# 노드를 확장하고 Silverlight 노드를 선택한 다음 Silverlight 클래스 라이브러리 템플릿을 선택합니다.

  3. 이름 텍스트 상자에 PrintControl을 입력한 후 확인 단추를 선택합니다.

  4. 솔루션 탐색기에서 Class1.vb 또는 Class1.cs의 바로 가기 메뉴를 열고 삭제를 선택합니다.

  5. PrintControl의 바로 가기 메뉴를 열고 추가를 선택한 후 새 항목을 선택합니다.

  6. 새 항목 추가 대화 상자에서 Silverlight 사용자 정의 컨트롤 템플릿을 선택합니다.

  7. 이름 텍스트 상자에 Invoice를 입력한 후 확인 단추를 선택합니다.

  8. 메뉴 모음에서 보기, 도구 상자를 차례로 선택합니다.

  9. 도구 상자 창에서 공용 Silverlight 컨트롤 노드를 선택하고 DataGrid 컨트롤을 선택하여 디자인 화면에 추가합니다.

  10. 코드 편집기에서 기존 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" 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>

    이 XAML 코드는 컨트롤의 레이아웃을 정의합니다. <sdk:DataGrid.Columns> 섹션에서는 DataGrid의 각 열에 표시되는 항목(여기서는 Customers 엔터티의 OrderItem 및 OrderAmount 필드)을 지정합니다.

  11. 솔루션 탐색기에서 Invoice.xaml 노드를 확장하고 Invoice.xaml.vb 또는 Invoice.xaml.cs 노드의 바로 가기 메뉴를 연 다음 열기를 선택합니다.

  12. 코드 편집기에서 기존 코드를 다음 코드로 바꿉니다.

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

  13. 메뉴 모음에서 빌드, BuildSolution을 선택합니다.

사용자 정의 컨트롤 사용

마지막으로 사용자 정의 컨트롤을 LightSwitch 화면에 추가하고 테스트합니다.

사용자 정의 컨트롤을 추가하려면

  1. 솔루션 탐색기에서 CustomersListDetail.lsml 화면의 바로 가기 메뉴를 열고 열기를 선택합니다.

  2. 화면 디자이너에서 행 레이아웃 | 고객 세부 정보 노드를 선택합니다.

  3. 도구 모음에서 레이아웃 항목 추가 목록을 열고 사용자 지정 컨트롤을 선택합니다.

  4. 사용자 지정 컨트롤 추가 대화 상자에서 참조 추가 단추를 선택합니다.

  5. 참조 관리자 대화 상자에서 솔루션 노드를 확장하고 PrintControl 확인란을 선택한 다음 확인 단추를 선택합니다.

  6. 사용자 지정 컨트롤 추가 대화 상자에서 PrintControl 노드를 확장하고 Invoice 컨트롤을 선택한 다음 확인 단추를 선택합니다.

  7. 화면 편집기에서 사용자 지정 컨트롤 | 화면 콘텐츠 노드를 선택한 다음 데이터 표 | 주문 노드 아래에 표시되도록 끕니다.

  8. 속성 창에서 이름 속성의 값을 Invoice로 설정합니다.

  9. 크기 조정 그룹에서 가로 맞춤 및 세로 맞춤에 대해 늘이기 옵션 단추를 선택합니다.

  10. 메뉴 모음에서 디버그, 디버깅 시작을 선택하여 응용 프로그램을 실행합니다.

  11. 실행 중인 응용 프로그램에서 인쇄 단추를 선택합니다.

    Windows 인쇄 대화 상자가 나타나면 프린터를 선택할 수 있습니다.

참고 항목

기타 리소스

LightSwitch에서 보고 및 인쇄