Silverlightに多数のアイテムのグリッドを表示する最善の方法は何ですか？

Question

現在、Silverlight2ベースの出席者登録を行っています。私は、学生や授業のために時間をかけて出席者の視覚化を作成したいが、それを行う良い方法を思いつくために苦労している。私が想像しているようなものは、水平軸に沿って縦軸と日付に学生がいるグリッドです。存在と不在を示す生徒と日付の交差点に記号があります。理想的には、視覚化を生成するために使用される方法も印刷物を生成するために使用されるが、これは必須ではない。

：ここで私は表示する必要があるデータの並べ替えのExcelで簡単なモックアップだ

（。Silverlightは何のビルトインサポートを印刷し、それはSQL Server Reporting Servicesのまたは類似する必要があると思いますので、を持っていません）キャンバスItemsPanelとデータバインド位置のアイテムと

• リストボックス：ここで

  （もちろん素晴らしいSilverlightのスタイリングを持つ）

  はそれについて移動する方法についての私の現在の考えです。これは最小限のコードしか必要としないため、いくつかの点で最適ですが、Silverlight2ではこれをうまくやっていませんでした（最も近いのは、アイテムごとのキャンバスとアイテムのコンテンツを配置したListBoxですその中で）。インスタンス化が必要な数百または数千のアイテムがあれば、非常に遅くなる可能性があります。

• 動的列を持つDataGrid。私はこれをまだ試したことがありませんが、場合によっては100以上の列があるかもしれないので、それは良い解決策ではありません。繰り返しますが、多数のアイテムでパフォーマンスが心配です。
• サーバーサイドイメージ（PNG）の生成。これは、SilverlightクライアントとReporting Servicesの両方が同じイメージを参照する可能性があるため、印刷の問題を解決しますが、これによってSilverlightクライアントでのあらゆる種類の対話性が妨げられます。画像の解像度も印刷品質の問題となります。何千ものアイテムを表示する際の負荷がサーバーにプッシュされるため、サーバー上でイメージを生成する際の初期の遅延を除いて、クライアントの速度には影響しません。
• Silverlightカスタムコントロール。キャンバスにテキスト/シンボルを配置するカスタムコントロールを作成することができました。これは事実上散布図になります。これは、印刷の問題を解決しませんでした。パフォーマンスはおそらく、オーバーヘッドが低くなるためListBoxよりも優れていますが、データバインディングやアイテムの選択などは手動で行う必要があります。
• サードパーティ散布図を使用してください。これは比較的簡単ですが、チャートライブラリの機能に依存します。印刷目的のために別の解決策が見出されなければならない。
• SVGまたはXAMLのサーバーサイド生成。イメージの生成に似ていますが、代わりに表示または印刷用のベクトルデータを生成します。 XPSドキュメントはXAMLをベースにしていますが、SVGは印刷とエクスポートに最適です。 SilverlightでSVGを使用するには、XAMLへの変換が必要です。これを行うためのオフラインツールがありますが、Silverlight内でSVGを変換またはレンダリングする機能はありません。
• 大量の固定幅のテキストを使用します。ここには、固定幅フォントで表示される......x...oo.ox...x....のような文字列を生成することによって、このようなことを行う古いレポートがあります。このソリューションは、特にSilverlightがベクタベースの場合には、画面の終わりの日に戻ってしまうように見えるため、私の目を傷つけます。

基本的に考えてみると、私がやろうとしていることの範囲を超えて、完全に機能するSilverlight/Reportingエンジンを書くようになります。私は実際には、いくつかのひどいカスタムビルドのハッキーディスプレイ&レポーティングシステムで将来のメンテナーを残したいと思いません。 （私はTheDailyWTFで終わりません！）

これはSilverlightが作成する視覚化の一種です。私は自分の努力をどこに指示するかを決めることができません。

Answer 1

これについては、単純な2レベルのItemsControl（ListBox）ソリューションしか考えられません。また、内部の視覚的要素は、 'O'や 'X'のように見えるStyled CheckBoxでもかまいません。もちろん、チェックボックスに合わせて上部にDateHeaderコレクションが必要です。

