Friday, February 3, 2023
HomeC#Replicating an Bill Web page UI in .NET MAUI

Replicating an Bill Web page UI in .NET MAUI


Howdy! This weblog explains easy methods to replicate an bill web page UI based mostly on this Dribbble design.

Let’s break down the creation of the UI into 4 steps, as illustrated by the next screenshot.

Breakdown of Invoice Page UI in .NET MAUI
Breakdown of Bill Web page UI in .NET MAUI

Earlier than beginning to develop the UI, let me spotlight some vital factors. On this article, we are going to be taught to:

Let’s code!

Foremost format

The preliminary construction must be ready for the content material we are going to add in all the event steps. It must be famous that step 4 is designing a backside bar that’s mounted and doesn’t transfer whatever the content material of the remaining blocks.

So as to add each the underside bar and the remaining content material, we are going to create the next items:

  • Foremost format: The primary format features a grid with a single row. It is because each the underside bar and the remaining content material will probably be in the identical grid row. Solely the underside bar will probably be in a hard and fast orientation on the backside of the display.
  • ScrollView: We’re going to design the highest content material with a ScrollView to make the content material scrollable in case the quantity of knowledge grows. Inside this ScrollView, we are going to add a DataGrid, which is the format accountable for organizing the weather contained on this higher half. 
  • Backside bar: Lastly, you will note a remark that claims <!– Add your Backside Bar right here–>, and for the second, we are going to go away it that approach. Take into account, although, that if you get to step quantity 4, you will need to add that code on this half.

Subsequently, implementing all these items will appear to be the next code.

<!-- Foremost layout-->
<Grid RowDefinitions="*">
 <!-- Permits prime data to be scrolled-->
   <ScrollView Grid.Row="0" Margin="15,10">
    <!--Structure prime information-->
    <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto" RowSpacing="10">
      <!-- Add right here the knowledge wanted within the prime -->
    </Grid>
   </ScrollView>
  <!-- Add your backside bar here-->
 </Grid>
</Grid>

Common settings

This utility will probably be developed to help each mild and darkish modes. For that, we now have to bear in mind the visible values ​​that we are going to assign to every property. To take action, we will probably be utilizing the Markup Extension AppThemeBinding.

We have to present a background shade to the content material web page by including the next code to the content material web page’s header.

BackgroundColor="{AppThemeBinding Mild=#efefef,Darkish=Black}"

The .NET MAUI framework already has predefined world types for every visible component. So, we have to modify just some properties of the default model. To find it, navigate to Assets Kinds Kinds.xaml. We’re going to modify the types for the frames and field views. Discuss with the next code examples.

Body

<Type TargetType="Body">
 <Setter Property="HasShadow" Worth="False" />
 <Setter Property="BackgroundColor" Worth="{AppThemeBinding Mild=White, Darkish=#181818}" />
 <Setter Property="CornerRadius" Worth="10" />
</Type>

BoxView 

<Type TargetType="BoxView">
 <Setter Property="Coloration" Worth="{AppThemeBinding Darkish=#252525,Mild=Silver}" />
 <Setter Property="HorizontalOptions" Worth="FillAndExpand" />
 <Setter Property="Margin" Worth="25,10" />
</Type>

Step 1: Enterprise information

Now that we now have configured the preliminary setup, let’s get began with the UI design!

Business Info in .NET MAUI Invoice Page UI

Including a enterprise body

Let’s add enterprise data inside a body. Don’t fear about its properties for mild and darkish modes. Keep in mind that we now have already outlined this within the types part of the overall settings.

<!-- Enterprise info-->
 <Body Grid.Row="0">
  <Grid RowDefinitions="*,*,*,*" ColumnDefinitions="*,Auto,*">
   <!-- Add all the knowledge corresponding to dam 1 right here -- >
  </Grid>
 </Body>
<!-- Add all the knowledge corresponding to dam 2 right here -- >
<!-- Add all the knowledge corresponding to dam 3 right here -- >

Enterprise data particulars

This block incorporates the next data:

  • Title
  • Identification
  • Title
  • Electronic mail
  • Separator
  • Signature board
  • Fee badge

First, let’s begin with the code to implement the title, identification, title, electronic mail, and a separator.

<!-- Enterprise description-->
<!-- Title-->
 <Label Grid.Column="0" Grid.Row="0" Textual content="BUSINESS INFO" TextColor="#a0a0a0"/>
<!-- Identification-->
 <Label Grid.Column="0" Grid.Row="1" Textual content="NO. 102597" FontAttributes="Daring" Padding="0,0,0,11"/>
<!-- Title-->
 <Label Grid.Column="0" Grid.Row="2" Textual content="7 Design Studio"  FontAttributes="Daring"/>
