Replicating an Invoice Page UI in .NET MAUI
Tags: netmaui, development, mobile, ui
Published: 2022-11-29 12:25:26

---
title: Replicating an Invoice Page UI in .NET MAUI
published: true
date: 2022-11-28 11:56:09 UTC
tags: NETMAUI,Development,Mobile,UI
canonical_url: https://www.syncfusion.com/blogs/post/invoice-page-ui-in-net-maui.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/verq21e55zzspujpcgh0.png
---
Howdy! This blog explains how to replicate an invoice page UI based on this [Dribbble design](https://dribbble.com/shots/14450433/attachments/6132422?mode=media "Invoice page UI design on Dribble Design site").

Let’s break down the creation of the UI into four steps, as illustrated by the following screenshot.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Breakdown-of-Invoice-Page-UI-in-.NET-MAUI-2.png" alt="Breakdown of Invoice Page UI in .NET MAUI" style="width:100%">

  <figcaption>Breakdown of Invoice Page UI in .NET MAUI</figcaption>

</figure>
Before starting to develop the UI, let me highlight some important points. In this article, we will learn to:

- Use XAML components in different ways.
- Use the [Syncfusion .NET MAUI SignaturePad](https://www.syncfusion.com/maui-controls/maui-signaturepad "Syncfusion .NET MAUI SignaturePad") and [ListView controls](https://www.syncfusion.com/maui-controls/maui-listview "Syncfusion .NET MAUI ListView") in your app.
- Manage properties with independent values ​​for light and dark modes.

Let’s code!

## Main layout

The initial structure should be prepared for the content we will add in all the development steps. It should be noted that step four is designing a bottom bar that is fixed and does not move regardless of the content of the remaining blocks.

To add both the bottom bar and the remaining content, we will create the following pieces:

- **Main layout:** The main layout includes a grid with a single row. This is because both the bottom bar and the remaining content will be in the same grid row. Only the bottom bar will be in a fixed orientation at the bottom of the screen.

- **ScrollView:** We are going to design the top content with a ScrollView to make the content scrollable in case the amount of information grows. Inside this ScrollView, we will add a DataGrid, which is the layout in charge of organizing the elements contained in this upper part. 

- **Bottom bar:** Finally, you will see a comment that says **_<!– Add your Bottom Bar here–>_** , and for the moment, we will leave it that way. Keep in mind, though, that when you get to step number four, you must add that code in this part.

Therefore, implementing all these pieces will look like the following code.

```xml
<!-- Main layout-->
<Grid RowDefinitions="*">
 <!-- Allows top information to be scrolled-->
   <ScrollView Grid.Row="0" Margin="15,10">
    <!--Layout top information-->
    <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto" RowSpacing="10">
      <!-- Add here the information needed in the top -->
    </Grid>
   </ScrollView>
  <!-- Add your bottom bar here-->
 </Grid>
</Grid>
```

## General settings

This application will be developed to support both light and dark modes. For that, we have to keep in mind the visual values ​​that we will assign to each property. To do so, we will be using the Markup Extension AppThemeBinding.

We need to provide a background color to the content page by adding the following code to the content page’s header.

```xml
BackgroundColor="{AppThemeBinding Light=#efefef,Dark=Black}"
```

The .NET MAUI framework already has predefined global styles for each visual element. So, we need to modify only some properties of the default style. To locate it, navigate to <strong>Resources </strong><strong>➡</strong><strong> Styles </strong><strong>➡</strong><strong> Styles.xaml.</strong> We are going to modify the styles for the frames and box views. Refer to the following code examples.

**Frame**

```xml
<Style TargetType="Frame">
 <Setter Property="HasShadow" Value="False" />
 <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=White, Dark=#181818}" />
 <Setter Property="CornerRadius" Value="10" />
</Style>

```

**BoxView **

```xml
<Style TargetType="BoxView">
 <Setter Property="Color" Value="{AppThemeBinding Dark=#252525,Light=Silver}" />
 <Setter Property="HorizontalOptions" Value="FillAndExpand" />
 <Setter Property="Margin" Value="25,10" />
</Style>
```

## Step 1: Business info

Now that we have configured the initial setup, let’s get started with the UI design!

![Business Info in .NET MAUI Invoice Page UI](https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Business-Info-in-.NET-MAUI-Invoice-Page-UI.png)

### Adding a business frame

Let’s add business information inside a frame. Don’t worry about its properties for light and dark modes. Remember that we have already defined this in the styles section of the general settings.

```xml
<!-- Business info-->
 <Frame Grid.Row="0">
  <Grid RowDefinitions="*,*,*,*" ColumnDefinitions="*,Auto,*">
   <!-- Add all the information corresponding to block 1 here -- >
  </Grid>
 </Frame>
<!-- Add all the information corresponding to block 2 here -- >
<!-- Add all the information corresponding to block 3 here -- >

```

### Business information details

This block contains the following information:

- Title
- Identification
- Name
- Email
- Separator
- Signature board
- Payment badge

First, let’s start with the code to implement the title, identification, name, email, and a separator.

```xml
<!-- Business description-->
<!-- Title-->
 <Label Grid.Column="0" Grid.Row="0" Text="BUSINESS INFO" TextColor="#a0a0a0"/>
<!-- Identification-->
 <Label Grid.Column="0" Grid.Row="1" Text="NO. 102597" FontAttributes="Bold" Padding="0,0,0,11"/>
<!-- Name-->
 <Label Grid.Column="0" Grid.Row="2" Text="7 Design Studio" FontAttributes="Bold"/>
<!-- Email-->
 <Label Grid.Column="0" Grid.Row="3" Text="7luyuhang@gmail.com" TextColor="#a0a0a0"/>
<!-- Separator-->
<BoxView Grid.Row="0" Grid.RowSpan="4" Grid.Column="1" WidthRequest="1"/>
```

#### Signature board

To design the signature board, we are going to use the [Syncfusion .NET MAUI SignaturePad control](https://www.syncfusion.com/maui-controls/maui-signaturepad "Syncfusion .NET MAUI SignaturePad"). To do so, follow these steps: ** **

**Note:** Refer to the [.NET MAUI SignaturePad control’s getting started documentation](https://help.syncfusion.com/maui/signaturepad/overview " Documentation: Syncfusion .NET MAUI SignaturePad") for more information.

1. First, install the [Syncfusion.Maui.SignaturePad](https://www-0.nuget.org/packages/Syncfusion.Maui.SignaturePad "Syncfusion.Maui.SignaturePad NuGet package") NuGet package.  
 ![Syncfusion.MAUI.SignaturePad NuGet package](https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Syncfusion-MAUI-Signature-Pad-NuGet-package.png)
2. Second, register the handler for the Syncfusion core in the **MauiProgram.cs** file. Go to the **CreateMauiApp** method, and just below the line **.UseMauiApp<App>()**, add the **.ConfigureSyncfusionSignaturePad()** method.
3. Third, add the **Syncfusion.Maui.SignaturePad** namespace in your XAML page.
```xml
xmlns:signaturePad="clr-namespace:Syncfusion.Maui.SignaturePad;assembly=Syncfusion.Maui.SignaturePad"
```
4. Finally, add the following code to your XAML page.
```xml
<!--Signature -->
<!-- Title-->
 <Label Grid.Column="2" Grid.Row="0" Text="Signature" TextColor="#a0a0a0" VerticalTextAlignment="End"/>
<!-- Syncfusion Signature Pad-->
<signaturePad:SfSignaturePad Grid.Column="2" Grid.Row="1" Grid.RowSpan="3" MinimumStrokeThickness="1" MaximumStrokeThickness="4" StrokeColor="{AppThemeBinding Light=Black, Dark=White}" />
```

#### Payment badge

To design the paid badge located in the upper-right corner of the screen, we will use a label. Let’s use the following three properties of the label to obtain this UI design:

- **Padding:** Indicates the space that the label will have.
- **BackgroundColor:** Assigns a color to the visible space in the background.
- **Rotation:** Helps rotate the elements, in this case, to put the label diagonal.
```xml
<!-- Paid badge-->
<Label Grid.Column="2" Grid.RowSpan="4" BackgroundColor="#46aa62" Text="PAID" TextColor="White" Padding="0,50,20,0" Rotation="40" VerticalOptions="Start" FontSize="11" HorizontalTextAlignment="End" TranslationX="60" TranslationY="-80"/>
```

## Step 2: Clients

![Client Details in .NET MAUI Invoice Page UI](https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Client-Details-in-.NET-MAUI-Invoice-Page-UI.png)The clients’ details will also be contained in the frame. Inside it, I have added a DataGrid to organize the information. Refer to the following code example.

```xml
<Frame Grid.Row="1">
 <Grid RowDefinitions="*,*,*" RowSpacing="10" ColumnDefinitions="Auto,*,Auto">
   <!-- Add all the information corresponding to block 2 here -- >
 </Grid>
</Frame>
```

Let’s design the following elements in this block:

- Title and logo
- Name and email address
- Icon and edit label

### Title and logo

The title of this content is a label. To design the logo, we use the [border support available in the .NET MAUI](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/border "Border support in .NET framework") framework and color the background according to the appearance mode that you have configured in the device (dark or light mode).

Finally, we add an image inside it with a transparent background (the logo) so that it can be reflected in the previously added background.

```xml
<!-- Title-->
 <Label Grid.Column="0" Grid.Row="0" Text="CLIENTS" TextColor="#a0a0a0"/>
<!-- Logo-->
 <Border Grid.Row="1" Grid.RowSpan="2" Grid.Column="0"
         Margin="0,0,20,0"
         Stroke="Transparent"
         BackgroundColor="{AppThemeBinding Light=Black, Dark=White}"
         StrokeThickness="4"
         WidthRequest="50"
         HeightRequest="50"
         StrokeShape="RoundRectangle 7">
  <Image Aspect="AspectFill" Source="{AppThemeBinding Dark=niken, Light=nike}" />
 </Border>
 
 <!-- Add here all the information explained in the next code block -- >
```

### Name and email address

Design the name and email address details, referring to the following code example.

```xml
<!-- Name-->
 <Label Grid.Column="1" Grid.Row="1" Text="Nike Product" FontAttributes="Bold"/>
<!-- Email-->
 <Label Grid.Column="1" Grid.Row="2" Text="develop-project@gmail.com" TextColor="#a0a0a0"/>
<!-- Add here all the information explained in the next code block -- >

```

### Icon and edit label

Design the icon and edit label, referring to the following code example.

```xml
<!-- Icon-->
 <Image Grid.Column="2" Grid.Row="0" Source="points"/>
<!-- Edit Label-->
 <Label Grid.Column="2" Grid.Row="1" Grid.RowSpan="2" TextColor="#3373dc" VerticalTextAlignment="Center" Text="Edit"/>

```

## Step 3: Items info

![Items info in .NET MAUI Invoice Page UI](https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Items-info-in-.NET-MAUI-Invoice-Page-UI.png)Continuing with the third block, Items Info, we modified this a bit from the original design. Here, you will learn to use:

- Syncfusion’s ListView control
- Shapes in the .NET MAUI framework

Now, we are going to design the frame and the layout to display the items’ information.

```xml
<!-- Items-->
 <Frame Grid.Row="2">
  <Grid RowDefinitions="Auto,*,Auto,Auto,Auto,Auto,Auto,Auto,Auto" ColumnDefinitions="*,Auto" RowSpacing="5">
   <!-- Add all the information corresponding to block 3 here -- >
  </Grid>
 </Frame>

```

### Items and price titles

Refer to the following code example to add the titles for the items before adding them to the list.

```xml
<!--Item and prices title-->
 <Label Grid.Row="0" Grid.Column="0" Text="ITEMS" HorizontalTextAlignment="Start" TextColor="#9a9a9a"/>
 <Label Grid.Row="0" Grid.Column="1" Text="PRICE" HorizontalTextAlignment="End" TextColor="#9a9a9a"/>

```

### Items list

To design the items list, we are going to use the [Syncfusion .NET MAUI ListView control](https://www.syncfusion.com/maui-controls/maui-listview "Syncfusion .NET MAUI ListView"). Please follow these steps:

**Note:** Refer to the [.NET MAUI ListView control getting started documentation](https://help.syncfusion.com/maui/listview/getting-started "Getting Started with .NET MAUI ListView documentation")

1. First, add [**Syncfusion.Maui.ListView**](https://www.nuget.org/packages/Syncfusion.Maui.ListView/ "Syncfusion.Maui.ListView NuGet package")NuGet package.  
 ![Syncfusion.MAUI.ListView NuGet package](https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Syncfusion-MAUI-ListView-NuGet-package.png)
2. Second, go to your **MauiProgram.cs** file and register the handler for the Syncfusion .NET MAUI ListView. Go to the **CreateMauiApp** method, just before the line **return builder.Build();**, and add the **builder.ConfigureSyncfusionListView();** method.
3. Third, add **Syncfusion.Maui.ListView** namespace in your XAML
```xml
page.xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
```
4. Then, add the following code to your XAML page.
```xml
<!-- Item List: Syncfusion ListView Control-->
 <syncfusion:SfListView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
                        ItemsSource="{Binding ItemInfo}"
                        ItemSize="80"
                        ScrollBarVisibility="Never"
                        HeightRequest="140"
                        HorizontalOptions="FillAndExpand"
                        Orientation="Vertical">
  <syncfusion:SfListView.ItemTemplate>
   <DataTemplate>
    <Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,Auto,*">
     <Label Grid.Row="0" Grid.Column="0" Text="{Binding Order}" Padding="5" BackgroundColor="{AppThemeBinding Dark=#141414, Light=#efefef}" Margin="0,0,10,0"/>
     <Label Grid.Row="0" Grid.Column="1" Text="{Binding Title}"/>
     <Label Grid.Row="1" Grid.Column="1" Text="{Binding Description}" TextColor="#a3a3a3"/>
     <Label Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" Text="{Binding Price}" FontSize="18" HorizontalOptions="End" VerticalTextAlignment="Center"/>
     <BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" HeightRequest="0.5"/>
    </Grid>
   </DataTemplate>
 </syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
 
<!-- Add here all the information explained in the next code block -- >

```

### Separator and center button

Now, we are going to use a box view to add a line as a separator and locate a button in the center of the frame. ** **

```xml
<!-- Separator-->
 <BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" HeightRequest="0.5"/>
<!-- Middle Button-->
 <Button Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Text="Add Item" CornerRadius="15" WidthRequest="130" HeightRequest="35" BackgroundColor="#3775dc" HorizontalOptions="Center" TextColor="White" Margin="0,10"/>
<!-- Add here all the information explained in the next code block -- >

```

### Side cutouts in circles of the frame

Did you see the frame with two circular holes at each end? To replicate it, we’ll use the shapes and position them on each side, as in the following code example.

```xml
<!-- Cutouts in circles -->
 <Ellipse Grid.Row="2" Grid.Column="0" HorizontalOptions="Start" Margin="-30,-30,0,0" Fill="{AppThemeBinding Light=#efefef,Dark=Black}" VerticalOptions="End" HeightRequest="26" WidthRequest="26" StrokeThickness="0"/>
 <Ellipse Grid.Row="2" Grid.Column="1" HorizontalOptions="End" Margin="0,-30,-30,0" Fill="{AppThemeBinding Light=#efefef,Dark=Black}" VerticalOptions="End" HeightRequest="26" WidthRequest="26" StrokeThickness="0"/>

```

### Total information

** ** This last sub-block is made up of the following elements:

- Subtotal information
- Discount information
- Tax information
- Separator
- Total

Refer to the following code to design them in the UI.

```xml
<!--Total information-->
 
<!-- Subtotal information-->
 <Label Grid.Row="3" Grid.Column="0" Text="Subtotal" TextColor="{AppThemeBinding Light=Black, Dark=#727272}"/>
 <Label Grid.Row="3" Grid.Column="1" Text="$1,171.19" TextColor="{AppThemeBinding Light=Black, Dark=#727272}" HorizontalTextAlignment="End"/>
<!-- Discount-->
 <Label Grid.Row="4" Grid.Column="0">
  <Label.FormattedText>
   <FormattedString>
    <Span Text="Discount" TextColor="{AppThemeBinding Light=Black, Dark=#727272}" />
    <Span Text=" -37%" TextColor="#727272"/>
   </FormattedString>
  </Label.FormattedText>
 </Label>
 <Label Grid.Row="4" Grid.Column="1" Text="-351.35" TextColor="{AppThemeBinding Light=Black, Dark=#727272}" HorizontalTextAlignment="End"/>
<!-- Tax-->
 <Label Grid.Row="5" Grid.Column="0" Text="Tax" TextColor="{AppThemeBinding Light=Black, Dark=#727272}"/>
 <Label Grid.Row="5" Grid.Column="1" Text="+117.11" TextColor="{AppThemeBinding Light=Black, Dark=#727272}" HorizontalTextAlignment="End"/>
<!-- Separator-->
 <BoxView Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" HeightRequest="0.5"/>
<!-- Total-->
  <Label Grid.Row="7" Grid.Column="0" Text="Total" TextColor="{AppThemeBinding Light=Black, Dark=#727272}"/>
  <Label Grid.Row="7" Grid.Column="1" Text="$936.65" TextColor="{AppThemeBinding Light=Black, Dark=#727272}" FontSize="18" HorizontalTextAlignment="End"/>

```

## Step 4: Bottom bar

![Bottom Bar in .NET MAUI Invoice Page UI](https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Bottom-Bar-in-.NET-MAUI-Invoice-Page-UI.png)Let’s design the last block. We are going to add the following elements to the bottom bar:

- Invoice number
- Period of days
- Call to action buttons

Refer to the following code example.

```xml
<!-- Button Bar-->
 <Grid Grid.Row="0" RowDefinitions="Auto,Auto" ColumnDefinitions="*,Auto,Auto" HeightRequest="100" Margin="0,0,0,-30" Padding="25,10" VerticalOptions="End" BackgroundColor="{AppThemeBinding Light=White, Dark=#181818}">
<!--Invoice number-->
  <Label Grid.Row="0" Grid.Column="0" Text="INV-791078" TextColor="{AppThemeBinding Dark=White, Light=Black}" FontAttributes="Bold"/>
<!--Period of days-->
  <Label Grid.Row="1" Grid.Column="0" Text="Due in 7 Days " TextColor="#9d9d9d"/>
<!--Call to action buttons-->
   <Button Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" BackgroundColor="{AppThemeBinding Dark=#313131, Light=White}" CornerRadius="18" WidthRequest="60" HeightRequest="35" ImageSource="{AppThemeBinding Light=glasses, Dark=glassesn}" BorderWidth="2" BorderColor="{AppThemeBinding Light=#ededed ,Dark=Transparent}" Margin="0,0,15,0"/>
   <Button Grid.Row="0" Grid.RowSpan="2" Grid.Column="2" BackgroundColor="{AppThemeBinding Dark=White, Light=Black}" CornerRadius="18" WidthRequest="60" HeightRequest="35" ImageSource="{AppThemeBinding Light=telegram, Dark=telegramn}"/>
 </Grid>

```

And our UI is done!

## **GitHub reference**

For more details, refer to our [Invoice Page UI in .NET MAUI demo on GitHub.](https://github.com/SyncfusionExamples/invoice-concept-ui-dotnet-maui "GitHub examples for Invoice page UI in .NET MAUI")

## Conclusion

Thanks for reading! In this blog, we saw how to replicate an invoice page UI using Syncfusion .NET MAUI controls. Try out the steps in this blog post and leave your feedback in the comments section below!

Syncfusion [.NET MAUI](https://www.syncfusion.com/maui-controls "Syncfusion .NET MAUI controls") controls were built from scratch using .NET MAUI, so they feel like framework controls. They are fine-tuned to work with a huge volume of data. Use them to build your cross-platform mobile and desktop apps!

For current customers, the new Essential Studio version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and downloads page of Syncfusion Essential Studio") page. If you are not a Syncfusion customer, you can always download our [free evaluation](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to see all our controls.

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms "Syncfusion Feedback Portal"). We are always happy to assist you!

See you next time!

## Related blogs

- [How to Draw 2D Graphics in .NET MAUI’s GraphicsView](https://www.syncfusion.com/blogs/post/draw-2d-graphics-in-dotnet-maui-graphicsview.aspx "Blog: How to Draw 2D Graphics in .NET MAUI’s GraphicsView")
- [Keyboard Shortcuts in .NET MAUI Scheduler](https://www.syncfusion.com/blogs/post/keyboard-shortcuts-in-dotnet-maui-scheduler.aspx "Blog: Keyboard Shortcuts in .NET MAUI Scheduler")
- [4 Impressive Features of .NET MAUI in .NET 7](https://www.syncfusion.com/blogs/post/4-impressive-features-of-net-maui-in-net-7.aspx "Blog: 4 Impressive Features of .NET MAUI in .NET 7")
- [Syncfusion Mobile and Desktop Controls are Now Compatible with .NET 7](https://www.syncfusion.com/blogs/post/syncfusion-mobile-and-desktop-controls-are-now-compatible-with-net-7.aspx "Blog: Syncfusion Mobile and Desktop Controls are Now Compatible with .NET 7")