WPF使用XAML实现报表的一种思路（支持外部加载）

在WPF里做报告这一块以前用过多种实现方式，有用过RDLC、XPS等，看过一些开源的报表控件，跟RDLC的原理都差不多。

最近刚好又要实现报表的功能，就想使用一种新的方法：直接使用XAML实现，直接将界面呈现的内容打印出来。

 

打印WPF元素

在我前面的文章中，介绍过如何使用PrintDialog打印WPF元素，

https://www.cnblogs.com/zhaotianff/p/7340554.html

借助这种方法，我们可以直接打印整个WPF界面呈现的内容。

 

简易的报告模板

WPF提供了XamlReader/XamlWriter类来操作Xaml，可以实现XAML加载和保存。

动态加载的Xaml也是支持绑定的，我们可以借助这种模式来实现简易的报告模板功能。

 

首先我们创建一个报表内容，如下所示

 <Grid x:Name="grid1">
     <Image Source="{Binding Image}" Stretch="Uniform" Margin="0,0,0,20"></Image>
     <Label Content="{Binding Text}" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontFamily="Arial"></Label>
 </Grid>

 

然后我们使用XamlWriter类，将Xaml保存出来

 var xaml = XamlWriter.Save(this.grid1);
 System.IO.File.WriteAllText("Template.xaml", xaml);

 

保存出来的内容如下

 

可以看到内容这里都是为null，我们可以改成绑定，如下所示：

<Grid Name="grid1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Image Source="{Binding Image}" Stretch="Uniform" Margin="0,0,0,20" />
    <Label Content="{Binding Text}" FontFamily="Arial" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Grid>

 

定义一个ViewModel用于绑定

这里创建了几个简单的属性用于界面显示

public class ReportViewModel : INotifyPropertyChanged
{
    private string image;

    public string Image
    {
        get => this.image;
        set
        {
            this.image = value;
            RaiseChanged("Image");
        }
    }

    private string text;
    public string Text
    {
        get => this.text;
        set
        {
            this.text = value;
            RaiseChanged("Text");
        }
    }

    private int width;
    public int Width
    {
        get => this.width;
        set
        {
            this.width = value;
            RaiseChanged("Width");
        }
    }

