In this article, I’m going to go over the different parts of the code involved in creating the app. If you missed part 1 of this article which I go through the design process you can find it here – click here. But as an overview of the project, I had to create a mobile application to display and record ice-creme sales.
Before I started to create the app I had a big decision to make, which was should I use VB or C#? This was a hard decision to make because I have used VB a few times over the last few years but never used C#. So I decided to go with C# and the reason I decided to go with C# is that I have always wanted to learn it and there were a lot more resources online for it.
Another decision I had to make was how was I going to make it? Before this project, I had no experience in making a windows app and no experience coding in C#. So I thought about a few other projects I made with vb, previously I have made a few application that just consists of creating a new form for each page. This meant in my scenario I would have to create a new page for each flavour of ice cream. I wasn’t happy with this idea so I started to research different approaches and techniques. And this is where I found an approach called data binding. What is data binding? Data binding is a method which controls the user interface (UI) of the client application are configured to fetch from or update data from a data source. What this means in my context is that I could create a single .JSON file with all the ice cream information and bind the data to different pages, which meant I only had to create 1 page to display each ice cream.
Here is a completed video of the app.
Ice cream information
All the ice-cream information is stored in a single JSON file. The reason I decided to store all the information in one place was that it meant if anyone wanted to add/ edit or remove a flavour all they had to do is go into the JSON file and modify it. After creating the JSON file I need a way to bind the data to a page. So I had to do some research and learned a bit of data binding.
The above screenshot is of one of the flavours in the JSON file. All the user would have to do is follow the same format and they could add/ edit or remove a flavour.
Data binding
I had to learn data binding to create the app this way, but after learning the basics of data binding, I have found out it is very useful to learn. I can demonstrate this. If I wasn’t using data binding I would have had to create a new page for every single flavour but using data binding I was able to create a single template page that would display the chosen flavour information.
The image above is a screenshot of the XAML for the item page. In parts of the page you will see I use “{Binding ****” this is where it is pulling the data from the JSON file. In the home page when the user selects an item, the flavour title gets passed over into the item page and this is used as a unique identifier to grab the correct information.
The major benefits of this are there is only one page for all flavour, any new flavour added will automatically have its own page and it keeps the design consistent.
Navigation menu
To create the navigation menu, I decided to use the menu flyout tool. This created a really sleek animation when it displayed the menu. To create the hamburger icon, I planned to use the following code:
But for some reason it would display the icon perfectly fine in the design viewer but in the emulator icon glitched into a square. So to fix this I manually create three lines in XAML. Here is the flyout code:
And the corresponding C# code.
Global Variables
To save the data for the current order and the summary page I created a new class called globalVariable. This class holds all the variable and lists need. The variable themselves are set to private and I create getters and setters to control the values.
Writing to a text file
I found writing to a text file really difficult because at first, I was trying to create a file inside liberayDocument which I don’t actually have access to so it kept throwing up and error. Here is how I got it to work in the end.
So it was quite simple I would create a folder called stats inside of the local folder. I then create a file name using the current date and time. I had to format the data and time so that it could be used as a file name. I then passed the information to a method called writeDataToFileAsync(), whilst calling this method you have to send the file name and the content you want writing to the file.
I created this method so that it was easier to write to a file, here is the method:
What this method does it takes the content and write it into the file that you choose.
Colour changing
The design of the app changes depending on the user phone theme settings. It quite easy to implement this feature for example for the main background of the app I would set it like this
What the theme resource would do is change the colour based on the theme brush (so white or black).
To use the secondary colour (accent colour) it was just as simple –
Message Boxes
Throughout the app, I used message boxes for a number of different things such as informing the user that they entered the wrong type of data or asking them a question such as “Are you sure you want to save the report”. I implemented this through c#. For basic error messages, I created a function that u send a message over and the message box would appear with the message sent.
As you can see this is a very simple function, but for the times that I wanted the user to interact with the message box (yes/no), I had to create a new message dialogue with the desired commands.
Basket options
Inside the basket, I wanted a way for the user to edit and delete individual items in order. The current order items are saved in a list and displayed in a list view so I decided when the user selects an item in the list view a fly out menu will appear.
So I added a flyout menu inside a list view and created a selection changed event.
When an item has selected the index of the item is gathered and its used to get the corresponding flavour. The reason I get the flavour is that if the user selects edit from the menu then the flavour is used to navigate to the correct quantity page. Here are the menu button functions.
You can see this working in the demonstration video at the top of this article.
Conclusion
Creating this app I learnt a lot of new things such as C#, data binding and windows phone development. You can see all of the code working above in the video at the top of this article.