代码之家 › 专栏 › 技术社区 › Thomas Andreè Wang

以编程方式生成数据并将其绑定到现代UI图表

modern-ui charts wpf .net c#

Thomas Andreè Wang · 技术社区 · 11 年前

我无法将数据绑定到Modern UI Chart控件。

我并没有像创建XAML元素然后绑定到该元素的常见方式那样使用它,我的目标是创建元素并在内存中呈现它,然后获取元素的图像。

我下面的代码用于创建和添加内容,图像的渲染效果良好。

    void generateGraphImg()
    {
        PieChart pc = new PieChart();
        ObservableCollection<TestClass>  Errors = new ObservableCollection<TestClass>();
        Errors.Add(new TestClass() { Category = "Globalization", Number = 75 });
        Errors.Add(new TestClass() { Category = "Features", Number = 2 });
        Errors.Add(new TestClass() { Category = "ContentTypes", Number = 12 });
        Errors.Add(new TestClass() { Category = "Correctness", Number = 83 });
        Errors.Add(new TestClass() { Category = "Best Practices", Number = 29 });

        ChartSeries Charts = new ChartSeries();
        Charts.SeriesTitle = "Errors";
        Charts.DisplayMember = "Category";
        Charts.ValueMember = "Number";
        Charts.ItemsSource = Errors;
        pc.Series.Add(Charts);

        pc.ChartTitle = "Minimal Pie Chart";
        pc.ChartSubTitle = "Chart with fixed width and height";

        makeImgFromControl(pc, @"C:\Modern UI IMG\img.bmp");
    }
    void makeImgFromControl(UIElement control, string saveTo)
    {
        Viewbox viewbox = new Viewbox();
        viewbox.Child = control; //control to render
        viewbox.Measure(new System.Windows.Size(200, 200));
        viewbox.Arrange(new Rect(0, 0, 200, 200));
        viewbox.UpdateLayout(); //On PiePiece DrawGeometry() happens here
        RenderTargetBitmap render = new RenderTargetBitmap(500,500, 150, 150, PixelFormats.Pbgra32);
        render.Render(viewbox);
        PngBitmapEncoder encoder = new PngBitmapEncoder();
        encoder.Frames.Add(BitmapFrame.Create(render));
        using (Stream s = File.Create(saveTo))
        {
            encoder.Save(s);
        }
    }

数据的绑定不会呈现,但是,标题和子标题会呈现任何想法,为什么?

2 回复 | 直到 11 年前

Thomas Andreè Wang 11 年前

解决方案隐藏在LayoutUpdated中,在对Modern UI Chart的代码进行了一段时间的黑客攻击之后,我才恍然大悟。

    void generateGraphImg()
    {
        PieChart pc = new PieChart();
        pc.LayoutUpdated += pc_LayoutUpdated;
        ObservableCollection<TestClass> Errors = new ObservableCollection<TestClass>();
        Errors.Add(new TestClass() { Category = "Globalization", Number = 75 });
        Errors.Add(new TestClass() { Category = "Features", Number = 2 });
        Errors.Add(new TestClass() { Category = "ContentTypes", Number = 12 });
        Errors.Add(new TestClass() { Category = "Correctness", Number = 83 });
        Errors.Add(new TestClass() { Category = "Best Practices", Number = 29 });

        ChartSeries Charts = new ChartSeries();
        Charts.SeriesTitle = "Errors";
        Charts.DisplayMember = "Category";
        Charts.ValueMember = "Number";
        Charts.ItemsSource = Errors;
        pc.Series.Add(Charts);

        pc.ChartTitle = "Minimal Pie Chart";
        pc.ChartSubTitle = "Chart with fixed width and height";

        makeImgFromControl(pc, @"C:\Modern UI IMG\img.bmp");
    }

    void pc_LayoutUpdated(object sender, EventArgs e)
    {
        RenderTargetBitmap render = new RenderTargetBitmap(500,500, 150, 150, PixelFormats.Pbgra32);
        render.Render(viewbox);
        PngBitmapEncoder encoder = new PngBitmapEncoder();
        encoder.Frames.Add(BitmapFrame.Create(render));
        using (Stream s = File.Create(@"C:\Modern UI IMG\img.bmp"))
        {
            encoder.Save(s);
        }
    }

    Viewbox viewbox;
    void makeImgFromControl(UIElement control, string saveTo)
    {
        viewbox = new Viewbox();
        viewbox.Child = control; //control to render
        viewbox.Measure(new System.Windows.Size(200, 200));
        viewbox.Arrange(new Rect(0, 0, 200, 200));
        viewbox.UpdateLayout();
    }

Eren Ersönmez 11 年前

尝试分配 ItemSource 之后添加了 ChartSeries 。因此更改以下顺序:

Charts.ItemsSource = Errors;
pc.Series.Add(Charts);

至:

pc.Series.Add(Charts);
Charts.ItemsSource = Errors;

我进行了测试,这似乎有所不同。不完全确定原因,但图表对象可能仅在收到集合更改通知时更新。

更新:查看源代码,饼图似乎由PiePiece控件组成,其构造函数中包含:

public PiePiece()
{
    ...
    Loaded += PiePiece_Loaded;
}

void PiePiece_Loaded(object sender, RoutedEventArgs e)
{
      DrawGeometry();
}

所以它似乎只在实际情况下画自己 Loaded .