Overview
In the previous post, we finished the third page of our app, the Purchase Order Items page. In this post, we are going to continue our project, and start implementing our last page, called Purchase Order Items Confirm in the same way as before. The workflow is going to be very similar to the previous ones: we create a new page, build its structure in XAML, and implement its code behind as well. Ready to go? Then, let's get started!
Create a Purchase Order Items Confirm Page
First of all, let's create a new page for showing a confirmation page for an item of a Purchase Order, by right clicking on the folder, Pages >> Add >> New Item. Here let's choose the template Visual C# >> Code >> Forms Xaml Page, and name it as PurchaseOrderItemsConfirmPage.
Construct the Purchase Order Items Confirm Page in XAML
This goes similar to the previous pages, namely we define a main StackLayout for holding the content of the complete page, and add a 15dip left&right padding, to ensure the content of our page doesn't climb down from the screen.
Then, we divide the page into three different sections: Purchase Order Item Header, Quantity to confirm, and a last one section for the Save Item button.
Now, we are going to build the Header section first, using two another sub StackLayouts: one for the Item Name and the Quantity Confirmation Ratio, and another for the Confirmed Price that we aligned to the end (right side).
For the Item Name and the Quantity Confirmation Ratio, we use almost the same label definitions as in the Purchase Order Items page.
Into the next sub StackLayout, we place a Label for holding the Confirmed Price. That's it! That was the Header section, now we can go ahead and talk about the next one.
In the Quantity to confirm section, we place a simple Label to display the text: "Quantity to Confirm" that we aligned to center, and under it an Entry for the user input.
The last section is about the Save Item button, so simply let's place a button into it!
Set Navigation to the Purchase Order Items Confirm Page
Now, it's time to go back to our previous page, named Purchase Order Items, and set the event, ItemTapped in the XAML to handle user interactions on the Purchase Order Items listview. We are going to handle it in the method, OnPurchaseOrderItemSelected().
In the event handler, first we simply clear the selections (without it the tapped item stays selected). Then with the help of Navigation.PushAsync(), we navigate to our newly created page, PurchaseOrderItemsConfirmPage, and send two parameters via its constructor: the Purchase Order, and the Purchase Order Item.
Implement the Code-Behind
As we defined our new page in XAML, and set the navigation from the Purchase Order Items Page to this page, it's time to implement the code-behind as well. First of all, we need two fields to store the received constructor parameters (remember, we send two parameters in the event handling method).
In the constructor, after the initialization, we simply save the received parameters into our read-only fields.
Then, reusing the received information, we construct the Title with the following format: "Purchase Order Item: 3000000003 / 10".
Next, we take care of the header bindings (Item name, Quantity Confirmation Ratio, and Confirmed Price) that we extract to a helper method, HeaderBinding().
Remember, we defined a button in XAML that we want to use later on to save the entered quantity. To implement its click event, now, we simply display a simple message, and navigate back to the list of Purchase Order Items (note: it will be reimplemented later).
In the extract method, HeaderBinding() we simply assign the Purchase Order Item info to the different labels.
Run Your Android and iOS Apps
Now comes the best part of building native mobile apps, namely let's BUILD and RUN it! :) I attached two screenshots about the running apps, one for the Android, and another for the iOS app.
Summary
It was a long story again, sorry for that! But don't forget: Hard work pays off! Now, we
have a running app with four pages with a nice navigation among them! I
hope, you could follow me, and everything went fine. If not, then don't
hesitate to leave me a comment below!
Stay tuned, keep reading! If you want to get notification about the newest posts, follow us or subscribe to our newsletter! If you liked it, please share it! Thanks!