This quick start familiarizes you with the creation of flexreport(.flxr file) and populating it with data through code in a WPF application. The following image shows a flexreport created through code.

The below section gets you started with displaying report in a FlexViewer control in .NET and .NET Framework Editions.

Create report definition

1. In Visual Studio, create a new WPF Application.
2. In the Solution Explorer, right click Dependencies and select Manage NuGet Packages.
3. In NuGet Package Manager, select Nuget.org as the Package source.
4. Search and select the following package and click Install.
   • C1.WPF.FlexReport
   • C1.WPF.FlexViewer
   Install C1.Xaml.WPF.Report and C1.Xaml.WPF.Viewer packages in case of .NET Framework.
5. In the XAML view, add a FlexViewer control.
6. Define report layout by instantiating an object of Layout class and specify the orientation and width of the report as illustrated in the below code snippet.

   C#	Copy Code
   //defining layout Layout l = flexReport.Layout; l.Orientation = OrientationEnum.Portrait; l.Width = 6.5 * 1440;

7. Define report header by creating a new section using the Section class as illustrated in the following code snippet.

   C#

   Copy Code

   //create a report header s = flexReport.Sections[SectionTypeEnum.Header]; s.Height = 640; s.Visible = true; s.BackColor = Color.FromRgb(200, 200, 200); TextField textFld1 = new TextField(); textFld1.Name = "FldTitle"; textFld1.Text = "Product Report"; textFld1.Left = 0; textFld1.Top = 0; textFld1.Width = 9360; textFld1.Height = 640; textFld1.Font.Size = 24; textFld1.Font.Bold = true; textFld1.ForeColor = Color.FromRgb(0, 0, 100); textFld1.BackColor = Color.FromRgb(135,206,235); flexReport.Sections.Header.Fields.Add(textFld1);

8. Define page header of the report as illustrated in the following code snippet:

   C#

   Copy Code

   //create a page header with field labels s = flexReport.Sections[SectionTypeEnum.PageHeader]; s.Height = 500; s.Visible = true; flexReport.Font.Bold = true; TextField textFld4 = new TextField(); textFld4.Name = "LblPID"; textFld4.Text = "PID"; textFld4.Left = 0; textFld4.Top = 50; textFld4.Width = 400; textFld4.Height = 300; textFld4.Align = FieldAlignEnum.RightTop; flexReport.Sections.PageHeader.Fields.Add(textFld4); TextField textFld5 = new TextField(); textFld5.Name = "LblName"; textFld5.Text = "Name"; textFld5.Left = 800; textFld5.Top = 50; textFld5.Width = 900; textFld5.Height = 300; flexReport.Sections.PageHeader.Fields.Add(textFld5); TextField textFld6 = new TextField(); textFld6.Name = "LblSupplier"; textFld6.Text = "Supplier"; textFld6.Left = 2000; textFld6.Top = 50; textFld6.Width = 900; textFld6.Height = 300; flexReport.Sections.PageHeader.Fields.Add(textFld6); TextField textFld7 = new TextField(); textFld7.Name = "LblUnitPrice"; textFld7.Text = "UnitPrice"; textFld7.Left = 3500; textFld7.Top = 50; textFld7.Width = 2400; textFld7.Height = 300; flexReport.Sections.PageHeader.Fields.Add(textFld7); TextField textFld8 = new TextField(); textFld8.Name = "LblDiscontinued"; textFld8.Text = "Discontinued"; textFld8.Left = 5000; textFld8.Top = 50; textFld8.Width = 8000; textFld8.Height = 300; flexReport.Sections.PageHeader.Fields.Add(textFld8); flexReport.Font.Bold = false; ShapeField shpfld2 = new ShapeField(); shpfld2.Name = "FldLine"; shpfld2.ShapeType = ShapeType.Line; shpfld2.Left = 0; shpfld2.Top = 400; shpfld2.Width = flexReport.Layout.Width; shpfld2.Height = 20; flexReport.Sections.PageHeader.Fields.Add(shpfld2);