    private int height;
    public int Height
    {
        get => this.height;
        set
        {
            this.height = value;
            RaiseChanged("Height");
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged;

    private void RaiseChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

 

新建一个界面，用于加载这个报告模板显示

 <Grid Name="grid">
     <Grid.RowDefinitions>
         <RowDefinition/>
         <RowDefinition Height="30"/>
     </Grid.RowDefinitions>

     <Button Content="加载报告内容" HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Center" Margin="-120,0,0,0" Width="88" Height="28" Click="Button_Click"></Button>
     <Button Content="打印" HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Center" Margin="120,0,0,0" Width="88" Height="28" Click="Button_Click_1"></Button>

 </Grid>

 

加载报告内容按钮事件

 private void Button_Click(object sender, RoutedEventArgs e)
 {
     var xaml = File.ReadAllText(Environment.CurrentDirectory + "\\Template.xaml");
     using (StringReader stringReader = new StringReader(xaml))
     {
         XmlReader xmlReader = XmlReader.Create(stringReader);
         dynamicGrid = (Grid)XamlReader.Load(xmlReader); //dynamicGrid为全局Grid变量
         this.grid.Children.Add(dynamicGrid);
         ReportViewModel reportModel = new ReportViewModel();
         reportModel.Image = "https://myfreetime.cn/usr/uploads/2024/4/%E6%B8%85%E5%B9%B3%E8%B0%83%C2%B7%E5%90%8D%E8%8A%B1%E5%80%BE%E5%9B%BD%E4%B8%A4%E7%9B%B8%E6%AC%A2/jk.jpg";
         reportModel.Text = "HelloWorld";
         reportModel.Width = 300;
         reportModel.Height = 600;
         dynamicGrid.DataContext = reportModel;
     }           
 }

 

 

在界面点击加载后，可以看到内容被显示出来了

 

打印按钮事件

private void Button_Click_1(object sender, RoutedEventArgs e)
{
    PrintDialog pd = new PrintDialog();
    Window window = Window.GetWindow(dynamicGrid);
    Point point = dynamicGrid.TransformToAncestor(window).Transform(new Point(0, 0));//获取当前控件 的坐标
    dynamicGrid.Measure(new Size(dynamicGrid.ActualWidth, dynamicGrid.ActualHeight));
    dynamicGrid.Arrange(new Rect(new Size(dynamicGrid.ActualWidth, dynamicGrid.ActualHeight)));
    pd.PrintVisual(dynamicGrid, "");
    dynamicGrid.Arrange(new Rect(point.X, point.Y, dynamicGrid.ActualWidth, dynamicGrid.ActualHeight));//设置为原来的位置
}

 

修改本地的XAML模板文件，就可以实现动态变更模板，例如，我增加Width和Height字段显示

 

 

到这一步，我们就实现了一个简易的报告模板功能，一些小型的报表需求应该还是能满足的。最重要的是可以直接使用XAML，开发起来比较方便。

 

 

多页报告

多页报告时主要用到FixedDocument对象，首先我们创建一个FixedDocument对象，并设置参数

 FixedDocument document = new FixedDocument();
 //设置纸张大小
 document.DocumentPaginator.PageSize = new Size(600, 800);

 

为FixedDocument增加一页

  //增加一页
  FixedPage page1 = new FixedPage();
  page1.Width = document.DocumentPaginator.PageSize.Width;
  page1.Height = document.DocumentPaginator.PageSize.Height;

 

我们这里增加一个Image控件放到第一页

//增加一个图像显示到第一页
Image image = new Image();
image.Width = document.DocumentPaginator.PageSize.Width;
image.Height = document.DocumentPaginator.PageSize.Height;
image.Stretch = Stretch.Uniform;
image.Source = new BitmapImage(new Uri("https://myfreetime.cn/usr/uploads/2024/4/%E6%B8%85%E5%B9%B3%E8%B0%83%C2%B7%E5%90%8D%E8%8A%B1%E5%80%BE%E5%9B%BD%E4%B8%A4%E7%9B%B8%E6%AC%A2/jk.jpg"));
page1.Children.Add(image);

 

然后将页添加到FixedDocument中

 //添加页到Document中
 PageContent page1Content = new PageContent();
 ((IAddChild)page1Content).AddChild(page1);
 document.Pages.Add(page1Content);

 

用上面一样的方法添加第二页内容

 FixedPage page2 = new FixedPage();
 page2.Width = document.DocumentPaginator.PageSize.Width;
 page2.Height = document.DocumentPaginator.PageSize.Height;
 TextBlock page2Text = new TextBlock();
 page2Text.Text = "HelloWorld";
 page2Text.Width = document.DocumentPaginator.PageSize.Width;
 page2Text.Height = document.DocumentPaginator.PageSize.Height;
 page2Text.FontSize = 40;
 page2Text.HorizontalAlignment = HorizontalAlignment.Center;
 page2Text.VerticalAlignment = VerticalAlignment.Center;
 page2.Children.Add(page2Text);
 PageContent page2Content = new PageContent();
 ((IAddChild)page2Content).AddChild(page2);
 document.Pages.Add(page2Content);

 

此时我们已经拥有一个多页的文档了，借用PrintDialog的PrintDocument功能，就可以打印多页文档。

PrintDialog printDialog = new PrintDialog();
printDialog.PrintDocument(document.DocumentPaginator, "");

 

打印输出效果如下：

 

实时预览多页报告

使用DocumentViewer控件，就可以预览FixedDocument内容。

XAML

  <DocumentViewer x:Name="viewer"></DocumentViewer>

C#

 this.viewer.Document = document;

 

显示效果

 

从模板加载多页报告

我们将前面的模板XAML文件进行升级，使其具备多页的功能，如下：

<Pages>
    <FixedPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <Grid >
        <Image Source="{Binding Image}" Stretch="Uniform" Margin="0,0,0,20" />
        <Label Content="{Binding Text}" FontFamily="Arial" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
        <Label Content="{Binding Width}" FontFamily="Arial" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
        <Label Content="{Binding Height}" FontFamily="Arial" HorizontalAlignment="Left" Margin="60,0,0,0" VerticalAlignment="Bottom" />
    </Grid>
    </FixedPage>
    <FixedPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <Grid >
        <Border CornerRadius="10">
            <Image Source="{Binding Image}" Stretch="Uniform" Margin="0,0,0,20" />
        </Border>
    </Grid>
    </FixedPage>
</Pages>

 

因为XamlReader是不能识别Pages标签的，所以我们需要进行简单的处理

//加载XAML
var xaml = System.IO.File.ReadAllText(Environment.CurrentDirectory + "\\Template.xaml");
StringReader sr = new StringReader(xaml);
XDocument doc = XDocument.Load(sr);
var pages = doc.Root.Elements();

 

pages就是FixedPage的集合，此时我们再用XamlReader进行读取就可以识别了。

 

完整的动态读取代码如下：

//加载XAML
var xaml = System.IO.File.ReadAllText(Environment.CurrentDirectory + "\\Template.xaml");
StringReader sr = new StringReader(xaml);
XDocument doc = XDocument.Load(sr);
var pages = doc.Root.Elements();

FixedDocument document = new FixedDocument();
//设置纸张大小
document.DocumentPaginator.PageSize = new Size(600, 800);

//动态读取第一页
StringReader xamlReader = new StringReader(pages.ElementAt(0).ToString());
XmlReader xmlReader = XmlReader.Create(xamlReader);
FixedPage page1 = (FixedPage)XamlReader.Load(xmlReader);
var page1Container = page1.Children[0] as Grid;
page1Container.Width = document.DocumentPaginator.PageSize.Width;
page1Container.Height = document.DocumentPaginator.PageSize.Height;
ReportViewModel reportModel = new ReportViewModel();
reportModel.Image = "https://myfreetime.cn/usr/uploads/2024/4/%E6%B8%85%E5%B9%B3%E8%B0%83%C2%B7%E5%90%8D%E8%8A%B1%E5%80%BE%E5%9B%BD%E4%B8%A4%E7%9B%B8%E6%AC%A2/jk.jpg";
reportModel.Text = "HelloWorld";
reportModel.Width = 300;
reportModel.Height = 600;
//设置ViewModel
page1.DataContext = reportModel;

//添加页到Document中
PageContent page1Content = new PageContent();
((IAddChild)page1Content).AddChild(page1);
document.Pages.Add(page1Content);

//动态读取第二页
StringReader xamlReader2 = new StringReader(pages.ElementAt(1).ToString());
XmlReader xmlReader2 = XmlReader.Create(xamlReader2);
FixedPage page2 = (FixedPage)XamlReader.Load(xmlReader2);
var page2Container = page2.Children[0] as Grid;
page2Container.Width = document.DocumentPaginator.PageSize.Width;
page2Container.Height = document.DocumentPaginator.PageSize.Height;
ReportViewModel reportModel2 = new ReportViewModel();
reportModel2.Image = "https://myfreetime.cn/usr/uploads/2024/4/%E6%B8%85%E5%B9%B3%E8%B0%83%C2%B7%E5%90%8D%E8%8A%B1%E5%80%BE%E5%9B%BD%E4%B8%A4%E7%9B%B8%E6%AC%A2/jk2.jpg";
reportModel2.Text = "HelloWorld";
//设置ViewModel
page2.DataContext = reportModel2;

//添加页到Document中
PageContent page2Content = new PageContent();
((IAddChild)page2Content).AddChild(page2);
document.Pages.Add(page2Content);

viewer.Document = document;
sr.Dispose();
xamlReader.Dispose();
xamlReader2.Dispose();

 

读取完成后，显示在DocumentViewer控件中，效果如下：

 

到这里基础的打印功能应该都是可以实现了，在给客户使用时，可以通过XAML设计新的报告模板进行分发。

 

如果需要将报告打印为PDF，可以参考我前面的文章：

https://www.cnblogs.com/zhaotianff/p/17247683.html

 

示例代码

示例代码 

 

参考资料：

https://www.nbdtech.com/Blog/archive/2009/03/19/wpf-printing-part-1-printing-visuals.aspx

https://www.nbdtech.com/Blog/archive/2009/04/20/wpf-printing-part-2-the-fixed-document.aspx

https://www.nbdtech.com/Blog/archive/2009/05/19/wpf-printing-part-3-ndash-sizes.aspx

https://www.nbdtech.com/Blog/archive/2009/07/09/wpf-printing-part-4-ndash-print-preview.aspx