实施例

Question

我试图在屏幕上显示类似于成绩计划的内容。

enter image description here

我做的第一个解决方案是在Grid中绘制一些行定义和列，累积一些堆栈面板（内部有一些矩形）并在行中设置。但我不喜欢这个主意。

我使用了几个bucles，我想在文档查看器中显示它。 Althoug我可以想象我可以创建一个更简单的方案。

更新1：

此时，我有一个包含属性的类：

SubjectName：string

IsCorrect：bool

和其他房产但现在并不重要。然后我把所有人都放在一个清单中。我不知道用户使用LINQ函数按主题分组是否有用并获得其平均分数：

Classify elements from a list to another classification with average

但我对控制感兴趣。

Answer 1

我个人（假设数据在某种数据库中）会在某种ItemsControl中托管这些行。 ItemsControl将绑定到Items的集合。

如果我有一点余地，我会把它作为一个普通的旧列表框并自定义项目的样式）。最后的条形图部分应该很容易通过一个矩形来实现，该矩形的宽度与等级属性绑定，或者以其所在容器宽度的百分比形式应用的任何宽度。

所以我会有一个具有几个属性的Subject Class（从数据源创建）：名称（例如“Times Tables”）由TextBlock表示等级（例如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>

我在App.Xaml资源库中放置了ItemTemplate，因为我喜欢保持我的Window和UserControl xaml文件的干净和清洁，并尽可能地使用资源字典来保持东西不受影响。无论如何，下面是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>

成品看起来像这样：

Subject List

现在我在这里作弊了。我将等级的边框元素的宽度直接绑定到百分比。如果有更多时间来讨论这个问题，我可能会制作一个ViewModel，并且阴影部分和非阴影部分的值都增加了100％。然后绑定网格的列宽，我将边框放入这些值以具有真实百分比。无论如何，有一个起点。

如何在文档查看器中显示方案？

1 个答案:

实施例