UWP: Displaying formatted text in a TextBox Control

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).

UWP: Need to reduce the space between Pivot and PivotItem Header. Is there a way out?

Real estate control is a common theme especially when it comes to devices such as smartphones with smaller display area.
In my previous post, I did not take any particular care to adjust the space between Pivot and PivotItem Header. The display appears as shown.


I start with a Blank UWP app and add a Pivot Control as described (for example) here. Most of my posts start with a Blank Project.

Now the displayed page appears as shown.

In order to control the space (reduce it, essentially) you need to add a Page resource, the resource PivotHeaderItemMargin and reference it in your declration for the Pivot Items. Here is the resource I added for the page to control.


Now you need to declare the Margin for the two pivot items(on my page) as shown.

Using appropriate value for 'Margin', you can control the space. Here are displays for various Margin settings. For the last item in red, a Margin was also added to the Pivot. 

UWP: Uniform UI styling is essential for look and feel

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:

This is how you modify the XMAL markup for the MainPage.xaml
You include the style elements you want as a Gird attribute  inside your page. If the control you use is a textbox (there are four in the above layout) then all of them will get the same style.

UWP: Use Margin to control 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.

In this image the textboxes are separated from each other by equal spaces and also the 2,3 and 4 th box are left to their previous ones.

UWP: Placing a ScrollViewer within a ScrollViewer

A ScrollViewer enables content to be displayed in a smaller area than its actual size. When the content of the ScrollViewer is not entirely visible, the ScrollViewer displays scrollbars that the user can use to move the content areas that is visible. The area that includes all of the content of the ScrollViewer is the extent. The visible area of the content is the viewport.

The following contain a ScrollViewer in their templates:


In this post you will see a ScrollViewer inside a GridView. The ScrollViewer has two contents, an Image and a TextBox.

The TextBox has its own ScrollViewer with only horizontal scrolling. The default text which is 'Rose' changes to a longer sentence (Event: ViewChanged="SV_ViewChanged") which can be scrolled using your finger or, with the left/right arrow keys when the cursor is anchored in the text box.

The image and the text as a whole can be scrolled both vertically and horizontally.

Here is the project&…

UWP: Navigation using SplitView

SplitView has two panes and in one of them you place items that allow you to navigate to the details of that item and its contents. You can basically use some event handlers to the items and when the event occurs, you display the content for the item.
Here is the scheme for navigation:

You have three objects in the SplitView pane (Rose, Jasmine, Lily). You attach events to these objects and when the event is fired, you display the related content in the area on the right, the Content.
Before you read this post, please make sure you read the two following posts:
Displaying image in the Assets folder:
Navigation with SplitView:

Using XAML's SplitView

You can get a basic start with the SplitView Control here. There is no TabView in XAML.
You could replace the default 'grid' in a Blank UWP project shown here:
Use the following in its place:

SplitView sample.png
This is ready for build. Build and run the app in the Local Computer. This is what you see when the app is run.