Silverlight에서 많은 수의 항목으로 구성된 표를 표시하는 가장 좋은 방법은 무엇입니까?

Question

현재 Silverlight2 기반 출석 등록을하고 있습니다. 나는 학생과 수업을 위해 시간이 지남에 따라 출석 시각화를 만들고 싶지만 좋은 방법을 생각해내는 데 어려움을 겪고 있습니다. 상상할 수있는 일은 학생들이 수평선을 따라 수직 축과 날짜가있는 격자입니다. 존재 여부를 나타내는 학생과 날짜 교차로의 기호가 그려져 있습니다. 비주얼라이제이션을 생성하는 데 사용되는 방법이 인쇄 된 자료를 생성하는 데 사용되는 것이 가장 이상적이지만 이상적인 것은 아닙니다. 여기

(. 실버 라이트는 어떤 내장은 SQL 서버 리포팅 서비스 또는 유사 할 것, 그래서 지원을 인쇄 없음) I 표시해야 할 데이터의 종류의 Excel에서 간단한 모형이다 :

캔버스 ItemsPanel와

• 리스트 박스와 데이터 바인딩 위치 항목 : 여기

  (물론 멋진 실버 스타일링과)

  내 현재 그것에 대해 이동하는 방법에 대한 생각입니다. 이것은 최소한의 코드가 필요하기 때문에 어떤면에서 가장 좋겠지 만 Silverlight2에서이 작업을 제대로 수행하지 못했습니다 (가장 가까운 항목은 항목 당 캔버스가있는 ListBox와 항목의 내용이 위치합니다. 그 안에). 수백 또는 수천 개의 항목을 모두 인스턴스화해야하므로 잠재적으로 매우 느립니다.

• 동적 열이있는 DataGrid. 나는 이것을 아직 시도했지만 어떤 경우에는 100+ 컬럼이있을 수 있으므로 좋은 해결책이 아닌 것 같다. 다시 한 번 많은 수의 항목에 대한 실적이 우려됩니다.
• PNG (Server-side image) 생성. Silverlight 클라이언트와 Reporting Services가 모두 동일한 이미지를 참조 할 수 있기 때문에 인쇄 문제가 해결되지만 Silverlight 클라이언트에서 모든 종류의 대화 형 작업이 배제됩니다. 이미지 해상도는 인쇄 품질의 문제가됩니다. 수천 개의 항목을 표시 할 때의로드가 서버로 푸시되므로 서버에서 이미지를 생성 할 때 초기 지연을 제외하고 클라이언트의 속도는 영향을받지 않습니다.
• Silverlight 사용자 지정 컨트롤. 캔버스에 텍스트/기호를 배치하는 사용자 지정 컨트롤을 만들 수 있습니다. 이것은 효과적으로 분산 형 차트가 될 것입니다. 이것은 인쇄 문제를 해결하지 못했습니다. 낮은 오버 헤드로 인해 ListBox보다 성능이 좋아질 수 있지만 데이터 바인딩, 항목 선택 등은 수동으로 코딩해야합니다.
• 타사 분산 형 차트를 사용하십시오. 이것은 비교적 간단 할 수 있지만 차트 라이브러리의 기능에 따라 달라집니다. 인쇄를 위해 다른 해결책을 찾아야합니다.
• SVG 또는 XAML의 서버 측 생성. 이미지 생성과 유사하지만 대신 디스플레이 또는 인쇄용 벡터 데이터를 생성합니다. SVG는 XPS 문서가 XAML을 기반으로하기 때문에 인쇄 및 내보내기에 가장 적합 할 수 있습니다. Silverlight에서 SVG를 사용하려면 XAML로 변환해야합니다. 이 작업을 수행하는 오프라인 도구가 있지만 Silverlight에서 SVG를 변환하거나 렌더링하는 기능은 없습니다.
• 많은 양의 고정 폭 텍스트를 사용하십시오. 여기에 ......x...oo.ox...x....과 같은 문자열을 생성하여 고정 너비 글꼴로 표시하는 기존 보고서가 있습니다. 이 솔루션은 특히 Silverlight가 벡터 기반 일 때 녹색 화면 터미널 일에 던져 버리는 것처럼 보이기 때문에 눈이 피로 해집니다.

기본적으로 모든 생각의 기차는 내 자신의 모든 기능을 갖춘 Silverlight /보고 엔진을 작성하는쪽으로 안내합니다. 이는 내가하려는 일의 범위를 벗어납니다. 게다가 나는 정말로 끔찍한 주문형 해킹 디스플레이 & 리포팅 시스템으로 장래의 메인테이너를 떠나고 싶지 않습니다. (나는 TheDailyWTF에 끝내고 싶지 않다.)

이것은 실버 라이트가 만든 시각화의 일종이다 - 나는 단지 내 노력을 지시 할 곳을 결정하지 않는다.

Answer 1

이 두 가지 수준의 ItemsControl (ListBox) 솔루션 만 생각할 수 있습니다. 내부 시각적 요소는 'O'또는 'X'처럼 보이도록 스타일이 적용된 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; } 
} 

그리고 실버의 측면에서 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;