I'm trying to show in screen something like a grades scheme.

The first solution which I did was drawing some rows definitions and columns in a Grid, accumulating some stacks panel (inside there are some rectangles) and setting in the row. But I don't like that idea.

I was using several bucles and I'd like to show that in a document viewer. Althoug I can imagine I may create a scheme o something easier.

UPDATE 1:

At this moment, I've got a class which contains as properties:

SubjectName: string

IsCorrect: bool

And others properties but they don't matters right now. Then I have all in a List. I don't know i开发者_如何学Cf it's useful to user a LINQ function to group by SubjectName and get its average score:

Classify elements from a list to another classification with average

But I really have interest in the control.

---

Personally I would (assuming the data is in a database of some kind) host those rows in an ItemsControl of some kind. The ItemsControl would be bound to a collection of the Items.

If I had a little leeway, I would make it a plain old list box and customize the styling of the items). The bar chart portion at the end should be fairly easy to accomplish by having a rectangle whose width is bound to the grade property or whatever which is applied as a percentage of the width of the container it is in.

So I would have a Subject Class (which is created from the data source) with several properties : Name (e.g. "Times Tables") Represented by a TextBlock Grade (e.g. 52% ) Represented by a rectangle bound to a property which multiplies that value by the width of the grid in which the rectangle resides Action (e.g. "Repeat") represented by another textblock.

I will post an example in a little while.

Example

OK so The window has a very simple layout, a Grid with a listbox in it. The listbox is bound to a design time datasource that I set up in 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>

The ItemTemplate I put in the App.Xaml resource Library as I like keeping my Window and UserControl xaml files nice and clean and using resource dictionaries as much as possible to keep stuff out of the way. Anyhow, below is the 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>

And the finished product looks like this:

Now I cheated a little here. I bound the width of the border element for the grade directly to the percent. Given more time to mess with this, I probably would have made a ViewModel and had values for both the shaded part and the unshaded part which added up to 100%. Then bound column widths of a grid that I would put the border in to those values to have true percentage. Regardless, there is a starting point.