在WPF C＃设计问题中绘制图表

问题描述：

一个月前，我有一个项目，其中使用Windows窗体在应用程序中绘制了一个股票图表。我是通过创建可以扩展到窗口尺寸的位图来实现的。这将允许我的图表随窗口调整大小。

I had a project a month ago where I drew a stock chart in an application using Windows Forms. I did this by creating a bitmap that would stretch to the dimensions of the window. This would allow my chart to resize with the window.

我现在正在使用WPF扩展项目。我一直在尝试为该项目进行设计，但是似乎无法对制作相同图表的最佳方法有所了解。我看过画布，网格和其他一些控件。我以为我在画布上走的路正确，但是当我调整窗口大小时，我的绘图将停留在同一位置。我想我今晚的帖子的目的是要获得一些想法，以帮助我为我的项目集思广益。

I am now expanding the project using WPF. I have been trying to work on my design for the project, but I cant seem to get any idea on the best way to do the same chart. I have looked at canvases, grids, and a few other controls. I thought I was on the right track with the canvas, but when I would resize the window, my drawing would stay in the same spot. I guess the point of my post tonight is to get some ideas to help me brainstorm a design for my project.

感谢所有建议和问题。

谢谢，
Joseph

Thanks, Joseph

答

（最好将此地址作为一个子集这个相当古老的问题，因为它只是一种图表类型...）

(Realizing this addresses at best a subset of this fairly old question, since it's only one chart type...)

只是一遍，在 Grid中创建了条形图为 Ed建议非常简单。这是一个快速而肮脏的版本：

Just fwiw, creating a bar graph in a Grid as Ed suggests is pretty straightforward. Here's a quick and dirty version:

在您的 Window $窗口中添加 Grid c $ c>的XAML。只是为了测试，这是一个完全填充 Window 的窗口。

Add a Grid to your Window's XAML. Just for testing, here's one that fills the Window entirely.

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

现在将这两个实用程序功能插入项目中的某个位置。这些提供了简单的单色列和x轴的未样式化但居中的标签文本。

Now insert these two utility functions somewhere in your project. These provide simple, single-color columns and unstyled, but centered, label text for the x-axis.

我认为唯一讨厌的字符是 _placeSingleColorColumn 调用中> maxHeight 。

I think the only nasty kludge is the maxHeight in the _placeSingleColorColumn call.

值得一提的：在此快速&快捷键中，我没有y轴标签

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网格。

That's really it. Here's some insanely quickly and dirty example code to create a 10 by 10 grid with some sample data.

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 $ c中添加一行

Add one line to your MainWindow constructor, and you're done, afaict.

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

现在您有了一个条形图，该条形图将调整大小并保持成比例调整窗口大小等。

Now you've got a bar graph that'll resize and stay proportional as the window is resized, etc.

正在添加如果您了解上述内容，那么更多标签（顶部的条形值，y轴标签等）应该非常简单。只需放入另一列和/或行，创建您的 TextBlock s，然后将它们放置在正确的位置即可。

Adding more labels (bar values on top, y-axis labels, etc) should be pretty straightforward if you understand the above. Just throw in another column and/or row, create your TextBlocks, and place them in the right locations.

在WPF C＃设计问题中绘制图表

相关推荐