チュートリアル: 請求書の印刷

[アーティクル]
03/12/2013

LightSwitch のアプリケーションから直接出力できませんが印刷を Silverlight のユーザーコントロールを作成し、実行する LightSwitch の画面に追加します。このチュートリアルでは、Silverlight のユーザーコントロールを作成し、フォームのカスタムコントロールとして使用して、請求書を印刷する方法を示します。

LightSwitch のアプリケーションを作成します。

最初に、貴社との LightSwitch の簡単なアプリケーションを作成し、これらを表示するには、エンティティとリストと詳細の画面を並べ替えます。

アプリケーションを作成するには

メニューバーで [ファイル]、[新規]、[プロジェクト] の順にクリックします。
[新しいプロジェクト] のダイアログボックスで、[LightSwitch] のノードを展開し、[LightSwitch アプリケーション (Visual Basic)] か [LightSwitch アプリケーション (Visual C#)] テンプレートを選択します。
[名前] のテキストボックスに、LightSwitchInvoiceを入力し、を [OK] のボタンをクリックします。
[LightSwitchInvoice Designer] のペインで、[新しいテーブルの作成] のリンクを選択します。
[プロパティ] のペインで、[顧客]に [名前] のプロパティの値を設定します。
Entity Designer で、を <Add Property> 選択し、[名前]を入力します。
[種類] の列で、String のデータ型を選択します。
ツールバーで、[新しいテーブル] のボタンをクリックします。
[プロパティ] のペインで、[順序]に [名前] のプロパティの値を設定します。
Entity Designer で、を <Add Property> 選択し、OrderItemを入力します。
[種類] の列で、String のデータ型を選択します。
Entity Designer で、を <Add Property> 選択し、OrderAmountを入力します。
[種類] の列で、Money のデータ型を選択します。
ツールバーで、[リレーションシップ] のボタンをクリックします。

[新しいリレーションシップの追加] ダイアログボックスが表示されます。
[名前] の行のにはの列で、[顧客] を選択し、[OK] のボタンをクリックします。
[ソリューションエクスプローラー] では、[Customers] のショートカットメニューを開き、[開く] を選択します。
Entity Designer で、を <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);

[ソリューションエクスプローラー] では、[画面] のショートカットメニューを開き、[画面の追加] を選択します。
[新しい画面の追加] のダイアログボックスで、[一覧および詳細画面] テンプレートを選択します。
[画面データ] の一覧で、[Customers] を選択します。
[Customer Orders] のチェックボックスをオンにし、[OK] のボタンをクリックします。
メニューバーで、[デバッグ]、[デバッグ開始] の順に選択します。
[Customers] のツールバーで、[追加] のボタンをクリックします。

[新しい受注の追加] のダイアログボックスが表示されます。
[名前] のテキストボックスに、デレック Snyderを入力し、を [OK] のボタンをクリックします。
[注文] のツールバーで、[追加] のボタンをクリックします。
[注文品目] のテキストボックスに、ハンマーを入力します。
[注文金額] のテキストボックスに、9.95を入力し、を [OK] のボタンをクリックします。
[注文] のツールバーで、[追加] のボタンをクリックします。
[注文品目] のテキストボックスに、してを入力します。
[注文金額] のテキストボックスに、4.50を入力し、を [OK] のボタンをクリックします。
[アプリケーション] のツールバーで、[保存] を選択し、アプリケーションを閉じます。

Silverlight のユーザーコントロールを作成します。

次に、印刷機能を提供する Silverlight のユーザーコントロールを作成します。

ユーザーコントロールを作成するには

メニューバーで [ファイル] をクリックし、[追加] を選択し、[新しいプロジェクト] をクリックします。
[新しいプロジェクト] のダイアログボックスで、[Visual Basic] か [Visual C#] のノードを展開し、[Silverlight] のノードを選択し、を [Silverlight クラスライブラリ] テンプレートを選択します。
[名前] のテキストボックスに、[PrintControl]を入力し、を [OK] のボタンをクリックします。
[Silverlight クラスライブラリの追加] のダイアログボックスで、[Silverlight 5] が選択されていることを確認し、次に [OK] のボタンを選択します。
[ソリューションエクスプローラー] では、[Class1.vb] または [Class1.cs] のショートカットメニューを開き、[削除] を選択します。
[PrintControl] のショートカットメニューを開き、[追加] を選択し、を [新しいアイテム] を選択します。
[新しい項目の追加] のダイアログボックスで、[Silverlight ユーザーコントロール] テンプレートを選択します。
[名前] のテキストボックスに、[納品書]を入力し、を [OK] のボタンをクリックします。
メニューバーで、[ビュー]、[ツールボックス] を選択します。
[ツールボックス] のペインで、[コモン 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 の各列で指定します (この場合、Customers のエンティティの OrderAmount の OrderItem フィールドとフィールド)。

ユーザーコントロールは、次の図のようになります。:

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] のチェックボックスをオンに [OK] のボタンをクリックします。
[カスタムコントロールの追加] のダイアログボックスで、[PrintControl] のノードを展開し、[納品書] のコントロールを選択し、を [OK] のボタンをクリックします。
画面エディターで、[カスタムコントロール] | Screen Content ノードを選択し、ドラッグして Data Grid | [注文] のノードとして表示されます。
[プロパティ] のペインで、[納品書]に [名前] のプロパティの値を設定します。
[サイズ変更] のグループで、[水平方向の配置] と [垂直方向の配置] の [伸縮] のオプションボタンを選択します。
メニューバーで、アプリケーションを実行するには [デバッグ]、[デバッグの開始] を選択します。
実行中のアプリケーションでは、[印刷] のボタンをクリックします。

Windows [印刷] のダイアログボックスが表示されたら、プリンターを選択できます。

参照

その他の技術情報

LightSwitch でのレポートと印刷

次の方法で共有

チュートリアル: 請求書の印刷

LightSwitch のアプリケーションを作成します。

アプリケーションを作成するには

Silverlight のユーザーコントロールを作成します。

ユーザーコントロールを作成するには

ユーザーコントロールを実装します。

ユーザーコントロールを追加するには

参照

その他の技術情報

その他のリソース

次の方法で共有

チュートリアル: 請求書の印刷

LightSwitch のアプリケーションを作成します。

アプリケーションを作成するには

Silverlight のユーザー コントロールを作成します。

ユーザー コントロールを作成するには

ユーザー コントロールを実装します。

ユーザー コントロールを追加するには

参照

その他の技術情報

その他のリソース

Silverlight のユーザーコントロールを作成します。

ユーザーコントロールを作成するには

ユーザーコントロールを実装します。

ユーザーコントロールを追加するには