문서 뷰어에서 구성표를 표시하는 방법은 무엇입니까?

Question

성적표와 같은 화면에 표시하려고합니다.

좀 스택 패널 (내부의 직사각형이있다)을 축적 그리드의 일부 행과 열로 정의 드로잉 및 행 하였다 설정 한 제 용액. 그러나 나는 그 생각을 좋아하지 않는다.

저는 여러 개의 버클을 사용했으며 문서 뷰어에서이를 보여주고 싶습니다. Althoug 내가 쉽게 뭔가 계획을 만들 수 있습니다 상상할 수 있습니다.

UPDATE 1 :

경우 SubjectName : 문자열

IsCorrect : 부울

그리고 다른 특성하지만 지금이 순간

, 나는 속성으로 포함하는 클래스를 가지고 그들은 지금 중요하지 않습니다. 그럼 나는 모두리스트에있다. 나는 경우 SubjectName에 의해 그룹에 LINQ 기능은 사용자에게 유용 있는지 알고 및 평균 점수를 얻을하지 않습니다

Classify elements from a list to another classification with average

하지만 난 정말 컨트롤에 관심을 가지고있다.

Answer 1

개인적으로 저는 (데이터가 어떤 종류의 데이터베이스에 있다고 가정합니다) 어떤 종류의 ItemsControl에서 이러한 행을 호스팅합니다. ItemsControl은 Items 컬렉션에 바인딩됩니다.

약간의 여유가 있다면 평범한 오래된 목록 상자로 만들고 항목의 스타일을 사용자 정의 할 수 있습니다. 끝에있는 막 대형 차트 부분은 너비가 등급 속성에 바인딩 된 사각형을 사용하거나 컨테이너의 너비에 대한 백분율로 적용되는 사각형을 사용하면 상당히 쉽게 이루어져야합니다.

TextBlock에 의해 표현 된 이름 (예 : "Times Tables") 등급 (예 : 52 %) 해당 값에 데이터를 곱하는 속성에 바인딩 된 사각형으로 나타냅니다. 사각형이있는 격자의 너비 다른 텍스트 블록이 나타내는 동작 (예 : "반복").

잠시 후 예를 게시합니다.

예

창은 매우 간단한 레이아웃, 거기에 목록 상자와 그리드를 가지고, 그래서 확인을 클릭합니다. 목록 상자는 Expression Blend에서 설정 한 디자인 타임 데이터 소스에 바인딩됩니다.

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:TreeViewMFagic" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" 
    x:Class="MainWindow" 
    x:Name="Window" 
    Title="MainWindow" 
    Width="640" Height="480"> 

    <Grid x:Name="LayoutRoot" MouseRightButtonDown="ShowContext" DataContext="{Binding Source={StaticResource dsSubjects}}"> 
     <ListBox ItemTemplate="{DynamicResource ItemTemplate}" ItemsSource="{Binding Collection}" HorizontalContentAlignment="Stretch"/> 
    </Grid> 
</Window> 

내 창을 유지하기 추천하고있는 UserControl의 XAML이 좋고 깨끗 파일과 길에서 물건을 유지하기 위해 가능한 한 많은 리소스 사전을 사용하는 것과 내가 App.Xaml 자원 도서관에 넣어 ItemTemplate을. 어쨌든, 아래 ItemTemplate입니다.

 <DataTemplate x:Key="ItemTemplate"> 
      <Grid Height="Auto"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="0.029*"/> 
        <ColumnDefinition Width="0.67*"/> 
        <ColumnDefinition Width="0.168*"/> 
        <ColumnDefinition Width="0.133*"/> 
       </Grid.ColumnDefinitions> 
       <TextBlock Text="{Binding SubjectName}" VerticalAlignment="Bottom" d:LayoutOverrides="Width" Grid.ColumnSpan="1" Margin="0" Grid.Column="1"/> 
       <TextBlock Text="{Binding Action}" VerticalAlignment="Top" d:LayoutOverrides="Width, GridBox" Grid.ColumnSpan="1" Grid.Column="3" Margin="0"/> 
       <Border Grid.ColumnSpan="1" Grid.Column="2" Margin="0" d:LayoutOverrides="Height" Background="#A3000000" CornerRadius="5" Width="{Binding PercentCorrect}" HorizontalAlignment="Left" > 
        <TextBlock Text="{Binding PercentCorrect}" HorizontalAlignment="Center"/> 
       </Border> 
       <TextBlock TextWrapping="Wrap" Text="{Binding Number}" d:LayoutOverrides="Width, Height"/> 
      </Grid> 
     </DataTemplate> 

는 그리고 완성 된 제품은 다음과 같습니다

지금 내가 여기에 조금 속였 어. 학년의 테두리 요소 너비를 직접 비율에 바인딩했습니다. 이 작업을 망쳐 놓는 데 더 많은 시간을 할애하여 ViewModel을 만들었을뿐 아니라 음영 처리 된 부분과 음영 처리되지 않은 부분에 대한 값이 100 %까지 증가했습니다. 그런 다음 테두리의 열 너비를 경계 값으로 사용하여 실제 백분율을 나타냅니다. 그럼에도 불구하고 출발점이 있습니다.