Posts

Showing posts from April, 2018

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.  In the rendered app, you will get what you designed.

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.