How do I use BoxView in Xamarin.Forms?

What is BoxView?

It should be noted that BoxViews are rectangles that have certain height and width dimensions. Of course, these rectangles also have a specific color and can be used for graphic work or interaction with the user in designing developed applications using Xamarin.Forms ( in Slovak:  navrhovanie aplikácií vyvinutých pomocou Xamarin.Forms  ), it may be necessary to use graphic designs for beautification. But the point is that Xamarin. Forms do not have the capabilities for graphic designs and cannot support vector graphics, so they are used.

Due to the lack of support and the ability to have internal vector graphics in Xamarin.Forms, BoxViews are used.

In designing and creating them, you can draw a rectangle like a line with specific height and width dimensions. Then rotation can be used to rotate the rectangle to different angles.

How can we change the color and size properties of BoxView?

- CornerRadius:

It can be used to adjust the radius of the corner of the rectangle.

- WidthRequest:

It can also be used to adjust the width of  the BoxView rectangle  in different units.

- HeightRequest:

It can be used to adjust the height of the rectangle and BoxView.

Use the Color feature to adjust the color. To change the color of the rectangle and BoxView, we must give this Color property our desired values ​​until we see the result and the color change of them.

The CornerRadius property can also be used to specify the angle of the BoxView rectangle. To angle the BoxView corners or change its angles, it is better to set this property.

To change the height, width, and length of the BoxView, you must set it to unlimited. However, if BoxView is restricted, you will not give it the desired size, and the size will be adjusted automatically. So, you set BoxView to unlimited mode so that you  can set custom values ​​for the WidthRequest and HeightRequest properties, which are used to resize BoxView height, width, and length.

WidthRequest and HeightRequest will automatically be about 40 units or ¼ inches in size on mobile devices when BoxView is limited.

Of course, it should also be noted that if it is the child of a StackLayout that is vertical, then the vertical dimension of BoxView will be unlimited, and the other size will be limited.

The following code can create and display a straightforward BoxView instance that is unlimited with a square inch in the middle of the page:

After entering the codes listed above, we will see a box on the mobile device screen. It is in the center of the screen, and its size is one square inch.

Note:

In the above sections, we said that BoxView is a rectangle, but by inserting the above code, we will have a BoxView equal to four sides and one inch in the center of the page.

To set it to take up the entire screen of a mobile device, we need to remove some properties such as VerticalOptions or HorizontalOptions or set them to Fill altogether. In this case, the result will be that the size of the BoxView will be the size of the entire mobile screen and will fill the whole screen.

How can we decorate it and make it look beautiful?

It is possible to make some beautiful settings for BoxView to make it more attractive and decorative in appearance. You can use the text-decoration property to do this. You can even use images stored in the program's MainPage.xaml file. These include several Labels in StackLayout.

The code below can be used to beautify and change the pure BoxView. These changes and beautifications can be used by using the TextDecoration feature.

Using the AbsoluteLayout property, we can have a stylized header located at the top of the page. Of course, it is worth mentioning that there are four elements related to BoxView and one Label.

Unique elements, sizes, and places are assigned to all those elements and children and properties in the codes listed below.

The AbsoluteLayout property looks for a label inside the XAML file. It should be noted that this Label has a text format that describes and describes the AbsoluteLayout.

The code below can put a BoxView and Label inside StackLayout. The value for the HorizontalOptions property to determine the box size is anything other than the Fill value.

The width of the StackLayout is controlled by the width of the Label, which in turn imposes this width on BoxView as well. BoxView width specified, but BoxView has a specified height.

Of course, it should be noted that this technique cannot be used to underline long texts and strings. Of course, it is also possible to use BoxView because of its similarity to the horizontal HTML hr rule. In this case, you must allow the BoxView width to be specified according to the width of the parent container, which is also StackLayout:

You can then draw a line vertically on the page and next to the text paragraphs to place the Label, BoxView, and StackLayout horizontally according to that vertical line. If you do this, the BoxView height will be the height of the StackLayout, and the StackLayout height will eventually be set based on the Label height.

In other words, if you place them horizontally next to each other, the BoxView and StackLayout heights will be adjusted based on the Label height according to the vertical line drawn next to the paragraphs.

Display color list using it

It should be noted that BoxView can display the list of colors.

There is a class called NamedColor in ListViewColors. The static constructor uses reflection to create the NamedColor color and object structure background.

The images are in the XAML file and are described in that section. The ItemsSource ListView property is also set to static NamedColor. All these settings and features mean that ListView has all the objects that the program images are described in the XAML file. The ItemsSource ListView property is set to static NamedColor. All features, meaning that ListView will display all NamedColor named objects: named.

However, it should be noted that NamedColor objects are formatted using ViewCell and can be set as a ListView data pattern. The data pattern has a BoxView, which also connects the Color attribute to the Color attribute of the NamedColor object.

Play life using it Subclassing

John Conway, a mathematician, designed a game with automatic cells. It is noteworthy that this game developed by this mathematician was popular in the pages of Scientific American in 1970. Xamarin.Forms GameOfLife can also define a class called LifeCell created using BoxView.

This class includes a separate cell logic in this game.

The Col and Row property can be used to store the cell position in the network, and its status can also be displayed using IsAlive. However, it should be noted that the IsAlive feature can set the Color of the BoxView feature to white if the cell is alive or not.

LifeCell could install a TapGestureRecognizer, which allows the user to change the status by tapping on cells.

GameOfLife has a class called LifeGrid that incorporates the logic of the game. In addition, another class called MainPage has images of this game.

How can we create a digital clock?

The BoxView element is used to simulate and display points on an old page with point matrices. In other words, we can say that the DotMatrixClock 210 program can use the BoxView element to display dots.

He will use an old five by seven page, a matrix. This device can be used horizontally or vertically to display the clock utilizing the dot matrices on the screen. But to do this, it is better to place it in a horizontal position so that it is more extensive.

The contents and code in the XAML file are as follows:

Note that all sizes and positions are based on AbsoluteLayout, which is why SizeChanged for the page must set a HeightRequest.

The width of AbsoluteLayout will also be adjusted automatically because it is drawn to the entire width of the mobile device screen and does not need to be set.

In the codes inserted below, the contact time of each point and the timer are multiplied, and the issues related to each digit can be colored.