用户控件的WPF LiveChart渲染

问题描述

我正在尝试从用户控件渲染笛卡尔图表。 该文本块可以很好地呈现，但不幸的是该图表未显示。 我不知道如何解决这个问题。有人可以给我一个提示吗？

这是呈现图形并将其另存为png文件的功能。

public void ConvertGraph(Object dataContext)
        {
            UserControl ucGraph = new Graph
            {
                DataContext = dataContext
            };
            ucGraph.Measure(new Size(400,400));
            ucGraph.Arrange(new Rect(new Size(400,400)));
            ucGraph.UpdateLayout();

            rendertargetBitmap bmp = new rendertargetBitmap(400,400,96,PixelFormats.Pbgra32);
            
            bmp.Render(ucGraph);

            var encoder = new PngBitmapEncoder();

            encoder.Frames.Add(BitmapFrame.Create(bmp));

            using (Stream stm = File.Create(@"c:\Temp\test.png"))
                encoder.Save(stm);

        }

这是UserControl。

<UserControl x:Class="LogAnalyzerWpf.Views.PrintViews.Graph"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:LogAnalyzerWpf.Views.PrintViews"
             xmlns:vm="clr-namespace:LogAnalyzerWpf.viewmodels"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800"
             Background="White">
    <Grid>
        <Grid.RowDeFinitions>
            <RowDeFinition Height="20"/>
            <RowDeFinition/>
        </Grid.RowDeFinitions>
        <TextBlock Grid.Row="0" Text="{Binding HighLevelAlarm}"></TextBlock>
        
        <lvc:CartesianChart disableAnimations="True" Grid.Column="0" Grid.Row="1" LegendLocation="Bottom" Series="{Binding seriesCollection}">
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Title="Date" Labels="{Binding DateTimeValues}"></lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY>
                <lvc:Axis Title="Temperature (°C)"/>
                <lvc:Axis Title="Level (mm)" Position="RightTop" />
            </lvc:CartesianChart.AxisY>
        </lvc:CartesianChart>
    </Grid>
</UserControl>

解决方法

我通过进行一些更改使它起作用。

1. 在您的ConvertGraph方法中，将UserControl ucGraph = new Graph更改为Graph ucGraph = new Graph
2. 在您的xaml中，为您的lvc:CartesianChart命名，例如x:Name="chart"
3. 在您的ConvertGraph方法中，在调用ucGraph.UpdateLayout()之前，还要调用ucGraph.chart.Update(true,true);，这将迫使它重新绘制自身

此处概述的说明：https://github.com/Live-Charts/Live-Charts/blob/develop/Examples/Wpf/CartesianChart/Chart%20to%20Image/ChartToImageSample.xaml.cs

作为旁注，我还建议将图表上的DisableAnimations设置为true，这样在保存时它不会与您的渲染混乱（如果图表是复杂）。