<!-- Electronic mail-->
 <Label Grid.Column="0" Grid.Row="3" Textual content="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’re going to use the Syncfusion .NET MAUI SignaturePad management. To take action, observe these steps: 

Observe: Discuss with the .NET MAUI SignaturePad management’s getting began documentation for extra data.

  1. First, set up the Syncfusion.Maui.SignaturePad NuGet package deal.
    Syncfusion.MAUI.SignaturePad NuGet package
  2. Second, register the handler for the Syncfusion core within the MauiProgram.cs file. Go to the CreateMauiApp methodology, and slightly below the road .UseMauiApp<App>(), add the .ConfigureSyncfusionSignaturePad() methodology.
  3. Third, add the Syncfusion.Maui.SignaturePad namespace in your XAML web page.
    xmlns:signaturePad="clr-namespace:Syncfusion.Maui.SignaturePad;meeting=Syncfusion.Maui.SignaturePad"
  4. Lastly, add the next code to your XAML web page.
    <!--Signature -->
    <!-- Title-->
     <Label Grid.Column="2" Grid.Row="0" Textual content="Signature" TextColor="#a0a0a0" VerticalTextAlignment="Finish"/>
    <!-- Syncfusion Signature Pad-->
    <signaturePad:SfSignaturePad Grid.Column="2" Grid.Row="1" Grid.RowSpan="3" MinimumStrokeThickness="1" MaximumStrokeThickness="4" StrokeColor="{AppThemeBinding Mild=Black, Darkish=White}" />

Fee badge

To design the paid badge situated within the upper-right nook of the display, we are going to use a label. Let’s use the next three properties of the label to acquire this UI design:

  • Padding: Signifies the house that the label can have.
  • BackgroundColor: Assigns a shade to the seen house within the background.
  • Rotation: Helps rotate the weather, on this case, to place the label diagonal.
    <!-- Paid badge-->
    <Label Grid.Column="2" Grid.RowSpan="4" BackgroundColor="#46aa62" Textual content="PAID" TextColor="White" Padding="0,50,20,0" Rotation="40" VerticalOptions="Begin" FontSize="11" HorizontalTextAlignment="Finish" TranslationX="60" TranslationY="-80"/>

Step 2: Shoppers

Client Details in .NET MAUI Invoice Page UIThe shoppers’ particulars may even be contained within the body. Inside it, I’ve added a DataGrid to prepare the knowledge. Discuss with the next code instance.

<Body Grid.Row="1">
 <Grid RowDefinitions="*,*,*" RowSpacing="10" ColumnDefinitions="Auto,*,Auto">
   <!-- Add all the knowledge corresponding to dam 2 right here -- >
 </Grid>
</Body>

Let’s design the next components on this block:

  • Title and brand
  • Title and electronic mail deal with
  • Icon and edit label

Title and brand

The title of this content material is a label. To design the brand, we use the border help out there within the .NET MAUI framework and shade the background based on the looks mode that you’ve got configured within the system (darkish or mild mode).

Lastly, we add a picture inside it with a clear background (the brand) in order that it may be mirrored within the beforehand added background.

<!-- Title-->
 <Label Grid.Column="0" Grid.Row="0" Textual content="CLIENTS" TextColor="#a0a0a0"/>
<!-- Emblem-->
 <Border Grid.Row="1" Grid.RowSpan="2" Grid.Column="0"
         Margin="0,0,20,0"
         Stroke="Clear"
         BackgroundColor="{AppThemeBinding Mild=Black, Darkish=White}"
         StrokeThickness="4"
         WidthRequest="50"
         HeightRequest="50"
         StrokeShape="RoundRectangle 7">
  <Picture Side="AspectFill" Supply="{AppThemeBinding Darkish=niken, Mild=nike}" />
 </Border>
 
 <!-- Add right here all the knowledge defined within the subsequent code block -- >

Title and electronic mail deal with

Design the title and electronic mail deal with particulars, referring to the next code instance.

<!-- Title-->
 <Label Grid.Column="1" Grid.Row="1" Textual content="Nike Product" FontAttributes="Daring"/>
<!-- Electronic mail-->
 <Label Grid.Column="1" Grid.Row="2" Textual content="develop-project@gmail.com" TextColor="#a0a0a0"/>
<!-- Add right here all the knowledge defined within the subsequent code block -- >

Icon and edit label

Design the icon and edit label, referring to the next code instance.

<!-- Icon-->
 <Picture Grid.Column="2" Grid.Row="0" Supply="factors"/>
