Posts

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. 




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

UWP: Navigation using SplitView

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

SplViewNav_0
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: http://hodentekhelp.blogspot.com/2018/03/how-do-i-display-using-code-image-from.html
Navigation with SplitView: http://hodentekhelp.blogspot.com/2018/03/how-do-you-use-splitview-xaml-control.html

Using XAML's SplitView

Image
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:
DefaultBlank.png
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.

UWP: Event handler displaying an image from the Asset folder

Image
You may need to display an image stored in the asset of your UWP project from another control's event handler.

Let us take the simple example of a button click event displaying an image stored in the project's Asset folder on the page.

At a minimum we create a UWP Blank project. Then we add a StackPanel. In the StackPanel we place two named elements, a button and an image by providing the NAME property for the controls.



We bring in an external image into the Asset Folder using:


Since we configured a click event in the XAML, this BTN_Click event code will be present in the MainPage.xaml.cs as shown.


We create an instance of Image as a new image. The source for this image has to change from System.Uri to Windows.Foundation.Uri that UWP requires and hence the conversion. 

However, code needs fixing, and there is a fix with a link. You can safely click this to modify. This includes a new using reference (using Windows.UI.Xaml.Media.Imaging) as shown. 
The this.BaseURI is now refere…