Box View:
A BoxView is the simple view that we use to draw solid color rectangles of specified width, height and color. We can use box view for decoration, Images, and for the interaction with the user through touch.
Creating Box View:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:_Views"
x:Class="_Views.MainPage">
<BoxView
HeightRequest="150"
WidthRequest="150"
Color="#184757"
HorizontalOptions="Center"
VerticalOptions="Center"
/>
</ContentPage>
In Above Code, We just created the Box View Using the following Three properties of BoxView.
Using Box View to Decorate Text:
We can use box view to create horizontal and vertical lines to decorate our text or heading. we can create underline text, design quotation by setting horizontal lines etc. Consider the following example where we design our text. In this example, we use Stack Layout and Absolute Layout to align the other views.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:_BoxView_textDecoration"
x:Class="_BoxView_textDecoration.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<Style TargetType="BoxView">
<Setter Property="Color" Value="#184757" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout
Padding="10"
VerticalOptions="Center"
HorizontalOptions="Center"
>
<!--Designing Stylish Header-->
<AbsoluteLayout>
<BoxView AbsoluteLayout.LayoutBounds="0, 58, 330, 2" />
<BoxView AbsoluteLayout.LayoutBounds="0, 62, 330, 2" />
<BoxView AbsoluteLayout.LayoutBounds="10, 10, 2, 65" />
<BoxView AbsoluteLayout.LayoutBounds="14, 10, 2, 65" />
<Label Text="CREATING THE STYLISH HEADER"
FontSize="20"
TextColor="#184757"
AbsoluteLayout.LayoutBounds="30, 25, AutoSize, AutoSize"
/>
</AbsoluteLayout>
<!--Underline Text-->
<StackLayout HorizontalOptions="Center">
<Label Text="UNDERLINE TEXT"
FontSize="20"
TextColor="#184757"/>
<BoxView HeightRequest="2" />
</StackLayout>
<!--Desing Quatation.-->
<StackLayout Orientation="Horizontal">
<BoxView WidthRequest="4"
Margin="0, 0, 10, 0"
/>
<Label
TextColor="#184757"
FontSize="20"
Text="Designing Quotation Using Box View:"
/>
</StackLayout>
<!--Paragraph designing using BoxView-->
<AbsoluteLayout>
<BoxView AbsoluteLayout.LayoutBounds="0, 58, 330, 2" />
<BoxView AbsoluteLayout.LayoutBounds="0, 154, 330, 2" />
<BoxView AbsoluteLayout.LayoutBounds="320, 50, 2, 115" />
<BoxView AbsoluteLayout.LayoutBounds="10, 50, 2, 115" />
<Label
TextColor="#184757"
FontSize="16"
Text=" Design Paragraph inside Using ViewBox"
AbsoluteLayout.LayoutBounds="20, 95, AutoSize, AutoSize"
/>
</AbsoluteLayout>
</StackLayout>
</ContentPage>
We define Above all Visuals program in our MainPage.xaml file, We just decorate our label using Box View. Obviously, xamarin.forms provide a plenty of different controls to format our text. but here, we just give an example to show the usage of BoxView.
Designing Analog Clock:
We can use BoxView to design analog clock. The box view will help us to create the hands and 60 tick marks around the circumference of the clock.
Follow the download link and Explorer The project to learn how we just created the Analog clock using box view.
