Exemplarische Vorgehensweise: Drucken einer Rechnung

Sie können nicht direkt von einer Anwendung LightSwitch drucken, Sie können jedoch Silverlight-Benutzersteuerelement erstellen, das Drucken implementiert und fügen ihn einem LightSwitch Bildschirm hinzu.In dieser exemplarischen Vorgehensweise wird erläutert, wie eine Rechnung durch Erstellen eines Silverlight-Benutzersteuerelements und die Verwendung als benutzerdefiniertes Steuerelement auf einem Formular gedruckt wird.

Erstellen Sie die LightSwitch-Anwendung

Zunächst erstellen Sie eine einfache LightSwitch Anwendung mit Kunden- und Reihenfolgenentitäten und einem Listen- und Detailbildschirm, sie anzuzeigen.

So erstellen Sie die Anwendung

1. Wählen Sie in der Menüleiste Datei, Neu, Projekt aus.

2. Im Neues Projekt Dialogfeld LightSwitch erweitern Sie den Knoten, und wählen Sie dann entweder LightSwitch-Anwendung (Visual Basic) oder LightSwitch-Anwendung (Visual C#) Vorlage aus.

3. Im Name Textfeld geben Sie LightSwitchInvoice ein und klicken Sie dann auf die Schaltfläche OK aus.

4. Im Fenster LightSwitchInvoice-Designer wählen Sie den Neue Tabelle erstellen Link aus.

5. Im Fenster Eigenschaften legen Sie den Wert der - Eigenschaft auf NameKunde fest.

6. Im Entitätsdesigner wählen Sie den <Add Property> Link aus, und geben Sie dann Name ein.

7. In der Spalte Typ wählen Sie den String Datentyp aus.

8. Wählen Sie in der Symbolleiste die Schaltfläche Neue Tabelle aus.

9. Im Fenster Eigenschaften legen Sie den Wert der - Eigenschaft auf NameReihenfolge fest.

10. Im Entitätsdesigner wählen Sie den <Add Property> Link aus, und geben Sie dann OrderItem ein.

11. In der Spalte Typ wählen Sie den String Datentyp aus.

12. Im Entitätsdesigner wählen Sie den <Add Property> Link aus, und geben Sie dann OrderAmount ein.

13. In der Spalte Typ wählen Sie den Money Datentyp aus.

14. Wählen Sie in der Symbolleiste die Schaltfläche Beziehung aus.

    Das Dialogfeld Neue Beziehung hinzufügen wird angezeigt.

15. In der Spalte An der Zeile Name, wählen Sie Kunde aus und wählen dann die Schaltfläche OK aus.

16. In Projektmappen-Explorer öffnen Sie das Kontextmenü für Kunden, und wählen Sie dann Öffnen aus.

17. Im Entitätsdesigner wählen Sie den <Add Property> Link aus, und geben Sie dann OrderTotal ein.

18. In der Spalte Typ wählen Sie den Money Datentyp aus.

19. Im Fenster EigenschaftenIst berechnet aktivieren Sie das Kontrollkästchen, und wählen Sie dann den Methode bearbeiten Link aus.

20. Fügen Sie im Code-Editor den folgenden Code für die OrderTotal_Compute-Methode hinzu:

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

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

21. In Projektmappen-Explorer öffnen Sie das Kontextmenü für Bildschirme, und wählen Sie dann Bildschirm hinzufügen aus.

22. Im Dialogfeld Neuen Bildschirm hinzufügen wählen Sie die Listen- und Detailbildschirm Vorlage aus.

23. In der Liste wählen Sie BildschirmdatenKunden aus.

24. Wählen Sie das Kontrollkästchen Kundenaufträge, und wählen Sie dann die Schaltfläche OK aus.

25. Klicken Sie in der Menüleiste auf Debuggen und dann auf Debuggen starten.

26. Klicken Sie auf der Symbolleiste Kunden wählen Sie die Schaltfläche Hinzufügen aus.

    Das Dialogfeld wird angezeigt. Neuen Auftrag hinzufügen

27. Im Name Textfeld geben Sie Derek Snyder ein und klicken Sie dann auf die Schaltfläche OK aus.

28. Klicken Sie auf der Symbolleiste Orders wählen Sie die Schaltfläche Hinzufügen aus.

29. Im Bestellposition Textfeld geben Sie Hammer ein.

30. Im Bestellmenge Textfeld geben Sie 9,95 ein und klicken Sie dann auf die Schaltfläche OK aus.

31. Klicken Sie auf der Symbolleiste Orders wählen Sie die Schaltfläche Hinzufügen aus.

32. Im Bestellposition Textfeld geben Sie Nägel ein.

33. Im Bestellmenge Textfeld geben Sie 4,50 ein und klicken Sie dann auf die Schaltfläche OK aus.

34. Klicken Sie auf der Symbolleiste Anwendung wählen Sie Speichern aus und schließen Sie die Anwendung.

Erstellen Sie das Silverlight-Benutzersteuerelement

Danach erstellen Sie ein Silverlight-Benutzersteuerelement, das Druckfunktionen zugegriffen wird.

So erstellen Sie ein benutzerdefiniertes Steuerelement

1. Wählen Sie auf der Menüleiste Datei, Hinzufügen, Neues Projekt aus.

2. Im Dialogfeld Neues Projekt erweitern Sie entweder Visual Basic oder Visual C# Knoten, wählen Sie den Knoten Silverlight aus, und wählen Sie dann die Vorlage aus. Silverlight-Klassenbibliothek

3. Im Name Textfeld geben Sie PrintControl ein und klicken Sie dann auf die Schaltfläche OK aus.

4. Im Dialogfeld Silverlight-Klassenbibliothek hinzufügen, überprüfen Sie, ob Silverlight 5 ausgewählt ist, und wählen Sie dann die Schaltfläche OK aus.

5. In Projektmappen-Explorer öffnen Sie das Kontextmenü für Class1.vb oder Class1.cs, und wählen Sie dann Löschen aus.

6. Öffnen Sie das Kontextmenü für PrintControl, wählen Sie Hinzufügen aus und wählen dann Neues Element aus.

7. Im Dialogfeld Neues Element hinzufügen wählen Sie die Silverlight-Benutzersteuerelement Vorlage aus.

8. Im Name Textfeld geben Sie Rechnung ein und klicken Sie dann auf die Schaltfläche OK aus.

9. Klicken Sie auf der Menüleiste wählen Sie Ansicht, Werkzeugkasten aus.

10. Im Werkzeugkasten erweitern Sie den Knoten Häufig verwendete Silverlight-Steuerelemente, aktivieren Sie das Datenraster-Steuerelement, und fügen Sie es der Entwurfsoberfläche hinzu.

11. Ersetzen Sie im Code-Editor den vorhandenen XAML-Code durch den folgenden 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>
    

    Dieser XAML-Code definiert das Layout des Steuerelements.Der <sdk:DataGrid.Columns>-Abschnitt gibt an, was in jeder Spalte DataGrid wird (in diesem Fall, OrderItem und die OrderAmount Felder aus der Customers Entität).

    Das Benutzersteuerelement sollte der folgenden Abbildung entsprechen:

    

12. In Projektmappen-Explorer erweitern Sie den Knoten Invoice.xaml, öffnen Sie das Kontextmenü für Invoice.xaml.vb oder Invoice.xaml.cs, und wählen Sie dann Öffnen aus.

13. Ersetzen Sie im Code-Editor den vorhandenen Code durch den folgenden 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;
    }
    }
    

