Platform specific pages in xamarin forms

4 min readJan 10, 2018

Here we expect to write content pages of xmarin forms in a specific way(Platform specific pages in xamarin forms). If i explain further, there are some views such as where we find it’s difficult to create using xamarin.forms. In those instances we can use this. Let’s learn how we can ….

Before start…

Every Xamarin.Forms control has an accompanying renderer for each platform that creates an instance of a native control. When a ContentPage is rendered by a Xamarin.Forms application, in iOS the PageRenderer class is instantiated, which in turn instantiates a native UIViewController control. On the Android platform, the PageRenderer class instantiates a ViewGroup control. On Windows Phone and the Universal Windows Platform (UWP), the PageRenderer class instantiates a FrameworkElement control. For more information about the renderer and native control classes that Xamarin.Forms controls map to, see Renderer Base Classes and Native Controls.

Now…. lets start…

1.Create a Xamarin.Forms Project. 2.Create a Xamarin.Forms camere page. 3.Add a Button for the main Page to Open Camera. 4.Consume the page from Xamarin.Forms.

5.Create the custom renderer for the page on each platform.

lets get one by now with code block to implant a camera page that provides live camera feed and the ability to get a photo.

Create a Xamarin.Forms Project

After you open the visual studio, you need to select File > New Solution from the file menu.

Create a Xamarin.Forms page.

You need to select File > New Solution from the file menu.

Default Xamarin forms project template will generate following XAML code
example:

<! — ?xml version=”1.0" encoding=”UTF-8"? →`

And the code-behind the file for the ContentPage should be shown in the following code sample.

public partial class CameraPage : ContentPage
 {
    public CameraPage ()
    {
      InitializeComponent ();
    }
 }

Add a Button for the main Page to Open Camera.

When you open the default ContentPage, you will see following code on the xaml

<! — ?xml version=”1.0" encoding=”utf-8"? →
<label></label>

Now we need to add a button for the page replace that following code on the page

<! — ?xml version=”1.0" encoding=”utf-8"? →<label></label><button></button>

Now the time for adding click event for the cs file. Add following code block to the main ContentPage.cs file

async void OnButtonClicked(object sender, EventArgs args)
 {
   await Navigation.PushAsync(new CameraPage());
 }

See the ‘await Navigation.PushAsync(new CameraPage());’

Please note : if your app doesn’t have navigation, you need to add that.. You can see it on App.xamal.cs. It should be as follows,

public App()
 {
    InitializeComponent();    MainPage = new NavigationPage(new CustomContentPagePage());
}

Creating the Page Renderer on each Platform

The process for creating the custom renderer class is as follows:

1.Create a subclass of the PageRenderer class. 2.Override the OnElementChanged method that renders the native page and write logic to customize the page. The OnElementChanged method is called when the corresponding Xamarin.Forms control is created.

3.Add an ExportRenderer attribute to the page renderer class to specify that it will be used to render the Xamarin.Forms page. This attribute is used to register the custom renderer with Xamarin.Forms.

Creating the Page Renderer on iOS

[assembly: ExportRenderer(typeof(CameraPage), typeof(CameraPageRenderer))]
 namespace CustomContentPage.iOS
 {
 public class CameraPageRenderer : PageRenderer
 {
 AVCaptureSession captureSession;
 AVCaptureDeviceInput captureDeviceInput;
 AVCaptureStillImageOutput stillImageOutput;
 UIView liveCameraStream;
 UIButton takePhotoButton;
 UIButton toggleCameraButton;
 UIButton toggleFlashButton;protected override void OnElementChanged(VisualElementChangedEventArgs e){
 base.OnElementChanged(e);if (e.OldElement != null || Element == null){
 return;
 }try{
 SetupUserInterface();
 SetupEventHandlers();
 SetupLiveCameraStream();
 AuthorizeCameraUse();
 }
 catch (Exception ex)
 {
 System.Diagnostics.Debug.WriteLine(@” ERROR: “, ex.Message);
 }
 }
 }
 }
 …….

Please note more code need to done. you can see those lines downloading a file. link to download

The live camera stream is only rendered provided that the renderer isn’t already attached to an existing Xamarin.Forms element, and provided that a page instance exists that is being rendered by the custom renderer.

Creating the Page Renderer on droid

[assembly: ExportRenderer(typeof(CameraPage), typeof(CameraPageRenderer))]
 namespace CustomRenderer.Droid
 {
     public class CameraPageRenderer : PageRenderer,         TextureView.ISurfaceTextureListener
 {
 …
 public CameraPageRenderer(Context context) : base(context)
 {
 } protected override void OnElementChanged(ElementChangedEventArgs e) {
  base.OnElementChanged(e);  if (e.OldElement != null || Element == null)  {
    return;
  }  try
  {
     SetupUserInterface();
     SetupEventHandlers();
     AddView(view);
  }
  catch (Exception ex)
  {
    System.Diagnostics.Debug.WriteLine(@” ERROR: “, ex.Message);
  }
 }
 …
 }
}

The page is then customized by invoking a series of methods that use the Camera API to provide the live stream from the camera and the ability to capture a photo, before the AddView method is invoked to add the live camera stream UI to the ViewGroup.

Source code you can download from github.

Reference : https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/contentpage/

Originally published at isamankumara.com on January 10, 2018.