<!-- Edit Label-->
 <Label Grid.Column="2" Grid.Row="1" Grid.RowSpan="2" TextColor="#3373dc" VerticalTextAlignment="Heart" Textual content="Edit"/>

Step 3: Gadgets information

Items info in .NET MAUI Invoice Page UIPersevering with with the third block, Gadgets Data, we modified this a bit from the unique design. Right here, you’ll be taught to make use of:

  • Syncfusion’s ListView management
  • Shapes within the .NET MAUI framework

Now, we’re going to design the body and the format to show the gadgets’ data.

<!-- Gadgets-->
 <Body Grid.Row="2">
  <Grid RowDefinitions="Auto,*,Auto,Auto,Auto,Auto,Auto,Auto,Auto" ColumnDefinitions="*,Auto" RowSpacing="5">
   <!-- Add all the knowledge corresponding to dam 3 right here -- >
  </Grid>
 </Body>

Gadgets and value titles

Discuss with the next code instance so as to add the titles for the gadgets earlier than including them to the record.

<!--Merchandise and costs title-->
 <Label Grid.Row="0" Grid.Column="0" Textual content="ITEMS" HorizontalTextAlignment="Begin" TextColor="#9a9a9a"/>
 <Label Grid.Row="0" Grid.Column="1" Textual content="PRICE" HorizontalTextAlignment="Finish" TextColor="#9a9a9a"/>

Gadgets record

To design the gadgets record, we’re going to use the Syncfusion .NET MAUI ListView management. Please observe these steps:

