# Quick Start

## Content

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.

![Displaying data](https://cdn.mescius.io/document-site-files/images/4f10fc8d-eb38-4687-8264-468b8828236a/images/wpf_quickstart_new.png)

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

  >type=note
> 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.

    ```csharp
    //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.

    ```csharp
    //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:

    ```csharp
    //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:

    ```csharp
    //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:


```csharp
// 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:

    ```csharp
    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.

    ```csharp
    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:

    ```csharp
    flexViewer.DocumentSource = flexReport;
    ```