Skip to content

Inspector

Håvard Moås edited this page Apr 2, 2020 · 19 revisions

Introduction

When working with Xamarin.Forms we have the pleasure of having shared UI code to create our human interfaces for both Android and iOS. You will spend most of your time in this shared code.

There are cases where you will have to dive down to the platforms in order to customize the appearance or maybe subscribe to / delegate events for different controls. Xamarin.Forms gives us the possibilities of using Custom Renderers or Effects to do so. This is a really nice way of extending the XAML language with platform specific behavior.

The problem

When creating apps you might find yourself wondering what is going on down in the platform. Or you might just want to take a look at the native control and see what possibilities you have. Creating a Custom Renderers or Effects in those situations can be time consuming. After all, you just want to inspect a native control and get to know it before deciding what to do.

The solution

We have provided an extension based way to inspect the native control that is being used for the shared control you are using. The only requirements are that you tell your control to .Inspect() and a callback that provides the native control will get invoked in the platform.

Getting started

  1. Make sure you are refering to DIPS.Xamarin.UI >= 3.2.0.

  2. Make sure you have initialized the library.

  3. Go to the code-behind of your XAML and add the following to whatever place you find fitting:

protected override void OnAppearing()
{
    ...
    MyCheckBox.Inspect();
}

In this example we are doing it in the OnAppearing and we have a CheckBox that has a x:Name=MyCheckBox in our XAML.

  1. Add the following in the appropriate platform:
public void FinishedLaunching(...)
{
     ...
     Inspector.OnInspectingViewCallback = OnInspectingViewCallback;
     ...
}

private void OnInspectingViewCallback(UIView uiView)
{
            
}

In this example we are setting the callback in iOS FinishedLaunching and as we did the inspection for a View in the shared code, we get a OnInspectingViewCallback.

Voila! ⭐ You can now set a breakpoint in the callback and inspect the native control that has been used for your View.

Careful

Do not get tempted to use the inspector as a way to modify your controls. This is a static based API and you will find yourself having to handle all of the possible problems that might occur when you have multiple inspections going on in a app.

You should stick to using Custom Renderers or Effects to create the best possible API out of your modifications. Afterall, we do love XAML!

Supported inspections

Shared iOS Android
View UIView View