Observe: Discuss with the .NET MAUI ListView management getting began documentation

  1. First, add Syncfusion.Maui.ListView NuGet package deal.
    Syncfusion.MAUI.ListView NuGet package
  2. Second, go to your MauiProgram.cs file and register the handler for the Syncfusion .NET MAUI ListView. Go to the CreateMauiApp methodology, simply earlier than the road return builder.Construct();, and add the builder.ConfigureSyncfusionListView(); methodology.
  3. Third, add Syncfusion.Maui.ListView namespace in your XAML
    web page.xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;meeting=Syncfusion.Maui.ListView"
  4. Then, add the next code to your XAML web page.
    <!-- Merchandise Record: Syncfusion ListView Management-->
     <syncfusion:SfListView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
                            ItemsSource="{Binding ItemInfo}"
                            ItemSize="80"
                            ScrollBarVisibility="By no means"
                            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" Textual content="{Binding Order}" Padding="5" BackgroundColor="{AppThemeBinding Darkish=#141414, Mild=#efefef}" Margin="0,0,10,0"/>
         <Label Grid.Row="0" Grid.Column="1" Textual content="{Binding Title}"/>
         <Label Grid.Row="1" Grid.Column="1" Textual content="{Binding Description}" TextColor="#a3a3a3"/>
         <Label Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" Textual content="{Binding Worth}" FontSize="18" HorizontalOptions="Finish" VerticalTextAlignment="Heart"/>
         <BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" HeightRequest="0.5"/>
        </Grid>
       </DataTemplate>
     </syncfusion:SfListView.ItemTemplate>
    </syncfusion:SfListView>
     
    <!-- Add right here all the knowledge defined within the subsequent code block -- >
    

Separator and middle button

Now, we’re going to use a field view so as to add a line as a separator and find a button within the middle of the body. 

<!-- Separator-->
 <BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" HeightRequest="0.5"/>
<!-- Center Button-->
 <Button Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Textual content="Add Merchandise" CornerRadius="15" WidthRequest="130" HeightRequest="35" BackgroundColor="#3775dc" HorizontalOptions="Heart" TextColor="White" Margin="0,10"/>
<!-- Add right here all the knowledge defined within the subsequent code block -- >

Aspect cutouts in circles of the body

Did you see the body with two round holes at every finish? To duplicate it, we’ll use the shapes and place them on all sides, as within the following code instance.

<!-- Cutouts in circles -->
 <Ellipse Grid.Row="2" Grid.Column="0" HorizontalOptions="Begin" Margin="-30,-30,0,0" Fill="{AppThemeBinding Mild=#efefef,Darkish=Black}" VerticalOptions="Finish" HeightRequest="26" WidthRequest="26" StrokeThickness="0"/>
 <Ellipse Grid.Row="2" Grid.Column="1" HorizontalOptions="Finish"  Margin="0,-30,-30,0" Fill="{AppThemeBinding Mild=#efefef,Darkish=Black}" VerticalOptions="Finish" HeightRequest="26" WidthRequest="26" StrokeThickness="0"/>

Complete data

 This final sub-block is made up of the next components:

  • Subtotal data
  • Low cost data
  • Tax data
  • Separator
  • Complete

Discuss with the next code to design them within the UI.

<!--Complete information-->
 
<!-- Subtotal information-->
 <Label Grid.Row="3" Grid.Column="0" Textual content="Subtotal" TextColor="{AppThemeBinding Mild=Black, Darkish=#727272}"/>
 <Label Grid.Row="3" Grid.Column="1" Textual content="$1,171.19" TextColor="{AppThemeBinding Mild=Black, Darkish=#727272}" HorizontalTextAlignment="Finish"/>
<!-- Low cost-->
 <Label Grid.Row="4" Grid.Column="0">
  <Label.FormattedText>
   <FormattedString>
    <Span Textual content="Low cost" TextColor="{AppThemeBinding Mild=Black, Darkish=#727272}"  />
    <Span Textual content=" -37%" TextColor="#727272"/>
   </FormattedString>
  </Label.FormattedText>
 </Label>
 <Label Grid.Row="4" Grid.Column="1" Textual content="-351.35" TextColor="{AppThemeBinding Mild=Black, Darkish=#727272}" HorizontalTextAlignment="Finish"/>
<!-- Tax-->
 <Label Grid.Row="5" Grid.Column="0" Textual content="Tax" TextColor="{AppThemeBinding Mild=Black, Darkish=#727272}"/>
 <Label Grid.Row="5" Grid.Column="1" Textual content="+117.11" TextColor="{AppThemeBinding Mild=Black, Darkish=#727272}" HorizontalTextAlignment="Finish"/>
<!-- Separator-->
 <BoxView Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2"  HeightRequest="0.5"/>
<!-- Complete-->
  <Label Grid.Row="7" Grid.Column="0" Textual content="Complete" TextColor="{AppThemeBinding Mild=Black, Darkish=#727272}"/>
  <Label Grid.Row="7" Grid.Column="1" Textual content="$936.65" TextColor="{AppThemeBinding Mild=Black, Darkish=#727272}" FontSize="18" HorizontalTextAlignment="Finish"/>

Step 4: Backside bar

Bottom Bar in .NET MAUI Invoice Page UILet’s design the final block. We’re going to add the next components to the underside bar:

  • Bill quantity
  • Interval of days
  • Name to motion buttons

Discuss with the next code instance.

<!-- Button Bar-->
 <Grid Grid.Row="0" RowDefinitions="Auto,Auto" ColumnDefinitions="*,Auto,Auto" HeightRequest="100" Margin="0,0,0,-30" Padding="25,10" VerticalOptions="Finish" BackgroundColor="{AppThemeBinding Mild=White, Darkish=#181818}">
<!--Bill number-->
  <Label Grid.Row="0" Grid.Column="0" Textual content="INV-791078" TextColor="{AppThemeBinding Darkish=White, Mild=Black}" FontAttributes="Daring"/>
<!--Interval of days-->
  <Label Grid.Row="1" Grid.Column="0" Textual content="Due in 7 Days " TextColor="#9d9d9d"/>
<!--Name to motion buttons-->
   <Button Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" BackgroundColor="{AppThemeBinding Darkish=#313131, Mild=White}" CornerRadius="18" WidthRequest="60" HeightRequest="35" ImageSource="{AppThemeBinding Mild=glasses, Darkish=glassesn}" BorderWidth="2" BorderColor="{AppThemeBinding Mild=#ededed ,Darkish=Clear}" Margin="0,0,15,0"/>
   <Button Grid.Row="0" Grid.RowSpan="2" Grid.Column="2" BackgroundColor="{AppThemeBinding Darkish=White, Mild=Black}" CornerRadius="18" WidthRequest="60" HeightRequest="35" ImageSource="{AppThemeBinding Mild=telegram, Darkish=telegramn}"/>
 </Grid>

And our UI is finished!

GitHub reference

For extra particulars, check with our Bill Web page UI in .NET MAUI demo on GitHub.

Conclusion

Thanks for studying! On this weblog, we noticed easy methods to replicate an bill web page UI utilizing Syncfusion .NET MAUI controls. Check out the steps on this weblog put up and go away your suggestions within the feedback part under!

Syncfusion .NET MAUI controls had been constructed from scratch utilizing .NET MAUI, so that they really feel like framework controls. They’re fine-tuned to work with an enormous quantity of information. Use them to construct your cross-platform cell and desktop apps!

For present prospects, the brand new Important Studio model is accessible for obtain from the License and Downloads web page. In case you are not a Syncfusion buyer, you may at all times obtain our free analysis to see all our controls.

For questions, you may contact us by means of our help discussion boardhelp portal, or suggestions portal. We’re at all times blissful to help you!

See you subsequent time!

Associated blogs

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments