Create an Invoice Template in WPF

Windows Presentation Foundation (WPF) is a powerful UI framework for building desktop applications on Windows. In this post, we'll walk through how to create a clean, printable Invoice Template using WPF. This can serve as part of a billing system or standalone invoice generator.

Prerequisites

• .NET (preferably .NET Core 3.1+ or .NET 5+)
• Visual Studio 2019 or later
• Basic knowledge of XAML

Create an Invoice Template in WPF

Getting Started

Creating an invoice template in WPF allows developers to design responsive, data-driven UI components that can be integrated into desktop billing or accounting systems. With XAML (eXtensible Application Markup Language), you can declaratively design the UI while handling logic in the C# code-behind.

In this post, we'll walk through how to:

1. Design a simple invoice UI in XAML
2. Create Invoice Header
3. Create Invoice Sub-Header
4. Create Invoice Detail
5. Create Invoice Footer

Here, we will create an invoice template for a service center. The invoice will display a list of spare parts used during vehicle servicing, including their prices and quantities. It will also include the vehicle owner's information along with vehicle details such as the registration number and model.

Setup Project

The first step to create an invoice template is setup project. Here are the steps:

1. Open Visual Studio.
2. Create a WPF App (.NET Core) project.
3. Name it InvoiceApp.

Designing the Invoice Template Layout

Designing an invoice layout in XAML involves structuring the UI using controls such as Grid, TextBlock, StackPanel, and ItemsControl for dynamic lists. Below is a clean and functional example of an invoice layout in XAML with separate code examples provided for each section of the invoice.

Blank Invoice Template

Open the MainWindow.xaml and add WPF UI controls like below XAML code.

 <Window x:Class="MSC.Service.Invoice"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  
      <ScrollViewer Background="Gray">  
           <Grid Margin="20" Background="White">  
                <Border Margin="20" BorderBrush="Gray" BorderThickness="1" CornerRadius="1">  
                </Border>  
           </Grid>  
      </ScrollViewer>  
 </Window>  

In this implementation, a WPF ScrollViewer is used to provide scrolling functionality for the invoice, while a Grid arranges the layout, and a Border control is also used to represent the border of the invoice.

Create Invoice Inner Layout

The Grid control is ideal for arranging WPF UI elements. Therefore, we will use a Grid and define rows to display the invoice header, details, and footer information. Copy the below XML codes and past inside the Border control.

 <Grid Name="gdInnerLayout">  
   <Grid.RowDefinitions>  
     <RowDefinition Height="100"/>  
     <RowDefinition Height="120"/>  
     <RowDefinition Height="550"/>  
     <RowDefinition Height="100"/>  
     <RowDefinition Height="50"/>  
     <RowDefinition Height="10"/>  
     <RowDefinition Height="23"/>  
   </Grid.RowDefinitions>  
 </Grid>  

Create Invoice Header

An invoice header is the top section of an invoice that contains key identifying information such as company name, company logo, address, contact details and invoice title etc.

The XAML code below is for displaying the invoice header information, copy and paste the code inside the inner layout Grid immediately after end of RowDefinitions section.

 <Grid >  
   <Grid.ColumnDefinitions>  
     <ColumnDefinition Width="*"/>  
     <ColumnDefinition Width="150"/>  
   </Grid.ColumnDefinitions>  
   <StackPanel Grid.Row="1" Margin="5">  
     <TextBlock Name="txtOrg" Text="Nidhi Service Center" FontSize="20" Foreground="Gray" FontWeight="Bold" FontFamily="Engravers MT"/>  
     <TextBlock Name="txtAdd" Text="Road-8,Mahavir Nagar,Samantrapur,Old Town, Bhubaneswar, Khorda, Odisha-70002" FontSize="14" Margin="0,5" FontFamily="Arial"/>  
     <TextBlock FontSize="12">  
     <Run Text="Contact: " FontFamily="Arial"/>  
     <Run Name="rnContact" Text="0987654321, 123456789"/>  
     </TextBlock>  
   </StackPanel>  
   <TextBlock Grid.Row="1" Grid.Column="1" Text="INVOICE" VerticalAlignment="Center" TextAlignment="Center" FontSize="24" FontWeight="Bold" Foreground="LightGray"/>  
 </Grid>  

Create Invoice Sub-Header

A sub-header on an invoice is the section just below the main "INVOICE" title that provides a quick summary of the key details about the invoice. It helps the client or recipient immediately see important information without needing to dig through the full document. The below code is for display invoice sub-header information and the Border control is taken to draw a line between invoice header and sub-header.

 <Border Name="subheader" BorderThickness="0,1" BorderBrush="Gray" Grid.Row="1">  
   <StackPanel Margin="5" >  
     <TextBlock HorizontalAlignment="Right" FontFamily="Arial" >  
       <Run Text="Date: "/>  
       <Run Text="{Binding Path=Data.ServiceDate, StringFormat=\{0: dd-MMM-yyyy\}}"/>  
     </TextBlock>  
     <TextBlock FontFamily="Arial">  
       <Run Text="Service #:      "/>  
       <Run Text="{Binding Path=Data.ServiceNumber}"/>  
     </TextBlock>  
     <TextBlock Margin="0,5" FontFamily="Arial">  
        <Run Text="Customer Name: "/>  
        <Run Text="{Binding Path=Data.CustomerName}"/>  
     </TextBlock>  
     <TextBlock FontFamily="Arial">  
       <Run Text="Vehicle #:       "/>  
       <Run Text="{Binding Path=Data.VehicleNumber}"/>  
     </TextBlock>  
     <TextBlock FontFamily="Arial" Margin="0,5">  
       <Run Text="Model:         "/>  
       <Run Text="{Binding Path=Data.Model}"/>  
     </TextBlock>  
   </StackPanel>  
 </Border>  

Create Invoice Details Table

An Invoice Details Table is a structured table that contains detailed, line-by-line information about the items or services listed on an invoice. To display the table and its line items, the WPF DataGrid control is used. See the code below for more details.

 <DataGrid BorderThickness="0" Style="{StaticResource ReportGrid}" Name="dgTable" Grid.Row="2" ItemsSource="{Binding Path=Data.Items, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}">  
   <DataGrid.Columns>  
     <DataGridTextColumn Header="Sno." MinWidth="80" Binding="{Binding Path=Sno}"/>  
     <DataGridTextColumn x:Name="tcParticulars" CellStyle="{StaticResource StringCellStyle}" HeaderStyle="{StaticResource ParticularColumnStyle}" Header="Particulars" Width="*" Binding="{Binding Path=Product}"/>  
     <DataGridTextColumn Header="Unit." MinWidth="50" Binding="{Binding Path=Unit}"/>  
     <DataGridTextColumn Header="Qty." MinWidth="50" Binding="{Binding Path=Quantity}"/>  
     <DataGridTextColumn Header="Price" MinWidth="80" Binding="{Binding Path=Price ,StringFormat='c',ConverterCulture=hi-IN}"/>  
     <DataGridTextColumn Header="Amount" MinWidth="100" Binding="{Binding Path=Amount ,StringFormat='c',ConverterCulture=hi-IN}"/>  
   </DataGrid.Columns>  
 </DataGrid>  

Add above DataGrid immediately after the Border control.

Create Invoice Footer

An invoice footer is the section at the bottom of an invoice that provides summary details like total amount, tax applied etc. Below codes is for the footer of the invoice. copy and past the codes after DataGrid.

       <Border BorderThickness="0,1" BorderBrush="Gray" Grid.Row="3">  
         <Grid Margin="5">  
           <Grid.ColumnDefinitions>  
             <ColumnDefinition Width="*"/>  
             <ColumnDefinition Width="300"/>  
           </Grid.ColumnDefinitions>  
           <Grid.RowDefinitions>  
             <RowDefinition Height="23"/>  
             <RowDefinition Height="*"/>  
           </Grid.RowDefinitions>  
           <TextBlock FontWeight="Bold" FontFamily="Arial">  
               <Run Text="Billing Date: " />  
               <Run Text="{Binding Path=Data.BillingDate, StringFormat=\{0: dd-MMM-yyyy\}}"/>  
           </TextBlock>  
           <StackPanel Grid.Column="1" Grid.RowSpan="2">  
             <TextBlock TextAlignment="Right" FontFamily="Arial">  
                 <Run Text="Service Amounte: " FontSize="14"/>  
                  <Run Text="{Binding Path=Data.ServiceAmount ,StringFormat='c',ConverterCulture=hi-IN}"/>  
             </TextBlock>  
             <TextBlock TextAlignment="Right" FontFamily="Arial">  
               <Run Text="Tax Amount " FontSize="14"/>  
               <Run Text=" ("/>  
               <Run Text="{Binding Path=Data.Tax ,StringFormat='c',ConverterCulture=hi-IN}"/>  
               <Run Text=" ): "/>  
               <Run Text="{Binding Path=Data.TaxAmount ,StringFormat='c',ConverterCulture=hi-IN}"/>  
             </TextBlock>  
             <TextBlock TextAlignment="Right" FontFamily="Arial">  
 <Run Text="Billing Amount: " FontSize="14"/>  
  <Run Text="{Binding Path=Data.PaybaleAmount ,StringFormat='c',ConverterCulture=hi-IN}"/>  
             </TextBlock>  
             <TextBlock TextAlignment="Right" FontFamily="Arial">  
                 <Run Text="Received: " FontSize="14"/>  
                 <Run Text="{Binding Path=Data.ReceivedAmount ,StringFormat='c',ConverterCulture=hi-IN}"/>  
             </TextBlock>  
             <TextBlock FontWeight="Bold" TextAlignment="Right" FontFamily="Arial">  
               <Run Text="Balance Paid: " FontSize="14" FontFamily="Arial"/>  
               <Run Text="{Binding Path=Data.ReturnAmount,StringFormat='c',ConverterCulture=hi-IN}"/>  
             </TextBlock>  
           </StackPanel>  
         </Grid>  
       </Border>  

Congratulation, if you have placed the UI controls according to above guidance then you have created an invoice template like below image

Summary

This simple WPF invoice template is a great starting point for building more complex accounting or business applications. WPF provides powerful data-binding and layout options to create professional interfaces with minimal code. In this way you can add more sections like sub-footer, paper-footer in to the Invoice, I hope this was helpful to you.

Thanks