14. Klicken Sie auf der Menüleiste wählen Sie Build, BuildSolution aus.

Verarbeiten Sie das Benutzersteuerelement

Abschließend fügen Sie dem LightSwitch Bildschirm hinzu und testen es.

Um das Benutzersteuerelement hinzu

1. In Projektmappen-Explorer öffnen Sie das Kontextmenü für den Bildschirm CustomersListDetail, und wählen Sie dann Öffnen aus.

2. Im Bildschirmdesigner wählen Sie den Zeilenlayout | Customer Details Knoten aus.

3. Klicken Sie auf der Symbolleiste öffnen Sie die Liste Layoutelement hinzufügen, und wählen Sie dann Benutzerdefiniertes Steuerelement aus.

4. Im Dialogfeld Benutzerdefiniertes Steuerelement hinzufügen wählen Sie die Schaltfläche Verweis hinzufügen aus.

5. Im Dialogfeld Verweis-Manager erweitern Sie den Knoten ProjektmappePrintControl, aktivieren Sie das Kontrollkästchen, und wählen Sie dann die Schaltfläche OK aus.

6. Im Dialogfeld Benutzerdefiniertes Steuerelement hinzufügen erweitern Sie die Knoten PrintControl, wählen Sie das Invoice-Steuerelement aus, und wählen Sie dann die Schaltfläche OK aus.

7. Im Bildschirmeditor wählen Sie den Benutzerdefiniertes Steuerelement | Screen Content Knoten aus, und ziehen Sie sie, damit sie der Data Grid | Orders Knoten.

8. Im Fenster Eigenschaften legen Sie den Wert der - Eigenschaft auf NameRechnung fest.

9. In der Gruppe Größenanpassung wählen Sie die Strecken Optionsfelder für Horizontale Ausrichtung und Vertikale Ausrichtung aus.

10. Wählen Sie auf der Menüleiste Sie Debuggen, Debugging starten, um die Anwendung auszuführen.

11. In der laufenden Anwendung wählen Sie die Schaltfläche Drucken aus.

    Wenn das Dialogfeld Windows Drucken angezeigt wird, können Sie einen Drucker aus.

Siehe auch

Weitere Ressourcen

Berichterstellung und Drucken in LightSwitch