元記事 (英語) Mihail Mateev » Introduction to Silverlight Reporting
この記事では、Siverlight Reporting プロジェクトを使用する方法をご紹介します。ソースコードとサンプル デモは Codeplex サイト (英語) からダウンロードできます。 このプロジェクトは、マイクロソフトの Pete Brown と David Poll により作成された Silverlight 4 を使用したシンプルなレポートを構築するベーシックなフレームワークです。
以下の機能が含まれます:
アプリケーション作成手順:
Silverlight ナビゲーション アプリケーションの作成:
Silverlight WCF Service を実装しクライアントで参照します(デモ アプリケーションで実装)。
Silverlight.Reporting アセンブリを参照:
Silverlight Resource Dictionary をレポート テンプレートと共に作成します。
4 つのテンプレート プロパティ (DataTemplate 型) があります。
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:reporting="clr-namespace:System.Windows.Printing.Reporting;assembly=Silverlight.Reporting"> <reporting:Report x:Key="Report" Title="Products Review List"> <reporting:Report.Resources> <Style x:Key="HeaderText" TargetType="TextBlock"> <Setter Property="FontWeight" Value="Bold" /> <Setter Property="TextAlignment" Value="Left" /> <Setter Property="HorizontalAlignment" Value="Stretch" /> </Style> </reporting:Report.Resources> <reporting:Report.PageHeaderTemplate> <DataTemplate> <Grid Margin="1 1 1 20"> <Rectangle Stroke="Black" /> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <TextBlock Text="{Binding Title}" Grid.Row="0" FontWeight="Bold" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Text="{Binding CurrentPageNumber, StringFormat='Page {0}'}" Grid.Row="0" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Top" /> <Grid Grid.Row="1" HorizontalAlignment="Stretch" Margin="4 0 0 4"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="200" /> <ColumnDefinition Width="200" /> <ColumnDefinition Width="150" /> <ColumnDefinition Width="150" /> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0" Style="{StaticResource HeaderText}" Text="SKU and Name" /> <TextBlock Grid.Column="1" Style="{StaticResource HeaderText}" TextAlignment="Left" Text="Category" /> <TextBlock Grid.Column="2" Style="{StaticResource HeaderText}" TextAlignment="Right" Text="Supplier" /> <TextBlock Grid.Column="3" Style="{StaticResource HeaderText}" TextAlignment="Right" Text="UnitPrice" /> <TextBlock Grid.Row="2" Style="{StaticResource HeaderText}" Text="Units in Stock" /> <TextBlock Grid.Row="2" Grid.Column="1" Style="{StaticResource HeaderText}" Text="Quantity per Unit" /> </Grid> </Grid> </Grid> </DataTemplate> </reporting:Report.PageHeaderTemplate> <reporting:Report.ItemTemplate> <DataTemplate> <Grid HorizontalAlignment="Stretch" Margin="5 0 0 20"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="200" /> <ColumnDefinition Width="200" /> <ColumnDefinition Width="150" /> <ColumnDefinition Width="150" /> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0" Orientation="Horizontal"> <TextBlock Text="{Binding SKU}" FontWeight="Bold" /> <TextBlock Text=", " FontWeight="Bold" /> <TextBlock Text="{Binding Name}" FontWeight="Bold" /> </StackPanel> <TextBlock Grid.Column="1" Text="{Binding Category}" TextAlignment="Left" /> <TextBlock Grid.Column="2" Text="{Binding Supplier}" TextAlignment="Right" /> <TextBlock Grid.Column="3" Text="{Binding UnitPrice, StringFormat='{}{0:C}'}"
TextAlignment="Right" /> <TextBlock Grid.Row="1" Text="{Binding UnitsInStock}" /> <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding QuantityPerUnit}" /> <TextBlock Grid.Row="2" Grid.ColumnSpan="4" TextWrapping="Wrap" Text="{Binding ReviewComments}" /> </Grid> </DataTemplate> </reporting:Report.ItemTemplate> <reporting:Report.PageFooterTemplate> <DataTemplate> <Grid Margin="1 20 1 1"> <Rectangle Stroke="Black" /> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5"> <TextBlock Text="{Binding CurrentPageNumber, StringFormat='Page {0}'}" /> <TextBlock Text="{Binding TotalPageCount, StringFormat=' of {0}'}" /> </StackPanel> </Grid> </DataTemplate> </reporting:Report.PageFooterTemplate> <reporting:Report.ReportFooterTemplate> <DataTemplate> <Grid Margin="1 20 1 1"> <Rectangle Stroke="Black" /> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="200" /> <ColumnDefinition Width="200" /> <ColumnDefinition Width="150" /> <ColumnDefinition Width="150" /> </Grid.ColumnDefinitions> <TextBlock Grid.Column="1" Text="{Binding ProductsCount, StringFormat='{}{0} products'}" TextAlignment="Left" /> <TextBlock Grid.Column="2" Text="{Binding TotalPrice, StringFormat='{}{0:C}'}" TextAlignment="Right" />
</Grid> </Grid> </DataTemplate> </reporting:Report.ReportFooterTemplate> </reporting:Report> </ResourceDictionary>
Add this ResourceDictionary to Application.Resources:
<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Assets/Styles.xaml"/> <ResourceDictionary Source="Assets/ReportStyles.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources>
WCF Service からのデータの読み込みと印刷を実装するシンプルな ViewModel を作成します。
レポーティングに関連した ViewModel のコードがあります。
すべてのコードは同じアプリケーション内にあります。
Navigation アプリケーションにページ作成します - 最初にレイアウトで Microsoft DataGrid を使用し、2 番目に Infragistics XamGrid を使用します。静的なリソースとしてこの ViewModel をこれらの 2 ページに追加し、各ページ レイアウトに DataContext として追加します。次に両グリッドの ItemsSource を ViewModel の Products プロパティにバインドします。
DataGrid のページの XAML コード:
.....
<UserControl.Resources>
<my:DataViewModel x:Key="dateViewModel" x:FieldModifier="public" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="LightSteelBlue" DataContext="{StaticResource dateViewModel}">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Button x:Name="BtnMsGridLoadData" Style="{StaticResource PageButtonStyle}"
Content="Load Data" Command="{Binding Load}" />
<Button x:Name="BtnMsGridPrint" Style="{StaticResource PageButtonStyle}"
Content="Generate Report" Command="{Binding PrintReport}"
CommandParameter="{Binding Products}"/>
<TextBlock x:Name="PageNameTextBlock" Style="{StaticResource ApplicationNameStyle}"
Text="MS Grid Reporting"/>
</StackPanel>
<sdk:DataGrid AutoGenerateColumns="False" Grid.Row="1" HorizontalAlignment="Stretch" Margin="20" Name="dataGrid" VerticalAlignment="Stretch"
ItemsSource="{Binding Products}">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Header="SKU" Binding="{Binding SKU}" />
<sdk:DataGridTextColumn Header="Name" Binding="{Binding Name}" />
<sdk:DataGridTextColumn Header="Category" Binding="{Binding Category}" />
<sdk:DataGridTextColumn Header="Supplier" Binding="{Binding Supplier}" />
<sdk:DataGridTextColumn Header="UnitPrice" Binding="{Binding UnitPrice}" />
<sdk:DataGridTextColumn Header="UnitsInStock" Binding="{Binding UnitsInStock}" />
<sdk:DataGridCheckBoxColumn Header="OnBackOrder" Binding="{Binding OnBackOrder}" />
<sdk:DataGridTextColumn Header="QuantityPerUnit" Binding="{Binding QuantityPerUnit}" />
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</Grid>
同様のコードが Infragistics XamGrid のページにもあります:
...
<my:DataViewModel x:Key="dateViewModel2" x:FieldModifier="public" />
<Grid x:Name="LayoutRoot" Background="LightSkyBlue" DataContext="{StaticResource dateViewModel2}">
CommandParameter="{Binding Products}" />
Text="XamGrid Reporting"/>
<ig:XamGrid Grid.Row="1" HorizontalAlignment="Stretch" Margin="20" Name="xamGrid" VerticalAlignment="Stretch"
ItemsSource="{Binding Products}" AutoGenerateColumns="False">
<ig:XamGrid.Columns>
<ig:TextColumn Key="SKU"/>
<ig:TextColumn Key="Name"/>
<ig:TextColumn Key="Category"/>
<ig:TextColumn Key="Supplier"/>
<ig:TextColumn Key="UnitPrice"/>
<ig:TextColumn Key="UnitsInStock"/>
<ig:CheckBoxColumn Key="OnBackOrder"/>
<ig:TextColumn Key="QuantityPerUnit"/>
</ig:XamGrid.Columns>
</ig:XamGrid>
アプリケーションをビルドして実行します
ナビゲーション アプリケーションでデータが読み込まれる前の DataGrid
ナビゲーション アプリケーションでデータが読み込まれた後の DataGrid
印刷ダイアログ。XPS Document Writer が選択されています。
XPS Document が作成されました。Report には特定のページ ヘッダー、フッター、項目データの視覚化、集計パーツが含まれます。 Report テンプレートにはすべてのレポート設定が含まれます。
Infragistics XamGrid はDataGrid と同様、 Silverlight Reporting で正しく動作します。
Silverlight Reporting に以下の機能は含まれません。
Silverlight Reporting は Silverlight 4 でレポートを作成する最適なサンプルです。
デモ アプリケーションのソース コード:SilverlightReportingDemo.zip