9. Define page footer of the report as illustrated in the following code snippet:

   C#

   Copy Code

   //create a page footer s = flexReport.Sections[SectionTypeEnum.PageFooter]; s.Height = 500; s.Visible = true; TextField textFld2 = new TextField(); textFld2.Name = "FldFtrLeft"; textFld2.Text.Expression = @"""Products: Printed on "" & Now"; textFld2.Left = 0; textFld2.Top = 0; textFld2.Width = 4000; textFld2.Height = 300; textFld2.Font.Size = 8; textFld2.Font.Bold = false; flexReport.Sections.PageFooter.Fields.Add(textFld2); TextField textFld3 = new TextField(); textFld3.Name = "FldFtrRight"; textFld3.Text.Expression = @"""Page "" + Page + "" of "" & Pages"; textFld3.Left = 4000; textFld3.Top = 0; textFld3.Width = 4000; textFld3.Height = 300; textFld3.Align = FieldAlignEnum.RightTop; textFld3.Width = flexReport.Layout.Width - textFld3.Left; flexReport.Sections.PageFooter.Fields.Add(textFld3); //add a line before page footer ShapeField shpfld = new ShapeField(); shpfld.Name = "FldLine"; shpfld.ShapeType = ShapeType.Line; shpfld.Left = 0; shpfld.Top = 0; shpfld.Width = flexReport.Layout.Width; shpfld.Height = 20; flexReport.Sections.PageFooter.Fields.Add(shpfld);

10. Define the detail section of the report to display the data as illustrated in the following code snippet:

    C#

    Copy Code

    // create the Detail section s = flexReport.Sections[SectionTypeEnum.Detail]; s.Height = 330; s.Visible = true; TextField textField = new TextField(); textField.Name = "FldPID"; textField.Text.Expression = "PID"; textField.Left = 0; textField.Top = 0; textField.Width = 500; textField.Height = 500; flexReport.Sections.Detail.Fields.Add(textField); TextField textField1 = new TextField(); textField1.Name = "FldName"; textField1.Text.Expression = "Name"; textField1.Left = 800; textField1.Top = 0; textField1.Width = 2400; textField1.Height = 500; flexReport.Sections.Detail.Fields.Add(textField1); TextField textField2 = new TextField(); textField2.Name = "FldSupplier"; textField2.Text.Expression = "Supplier"; textField2.Left = 2000; textField2.Top = 0; textField2.Width = 5000; textField2.Height = 500; flexReport.Sections.Detail.Fields.Add(textField2); TextField textField3 = new TextField(); textField3.Name = "FldUnitPrice"; textField3.Text.Expression = "UnitPrice"; textField3.Left = 3500; textField3.Top = 0; textField3.Width = 800; textField3.Height = 500; flexReport.Sections.Detail.Fields.Add(textField3); TextField textField4 = new TextField(); textField4.Name = "FldDiscontinued"; textField4.Text.Expression = "Discontinued"; textField4.Left = 5000; textField4.Top = 0; textField4.Width = 8000; textField4.Height = 500; flexReport.Sections.Detail.Fields.Add(textField4); textField4.Width = flexReport.Layout.Width - textField4.Left; textField4.AutoHeight = AutoSizeBehavior.CanGrow; textField4.Font.Size = 8; textField4.Align = FieldAlignEnum.JustTop;

Bind report definition with data source

1. Create a class with name Product.cs, to be used as a datasource as illustrated in the following code snippet:

   C#

   Copy Code

   public class Productdatasource { static Random _rnd = new Random(); static string[] _names = "Chai|Chang|Aniseed Syrup|Konbu|Tofu|Pavlova|Tunnbröd|Gravad lax|Røgede sild".Split('|'); static string[] _supplier = "Bigfoot Breweries|Leka Trading|Karkki Oy|Ma Maison|Tokyo Traders|Lyngbysild".Split('|'); public Productdatasource() { Pid= "P" + Convert.ToString(_rnd.Next() % 1000); Name = _names[_rnd.Next() % _names.Length]; Supplier = _supplier[_rnd.Next() % _supplier.Length]; double prc = Math.Ceiling(30 + _rnd.NextDouble() * 1000); UnitPrice = "$ " + prc; Discontinued = _rnd.NextDouble() < .2; } public string Pid { get; set; } public string Name { get; set; } public string Supplier { get; set; } public String UnitPrice { get; set; } public bool Discontinued { get; set; } }

2. Initialize a List of type Productdatasource, where Productdatasource is a class type and populate it with random data.
3. Set the DataSource.Recordset property of the FlexReport class with the instance of List to populate it with random data as illustrated in the below code snippet.

   C#	Copy Code
   List<Productdatasource> _products = new List<Productdatasource>(); for (int i = 0; i < 20; i++) { _products.Add(new Productdatasource()); } flexReport.DataSource.Recordset = _products;

Display report data

1. Set the DocumentSource property of FlexViewer control with the instance of the FlexReport class to populate it with random data from the Product class as illustrated in the below code snippet:

   C#	Copy Code
   flexViewer.DocumentSource = flexReport;