How to align existing elements when building applications?

In this case, we must also specify its alignment. This tutorial will teach you how to align and specify the text, elements, and images in the  application.

Directions that elements can take and be located:

- Start left or top — justifies the control (depending on the layout direction)

- Center centers the control

- End right or bottom — justifies the control

- Fill expands the size of the control to fill the space provided

Example for how to quantify and align elements within the application:

Set HorizontalOptions and VerticalOptions with AndExpand

StartAndExpand:

To align the left and top controls with the layers around them.

CenterAndExpand:

To align the controls in the middle with the layers around them.

EndAndExpand:

To align the right and bottom controls with the layers around them.

FillAndExpand:

To align the controls of all parts with the layers around them.

Example for how to quantify and align this within the application:

Text Input

To do the tracing, there must be text or an image. That's why you need to create a box through which you can receive text boxes from the user and input and thus align it. The code below shows how to create a box and receive a text from the input.

The input text received by the user is added to the Text Property as a String data type.

The Keyboard Property feature is a subset of Inputview that can consider several options on the keyboard to enter input text. These options can be phone numbers, text, numbers, and letters. Be sure to add InputBox to the Stack layout.

If the value of Set IsPassword is equal to True, it means that the stars replace the text in the input box and are displayed instead of the letters and text of the stars. In this way, instead of displaying the letters and text written, the stars are displayed, and  security is increased.

BoxView

This control can create a rectangle that can be used for graphic work. This rectangle creates color graphics that can hold some images or even controls.

Example for creating a BoxView control:

By default, the size and dimensions of this graphic and color rectangle are 40 × 40, but you can change its dimensions and size to your liking using WidthRequest and HeightRequest.

Note:

Be careful when setting and setting HorizontalOptions and VerticalOptions as FillAndExpand can disable HeightRequest and WidthRequest. No matter how much you set to change the size of the rectangle, it will not work.

Add BoxView to  StackLayout.

You can also put  application  icons and various elements inside BoxView.

Image view

Used to display images on the page, in that it stores and displays images with local addresses and displays them.

Example for creating Image view control:

Local Image

The images displayed on the screen are located in special folders so that the image file in  Android  is inside the Resources / drawable folder. Be careful not to use special characters for naming and put  Build Action on Android  Resource.

- The  iOS  9 operating system uses the Asset List.

- Image Sizing: Aspect Property

- The Image. Aspect property is used to measure the image.

Example for determining image size:

AspectFill:

It is used to fill the image with Scale and cut the image if needed.

AspectFit:

It was used to fit the image with view maintaining.

Fill:

It is the image scale that is used to fill the images.

These options are actually for formatting images, also called Formatting Option, but we can also make images clickable.

How to create click images using Gesture Recognizer?

Many of the images in the used apps are not clickable, and you cannot tap or click them. You can use GestureRecognizer to make the images clickable and then operate. It is an A gesture recognizer that can respond to changes and operations performed and react to any operation.

To do this, you must first add the standard gesture symbol.

To manage the Tapped event and react appropriately to it, you must create a handler and use it to manage the Tapped events. You can change the Opacity of the image to change it when clicked. Change the Opacity of the image to 0.5, in which case it will fade slightly when you close and click the image.

In this way, you can change the sharpness and clarity of the image:

Of course, you can also use Command to perform the operations you want for GestureRecognizer. Here's how to do GestureRecognizer using Command:

The user's reaction is very important, and it must be paid more attention to it so that careful and delicate planning must have been done in advance so that in the end, with every operation that the user performs, he will face the appropriate reaction. Therefore, we must plan and design so that it responds appropriately to every time the user does something. For example, by touching an image or a button in the  application, the button or element of the image can change color slightly, which response to the user's touch operation. Color change or image sharpening can be done using the Opacity control, but adding async / await can also cause a slight delay in response.

Add async / wait waiting so that the image with a very low delay of a fraction of a second can fade or change color after clicking or touching.

Note:

Be sure to use System. Threading. Tasks; Add to the top of your .cs file to get the desired result.

By making these changes, after tapping on the image, its color and sharpness will change and decrease, but it will return to its original state after a fraction of a second.

Of course, you can use the Fade to method for animations instead of reducing or changing the Opacity.

You can apply the changes below to see and get the desired result.

You can apply a change that responds appropriately by capturing and squeezing each image. To do this, you can use gesture recognizers (and async / await) to react well each time you press and hold the image.

If you increase the Delay value to 2000 and above, you can see the async / await activation, and you will see that the program is still responsive.

Note:

Async / await is a standard technique in C # used to track background activities using the parallel task library (the). There are many methods in  Xamarin  that are processed and rendered using async / await.

ScrollView

To scroll inside the  designed application, you must create a layout that is ScrollView that contains a single child.

Put all the StackLayouts inside the ScrollView. By doing this, layouts that include views are now scrollable. So by adding all the StackLayouts to ScrollView, all the existing layouts will now become scrollable.

The direction of ScrollView is vertical by default, and it can move from top to bottom and from bottom to top, but using the Orientation feature, you can change its direction and set it from left to right and from right to left. Move left.

How to change the direction of ScrollView?

 "Orientation =" Horizontal

Padding Around the Entire Page

Property Paddings are used to specify spaces around the page, and you can increase or decrease the spaces around the page.

In this example, we change the space around the page at the bottom left, right, and bottom, not the top:

In this example, the bottom will change the space around the screen from left and right horizontally and up and down vertically:

The following example includes changes that make the spaces around the page equal, ie, from all four left, right, top, and bottom sizes, and the spaces around it will be equal:

When using an iPad or iPhone, the app will be displayed at the top of the screen in the toolbar. Specifying the spaces around the  iOS operating system's screen  uses the OnPlatform method.

ContentPageExample.xaml

 This control is great for displaying one or more lines of text.

ContentPageExample.xaml.cs

By taking this course in the training article, you will learn how to make directional and visual changes to the  Xamarin-designed applications. You can easily pass this course from the training article:

- Change the spaces around the page

- Change the image resolution when clicking

- Scroll horizontally and vertically on the screen

- Create a clickable image

- Resize images

- Create a rectangle to display the image

- Get text from the user