Xamarin - Content Page: InfoBrother

ContentPage:

The content page is the simplest page without any particular features. It is the blank template to start the blank project.

Content Page displays a single view, often a container such as stack layout or scroll view. We can add any control inside the content page.

Using ContentPage:

We can add content page in our project using two ways.

» When Creating New Project
» Add Content Page in Existing Project.

Add content page while Creating New Project: infobrother

While Creating New Project:

Open Your Visual Studio, and from top menu, open file » New » Project. Create the project and follow the given steps:
1 » In New Project window, Open Visual C# » Cross-Platform. and select cross-platform app (xamarin.forms)
2 » Assign proper name to project, browse the location where you want to store the project, and click Ok.
3 » In New Cross-platform App window, select Blank app template. and this is the content page template.
4 » We are creating this app for only "Android" platform, Using "Xamarin.forms" UI technology and ".NET standard" code sharing strategy.

Now our New project has been created with content page template. Open MainPage.xaml file from solution explorer, and there you find the content page template.

Add content page in existing project: infobrother

Add Content Page in Existing Project.

If you want to add content page in your existing xamarin.Form project, then follow the given steps to add it.
1 » Right click on your Project and Add » New Item.
2 » In New Item window, Select Content page from visual C# items tab and add it in your project. and if you want to Create the page using C#, then you can add Content page (c#).

Now, our project has new content page file, with content page template code.

Declaration:

Or we can use the following XAML or C# code to Use content page in Xamarin.Forms project.


<?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:pages"
             x:Class="pages.MainPage">

    <!--add views-->
	<Label Text="Welcome to InfoBrother!" 
           VerticalOptions="Center" 
           HorizontalOptions="Center" 
        />

</ContentPage>


using System;
using Xamarin.Forms;

namespace pages
{
   public class Page : ContentPage
   {
      public Page ()
      {
         //add views:
         Content = new Label
         {
            Text = "Welcome to InfoBrother!",
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center
         };
				
      }
   }
}

Consider the following examples where we use some views in Xamarin.forms content page.

Using Stack Layout:

Xamarin.forms - Vertical Orientations: infobrother


<?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:pages"
             x:Class="pages.MainPage">

    <ContentPage.Content>
        <!--Layout Orientation Vertically-->
        <StackLayout Padding="10" Spacing="10" Orientation="Vertical">

            <Button Text="Stack Layout"/>

            <BoxView
                    Color="#FF008080"  
                    VerticalOptions="FillAndExpand" 
                    HorizontalOptions="FillAndExpand"
                 />

            <BoxView 
                    Color="#FF7FBA00"  
                    VerticalOptions="FillAndExpand" 
                    HorizontalOptions="FillAndExpand"
                />

            <BoxView 
                    Color="#FF01A4EF" 
                    VerticalOptions="FillAndExpand" 
                    HorizontalOptions="FillAndExpand"
                />

            <BoxView 
                    Color="#FFFFB901"  
                    VerticalOptions="FillAndExpand" 
                    HorizontalOptions="FillAndExpand"
                />

        </StackLayout>
    </ContentPage.Content>
</ContentPage>


using System;
using Xamarin.Forms;

namespace pages
{
   public class UsingStack : ContentPage
   {
      public UsingStack()
      {

         //Creating  Layout:
          var layout = new StackLayout();

        //Creating  Views:
          var button = new Button
          {
             Text = "Stack Layout"
          };

          var tealbox = new BoxView
          {
             Color = Color.FromHex("FF008080"),
             VerticalOptions = LayoutOptions.FillAndExpand,
             HorizontalOptions = LayoutOptions.FillAndExpand
          };

          var greenbox = new BoxView
          {
             Color = Color.FromHex("FF7FBA00"),
             VerticalOptions = LayoutOptions.FillAndExpand,
             HorizontalOptions = LayoutOptions.FillAndExpand
           };

           var bluebox = new BoxView
           {
             Color = Color.FromHex("FF01A4EF"),
             VerticalOptions = LayoutOptions.FillAndExpand,
             HorizontalOptions = LayoutOptions.FillAndExpand
           };

           var orangeobx = new BoxView
           {
              Color = Color.FromHex("FFFFB901"),
              VerticalOptions = LayoutOptions.FillAndExpand,
              HorizontalOptions = LayoutOptions.FillAndExpand
           };

           //Adding views:
           layout.Children.Add(button);
           layout.Children.Add(tealbox);
           layout.Children.Add(greenbox);
           layout.Children.Add(bluebox);
           layout.Children.Add(orangeobx);

           Content = layout;
	}
    }
}

Using Web 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:pages"
             x:Class="pages.MainPage">

    <ContentPage.Content>
        
        <WebView
            Source="http://www.infobrother.com/"
         />
        
    </ContentPage.Content>
</ContentPage>


using System;
using Xamarin.Forms;

namespace pages
{
    public class UsingStack : ContentPage
    {
	public UsingStack()
	{
            var website = new WebView();
            website.Source = "http://www.infobrother.com/";
            Content = website;
        }
    }
}

I Tried my Best to Provide you complete Information regarding this topic in very easy and conceptual way. but still if you have any Problem to understand this topic, or do you have any Questions, Feel Free to Ask Question. i'll do my best to Provide you what you need.

Sardar Omar.
InfoBrother

WRITE FOR INFOBROTHER

Advertising

Follow me on Instagram