Posts

UWP: Storing and retrieving composite application data

Image
You can store and retrieve composite application data in a UWP project using the Windows Storage. Specifically you will be using the Windows.Storage.ApplicationDataCompositeValue sealed class shown in the Object Browser.


ObjBrowser.png
In this post a project is described where in a pair of values are stored in the Windows Storage's local folder and retrieved. The values are stored using a button click event of a button and retrieved into text boxes in the click event of a second button.
The MainPage.xaml for the project is as shown.



MainPageXaml.png

The code for storing and retrieving is shown in the MainPageXAMLCs. You first define the local settingss using the Windows.Storage.ApplicationDataContainer and the local folder. The composite values are set to the local settings.

The retrieving is by extracting the values in the local settings and reading it into a text box.
The result of running the application is shown here.


The code can be simplified as suggested by the hint shown he…

UWP: Better use XAML's RichTextBlock than a TextBox for neat rendering of text?

Image
I wanted to disaply in my app a somewhat large amount of text contained in three paragaphs. Using a textbox with wrapping and scrolling did show all the text. However, as displayed text it was not satisfactory. Using 'paragraphs' inside 'RichTextBlock' provided the best option.

The XAML code shows a TextBox and a RichTextBlock with three 'Paragraph' controls. Both of them inside a 'ScrollViewer' which makes it easy to scroll the text as shown.



Here is the code for the MainPage.XAML



This is the result rendered in the Local Machine.

This one rendered to an emulator (4")


UWP: Displaying formatted text in a TextBox Control

Image
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?

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


PivotSpace_0

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.


PivotSpace_1

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

Image
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
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

Image
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.
Enjoy!

UWP: Placing a ScrollViewer within a ScrollViewer

Image
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:

ListView
GridView
TextBox
RichEditBox


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&…