Post
Ask Question

BoxView In Xamarin Cross Platform With Example

Xamarin BoxView
  • The BoxView is a simple view that is useful for drawing solid color rectangles.
  • BoxView is a useful stand-in for images or custom elements when doing initial prototyping. It has a default size request of 40x40.
  • It uses create border property in the page.
The discussion here is around the HorizontalOptions and it’s similar for the VerticalOptions property.
  • Start
  • Center
  • End
  • Fill (Default)
  • StartAndExpand
  • CenterAndExpand
  • EndAndExpand
  • FillAndExpand

Step 1

Go to Visual Studio; Click File -> New -> Project; Click C# -> Cross Platform -> Cross Platform App(Xamarin.Forms.Portable).

Enter the application name and click OK.

Step 2

In this step, go to Solution Explorer -> Portable Class Library, then click XAML.

Insert the code given below in the XAML Page and save it.

Step 3

Open App.Xaml.cs and set the page name.


  1. public App() {  
  2.     InitializeComponent();  
  3.     MainPage = new Page1();  
  4. }  

Step 4

Open Page1.Xaml and add this code.

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="BoxViewExample.Page1" Padding="40,50,40,50">  
  3.     <StackLayout>  
  4.         <StackLayout Orientation="Horizontal">  
  5.             <BoxView Color="Red" WidthRequest="25" HeightRequest="25" Opacity="0.5" /> </StackLayout>  
  6.         <StackLayout Orientation="Horizontal">  
  7.             <BoxView Color="Yellow" WidthRequest="25" HeightRequest="25" /> </StackLayout>  
  8.         <StackLayout Orientation="Horizontal">  
  9.             <BoxView Color="Green" WidthRequest="25" HeightRequest="25" /> </StackLayout>  
  10.     </StackLayout>  
  11. </ContentPage>  

Step 5

Open Page1.Xaml.cs and add this code.

  1. public partial class Page1: ContentPage {  
  2.     public Page1() {  
  3.         InitializeComponent();  
  4.     }  
  5. }  

Step 6

Click Build menu, then go to Configuration Manager.

Configure your Android, Windows, iOS "Deploy" & "Build" setting and click Close.

Step 7

In this step, select Build & Deploy option, followed by clicking on "Start your Application".

Now, go to the "Run" option, choose Debug from the list of Android or iOS or UWP simulators. You can choose any one simulator and run it.

Output

After a few seconds, the app will start running on your Android simulator. You will see your app working successfully.


Similar Articles