c# - WPF C#设计题中绘制图表

Question

一个月前我有一个项目，我在一个使用 Windows 窗体的应用程序中绘制了一个股票图表。我通过创建一个可以拉伸(stretch)到窗口尺寸的位图来做到这一点。这将允许我的图表随窗口调整大小。

我现在正在使用 WPF 扩展项目。我一直在尝试为该项目进行设计，但我似乎对制作相同图表的最佳方法一无所知。我看过 Canvas 、网格和其他一些控件。我以为我在 Canvas 上走在正确的轨道上，但是当我调整窗口大小时，我的画会留在同一个地方。我想我今晚发帖的目的是为了获得一些想法，帮助我集思广益为我的项目设计。

感谢所有建议和问题。

谢谢，约瑟夫

Answer 1

(意识到这一点最多只能解决这个相当古老的问题的一个子集，因为它只是一种图表类型...)

首先，在 Grid 中创建一个条形图作为 Ed suggests非常简单。这是一个快速而肮脏的版本:

将 Grid 添加到您的 Window 的 XAML。仅用于测试，这里有一个完全填满 Window 的窗口。

<Grid>
    <Grid
        Name="myGrid"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        Width="auto"
        Height="auto"
        Margin="10,10,10,10"
    />
</Grid>

现在将这两个实用函数插入到项目的某处。它们为 x 轴提供简单的单色列和无样式但居中的标签文本。

我认为唯一令人讨厌的问题是 _placeSingleColorColumn 调用中的 maxHeight。

Worth mentioning: I don't have labels for the y-axis in this quick & dirty version.

private void _placeSingleColorColumn(Grid grid, Color color, int height, int colNum, int maxHeight)
{
    Brush brush = new SolidColorBrush(color);

    Rectangle rect = new Rectangle();
    rect.Fill = brush;
    Grid.SetColumn(rect, colNum);
    Grid.SetRow(rect, maxHeight - height);
    Grid.SetRowSpan(rect, height);

    grid.Children.Add(rect);
}

private void _createLabels(Grid grid, string[] labels)
{
    RowDefinition rowDefnLabels = new RowDefinition();
    grid.RowDefinitions.Add(rowDefnLabels);

    for (int i = 0; i < labels.Length; i++)
    {
        TextBlock block = new TextBlock();
        block.Text = labels[i];
        block.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
        Grid.SetColumn(block, i);
        Grid.SetRow(block, grid.RowDefinitions.Count);
        grid.Children.Add(block);
    }
}

原来如此。这里有一些非常快速和肮脏的示例代码，用于创建带有一些示例数据的 10 x 10 网格。

public void createGrid10x10()
{
    Random random = new Random();

    for (int i=0; i<10; i++)
    {
        ColumnDefinition colDef = new ColumnDefinition();
        myGrid.ColumnDefinitions.Add(colDef);

        RowDefinition rowDef = new RowDefinition();
        myGrid.RowDefinitions.Add(rowDef);

        Color color = i % 2 == 0 ? Colors.Red : Colors.Blue;

        _placeSingleColorColumn(this.myGrid, color, random.Next(1,11), i, 10);
    }
    string[] aLabels = "Dogs,Cats,Birds,Snakes,Rabbits,Hamsters,Horses,Rats,Bats,Unicorns".Split(',');
    _createLabels(this.myGrid, aLabels);
}

在您的 MainWindow 构造函数中添加一行，您就完成了，afaict。

public MainWindow()
{
    InitializeComponent();
    this.createGrid10x10();
}

现在您已经有了一个条形图，它会随着窗口大小的调整等而调整大小并保持比例。

如果您了解以上内容，添加更多标签(顶部的条形值、y 轴标签等)应该非常简单。只需放入另一列和/或行，创建您的 TextBlock，并将它们放在正确的位置。