silverlight - Silverlight で多数のアイテムのグリッドを表示する最良の方法は何ですか?

Question

現在、Silverlight2 ベースの出席簿に取り組んでいます。生徒や授業の出欠状況を可視化したいのですが、なかなかうまくいきません。私が想像しているのは、縦軸に学生、横軸に日付が表示されたグリッドで、学生と日付の交点に在席または不在を示す記号があります。理想的には、ビジュアライゼーションの生成に使用される方法を印刷物の生成にも使用しますが、これは必須ではありません。(Silverlight には組み込みの印刷サポートがないため、SQL Server Reporting Services などである必要があります。)

これは、表示する必要がある種類のデータの Excel での簡単なモックアップです。モックアップチャート

(明らかに素晴らしい Silverlight のスタイルで)

どうすればいいのか、現時点での私の考えは次のとおりです。

Canvas ItemsPanel とデータバインドされた配置アイテムを持つ ListBox。これは、必要なコード量が最も少ないため、いくつかの点で最適ですが、Silverlight2 ではこれをうまく行うことができませんでした (最も近いのは、項目ごとに Canvas があり、項目の内容が内部に配置されている 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 が作成された一種の視覚化です。自分の努力をどこに向けるべきかを決めることができません。

score 4 · Accepted Answer

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

代替テキスト 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; }
}

そして、コードビハインド 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;

silverlight - Silverlight で多数のアイテムのグリッドを表示する最良の方法は何ですか?

1 に答える 1

Related

Reference