alt text http://img339.imageshack.us/img339/8695/grid.jpg

XAML

<UserControl.Resources> 
    <DataTemplate x:Key="CellTemplate"> 
     <Grid Width="25" Height="25"> 
      <CheckBox IsChecked="{Binding IsPresent}" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
     </Grid> 
    </DataTemplate> 
    <DataTemplate x:Key="RowTemplate"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="80"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <TextBlock Margin="4,0,0,0" Text="{Binding Name}" TextWrapping="Wrap"/> 
      <ItemsControl ItemsSource="{Binding WorkingDays}" HorizontalAlignment="Left" VerticalAlignment="Top" ItemTemplate="{StaticResource CellTemplate}" Grid.Column="1" > 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <StackPanel Orientation="Horizontal"/>  
        </ItemsPanelTemplate>    
       </ItemsControl.ItemsPanel> 
      </ItemsControl> 
     </Grid> 
    </DataTemplate> 
</UserControl.Resources> 
<ItemsControl x:Name="lstWorkingDaysMain" ItemsSource="{Binding}" ItemTemplate="{StaticResource RowTemplate}" > 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <StackPanel Orientation="Vertical"/> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
</ItemsControl> 

C＃の

public class Student 
{ 
    public Student() 
    { 
     WorkingDays = new List<WorkingDay>(); 
    } 

    public string Name { get; set; } 
    public List<WorkingDay> WorkingDays { get; set; } 
} 

public class WorkingDay 
{ 
    public bool IsPresent{get; set;} 
    public DateTime Date { get; set; } 
} 

とSilverlightの面でxaml.csオフトピック

List<Student> students = new List<Student>(); 

     Student student = new Student() { Name = "Aaaaaa" }; 
     student.WorkingDays.Add(new WorkingDay() { Date=new DateTime(2009,5,5), IsPresent=true}); 
     student.WorkingDays.Add(new WorkingDay() { Date=new DateTime(2009,5,6), IsPresent=true}); 
     student.WorkingDays.Add(new WorkingDay() { Date=new DateTime(2009,5,7), IsPresent=true}); 
     student.WorkingDays.Add(new WorkingDay() { Date=new DateTime(2009,5,8), IsPresent=true}); 
     student.WorkingDays.Add(new WorkingDay() { Date=new DateTime(2009,5,9), IsPresent=true}); 
     student.WorkingDays.Add(new WorkingDay() { Date=new DateTime(2009,5,10), IsPresent=true}); 
     student.WorkingDays.Add(new WorkingDay() { Date=new DateTime(2009,5,11), IsPresent=true}); 
     student.WorkingDays.Add(new WorkingDay() { Date=new DateTime(2009,5,12), IsPresent=true}); 
     students.Add(student); 

     student = new Student() { Name = "Bbbbbb" }; 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 5), IsPresent = true }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 6), IsPresent = true }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 7), IsPresent = true }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 8), IsPresent = false }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 9), IsPresent = false }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 10), IsPresent = true }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 11), IsPresent = true }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 12), IsPresent = true }); 
     students.Add(student); 


     student = new Student() { Name = "Cccccc" }; 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 5), IsPresent = true }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 6), IsPresent = true }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 7), IsPresent = true }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 8), IsPresent = false }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 9), IsPresent = false }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 10), IsPresent = true }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 11), IsPresent = true }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 12), IsPresent = false }); 
     students.Add(student); 


     student = new Student() { Name = "Dddddd" }; 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 5), IsPresent = false }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 6), IsPresent = true }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 7), IsPresent = true }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 8), IsPresent = true }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 9), IsPresent = false }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 10), IsPresent = true }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 11), IsPresent = true }); 
     student.WorkingDays.Add(new WorkingDay() { Date = new DateTime(2009, 5, 12), IsPresent = true }); 
     students.Add(student); 

     this.DataContext = students;