从用户控件呈现的 WPF LiveChart

Question

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

这是渲染图形并将其保存为 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, 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 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>

Answer 1

我做了一些更改，让它开始工作。

在您的 ConvertGraph 方法中，将 UserControl ucGraph = new Graph 更改为 Graph ucGraph = new Graph
在你的 xaml 中，给你的 lvc:CartesianChart 起一个像 x:Name="chart"
在您的 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，这样它在保存时不会弄乱您的渲染（如果图表很复杂）。

从用户控件呈现的 WPF LiveChart

WPF LiveChart rendering from usercontrol

c#

wpf

livecharts