On displaying a number formatted for currency in a UWP app

The entry you make in a text box control is of data type text and sometimes you need to format it as a currency with thousands separator while displaying.

Also, if the number of decimal places you enter is more than 2, you need to round it up to 2 in the output.

How do you code this in a UWP app?

Create a UWP page starting from a Blank UWP project with three controls as shown.

There are two text boxes and a button. You enter a number in the top textbox (txt1) and click the button, the formatted currency will be displayed in the bottom textbox(txt2).

The app displays as shown.

Now provide for a click event for the button and insert code as shown:

Convert_1

The string entered in txt1 is converted to data-type double, it is then 'rounded'. The rounded number is then formatted to show the currency symbol and the 1000's place delimiter you find, for example in Excel formatting.

Here is the app after entering a number and clicking the button.

On designing TextBoxes in a Universal Windows Platform projects

I will be describing two aspects of the design. The first one deals with providing adequate space between textboxes when you have more than one. The second deals with designing textboxes so that they have the same style regarding back gorund color: font size and font family.

Controlling space between controls

The easiest way is use the Margin in your control.

The syntax is Margin="left, top, right, bottom"

The next image shows code and design time layout where all textboxes have some space between them. The Button is still attached to the last textbox.

Continued here.

Styling textboxes for uniformity

All textboxes having the same properties such as font style, font size, bordering etc. is essential for making apps to have a good visual appeal.

There are various ways you can do it, but here is a simple example of doing it.

I will be using the example in my previous post as it will simplify writing for me.

I will be using the layout in the next image from my above post:

PlaceSpaceBetweenControls..._2

This is how you modify the XMAL markup for the MainPage.xaml

Continued here.

http://hodentekmobile.blogspot.com/2018/04/uniform-ui-styling-is-essential-for.html