Xamarin.Tip – Add Easter Eggs to UWP with Key Combos

In a previous post, I talked about adding easter eggs to your iOS and Android applications (using Xamarin.Forms or Xamarin Native) using the shake gesture – allowing us to execute it within the context of the current view we are in whether native or in forms, and then from there execute any bit of code we want!

Check that out here: Xamarin.Tip – Add Easter Eggs on Shake

In this post, I want to give an example of adding the same sort of functionality to your UWP applications. This again is usable whether in Xamarin.Forms or native UWP.

Since nearly all UWP devices are PC’s and not mobile devices, and often don’t have gyrometers, adding this type of feature using a shake gesture just doesn’t make sense. I propose, instead, to use key combos!

Tracking Key Combinations in UWP and Xamarin.Forms

In UWP there are two main things needed to track key combinations – the KeyState and the OnKeyUp method.

Accessing the current KeyState is as easy as:

CoreWindow.GetForCurrentThread().GetKeyState(VirtualKey.Control);

Where VirtualKey.Control can be any key! In this case it is the Ctrl key.

In our UWP Page classes, we can also override the OnKeyUp method which is fired whenever any key is pressed. This means that in this method, we can check the KeyState of any number of keys, and also get the current key that was just pressed. Alternatively, you can do this in the OnKeyDown override depending on how you want it to behave.

Let’s look at a full example of this implemented where we want to fire some Easter Egg off once the Ctrl + E key combo is hit:

MainPage.xaml.cs

// NOTE: this is the UWP MainPage - not the Xamarin.Forms MainPage!
public sealed partial class MainPage
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private static bool IsCtrlKeyPressed()
    {
        var ctrlState = CoreWindow.GetForCurrentThread().GetKeyState(VirtualKey.Control);
        return (ctrlState & CoreVirtualKeyStates.Down) == CoreVirtualKeyStates.Down;
    }

    protected async override void OnKeyUp(KeyRoutedEventArgs e)
    {
        base.OnKeyUp(e);
        if (IsCtrlKeyPressed())
        {
            if (e.Key == VirtualKey.E)
            {
                await EasterEggAsync();
            }
        }
    }

    /// <summary>
    /// Do something with an easter egg!
    /// </summary>
    /// <returns>The developer options async.</returns>
    private async Task EasterEggAsync()
    {
        // DO SOMETHING! 😀
        await DoAnEasterEggThing();
    }
}

Just like in our Android and iOS Shake examples, from here in UWP, we can get reference to our current Xamarin.Forms page and execute with some context by hitting (App.Current.MainPage as NavigationPage).CurrentPage assuming that the MainPage of our app is a NavigationPage.

In another post, we will look at combining these 3 platform methods to give ourselves as developers some tools to make our lives easier while debugging and testing!


If you like what you see, don’t forget to follow me on twitter @Suave_Pirate, check out my GitHub, and subscribe to my blog to learn more mobile developer tips and tricks!

Interested in sponsoring developer content? Message @Suave_Pirate on twitter for details.


Advertisements

Xamarin.Tip – Adding a Password Toggle Button in iOS

In a previous post, we looked at how easy it was to add a Password Toggle button in our Xamarin.Android apps (or native Android since it was only in the xml layout): Xamarin.Tip – Adding a Password Toggle Button in Android

So in this post, let’s work toward a similar behavior in our Xamarin Native iOS!

The basic premise is to extend the UITextField control and add a SubView to it for the button. Then on this UIButton.TouchUpInside, we want to toggle the UITextField.SecureTextEntry boolean property.

With that in mind, there are a number of ways we can do this!

  • Create a custom PasswordToggleTextField and design it in a xib to drag and drop the button
  • Add the UIButton at runtime everywhere we want to use it
  • My Favorite: Use NativeBehaviors and create a reusable behavior that can be attached to any given UITextField.

Let’s continue down this path with the NativeBehaviors approach. Of course, if you don’t want to do it this way, you can simply copy the code within the Behavior we create and apply it anywhere else.

NativeBehaviors is a package I created just a little while back that brings the Xamarin.Forms style Behavior pattern to native iOS, Android, and UWP controls. So if you’ve written Xamarin.Forms Behaviors before, this should be super familiar!

Let’s do this by creating a simple TextFieldTogglePasswordBehavior.

TextFieldTogglePasswordBehavior.cs

/// <summary>
/// Text field toggle password behavior.
/// </summary>
public class TextFieldTogglePasswordBehavior : NativeBehavior<UITextField>
{
    public override string BehaviorName => nameof(TextFieldTogglePasswordBehavior);

    private UIButton _togglePasswordButton;

    /// <summary>
    /// Attach show/hide button
    /// </summary>
    /// <param name="bindable">Bindable.</param>
    protected override void OnAttachedTo(UITextField bindable)
    {
        _togglePasswordButton = new UIButton()
        {
            Frame = new CGRect(0, 0, 50, 8)
        };

        _togglePasswordButton.SetTitle(bindable.SecureTextEntry ? "Show" : "Hide", UIControlState.Normal);
        _togglePasswordButton.SetTitleColor(UIColor.White, UIControlState.Normal);
        _togglePasswordButton.SetAttributedTitle(new Foundation.NSAttributedString(bindable.SecureTextEntry ? "Show" : "Hide", UIFont.SystemFontOfSize(12)), UIControlState.Normal);
        _togglePasswordButton.TouchUpInside += (sender, e) =>
        {
            var updatedIsPassword = !bindable.SecureTextEntry;
            bindable.SecureTextEntry = updatedIsPassword;
            _togglePasswordButton.SetTitle(updatedIsPassword ? "Show" : "Hide", UIControlState.Normal);
            _togglePasswordButton.SetAttributedTitle(new Foundation.NSAttributedString(updatedIsPassword ? "Show" : "Hide", UIFont.SystemFontOfSize(12)), UIControlState.Normal);
        };
        _togglePasswordButton.TitleLabel.TextColor = UIColor.White;
        bindable.RightViewMode = UITextFieldViewMode.Always;
        bindable.RightView = _togglePasswordButton;
        bindable.RightViewRect(new CGRect(0,0, 50,8));
    }

    /// <summary>
    /// Kill the button
    /// </summary>
    /// <param name="bindable">Bindable.</param>
    protected override void OnDetachingFrom(UITextField bindable)
    {
        _togglePasswordButton = null;
        bindable.RightView = null;
    }
}

If you read through the code a bit, you noticed that we simply create a UIButton, set its text to UIColor.White, and then update the text of the button to either “Show” or “Hide” depending on the state, and then in the TouchUpInside handler, we update that state as well as the SecureTextEntry property of the parent UITextField this behavior gets attached to!

You can also update this to use icons instead of regular text buttons to get a behavior closer to the Android treatment if you wanted. It’s just a button, so go crazy.

Now let’s take this behavior and attach it to an existing UITextField control that we have added to a UIViewController in our Storyboard.

In this example, I’m using a custom UITextField called MaterialTextField to show that this behavior is usable on the built in controls as well as any other custom UITextField:

LoginViewController.cs

public class LoginViewController : UIViewController 
{
    // note: this is now reusable if you want to apply the behavior to multiple fields
    // without creating a bunch of new instances.
    private readonly TextFieldTogglePasswordBehavior _togglePasswordBehavior = new TextFieldTogglePasswordBehavior();

    protected void ViewDidLoad() 
    {
        PasswordTextField.AttachBehavior(_togglePasswordBehavior);
    }
}

And that’s it! If we want to remove the button and detach the behavior, all we have to do is call:

PasswordTextField.DetachBehavior(_togglePasswordBehavior);

With all that together, we get a pretty neat control!

Screen Shot 2018-03-15 at 11.04.00 AMScreen Shot 2018-03-15 at 11.03.54 AM

In a future post, we can look at how to achieve this same concept in Xamarin.Forms – without using custom renderers!


If you like what you see, don’t forget to follow me on twitter @Suave_Pirate, check out my GitHub, and subscribe to my blog to learn more mobile developer tips and tricks!

Interested in sponsoring developer content? Message @Suave_Pirate on twitter for details.

Xamarin.Tip – Embed Your Xamarin.Forms Pages in Your iOS ViewControllers

The number one complaint I hear about Xamarin.Forms is the slow startup time of the applications that use it. The team at Xamarin has done a lot to help with this and give some more options such as XAML Compilation, Lazy Loading, and Ahead of Time Compilation. Check out some of David Ortinau’s suggestions here: 5 Ways to Boost Xamarin.Forms App Startup Time.

However, one of the best ways I’ve found to help with this issue is to use Xamarin.Forms Embedding to its full potential. Embedding became available in Xamarin.Forms 2.5 and at a high level allows you to embed your Xamarin.Forms pages into your Native Xamarin views by using the extension methods .CreateFragment(Context context); for Android and .CreateViewController(); for iOS. This is most commonly used for when you want to share some UI in your Xamarin Native apps using Xamarin.Forms, however you still need to call Xamarin.Forms.Init() which is one of the main culprits in the slow startup time.

For Android embedding, see: Xamarin.Tip – Embed Your Xamarin.Forms Pages in Your Android Activities

iOS

The solution proposed here still allows you to create almost all of your views in Xamarin.Forms by using embedding, but requires some architecture and design changes. The premise is this:

  • First ViewController is non-Xamarin.Forms and loads your app right away
  • Init Xamarin.Forms after this ViewController is loaded
  • Embed Xamarin.Forms pages in other ViewControllers
  • Lift navigation out of Xamarin.Forms and into the native navigation.

This also has advantages outside the startup time such as better performance on transitions, more natural look and feel to end-users, performance gains in other areas, and a smaller app-size.

This means:

  • No NavigationPage
  • No Xamarin.Forms toolbar (using the native UINavigationBar control instead)
  • Still have MVVM and all our bindings we would expect

So if you’re already using a framework that is not tied down to Xamarin.Forms such as MvvmLight, you don’t have to change much behind the scenes since the INavigationService is abstracted.

Let’s kick this off by creating an inheritable ViewController that handles the embedding and layout how we want. Be sure to use your Storyboard and have the RootViewController be a UINavigationController, then use this embeddable ViewController within that.

XamarinFormsViewController

/// <summary>
/// Base xamarin forms view controller. Used for embedding a Xamarin.Forms page within a native view controller.
/// When inheriting from this, be sure to create a ViewController within the storyboard as well so that navigation
/// can properly work.
/// </summary>
public abstract class XamarinFormsViewController<TPage> : UIViewController
    where TPage : ContentPage, new()
{
    protected TPage _page;


    public XamarinFormsViewController(IntPtr handle) : base(handle)
    {
    }

    /// <summary>
    /// Load the Xamarin.Forms Page's ViewController into the parent
    /// </summary>
    public override void ViewDidLoad()
    {
        base.ViewDidLoad();
        _page = new TPage();
        var xamarinFormsController = _page.CreateViewController();
        AddChildViewController(xamarinFormsController);
        View.AddSubview(xamarinFormsController.View);
        xamarinFormsController.DidMoveToParentViewController(this);

        // add whatever other settings you want - ex:
        EdgesForExtendedLayout = UIKit.UIRectEdge.None;
        ExtendedLayoutIncludesOpaqueBars = false;
        AutomaticallyAdjustsScrollViewInsets = false;

    }
}

When creating a child of this XamarinFormsViewController, be sure to also create an empty ViewController in your .storyboard file for each unique type. This is required for handling navigation using the storyboard and root UINavigationViewController. If you’re using .xib files for some reason, then don’t worry about it, just instantiate the XamarinFormsViewController itself (you’ll have to add the other constructor overloads though).

So now we can create a simple Xamarin.Forms page:

SomePage.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"     x:Class="MyApp.Pages.SomePage">
    <ContentPage.Content>
        <Grid>
            <Label Text="I'm Embedded!" HorizontalOptions="Center" VerticalOptions="Center"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Then create the associated ViewController:

SomeViewController.cs

public class SomeViewController: XamarinFormsViewController<SomePage>
{
    protected void ViewDidLoad()
    {
        base.ViewDidLoad();

        NavigationItem.Title = "Some title";
    }
}

Now all we have to do is kick off this SomeViewController after calling Xamarin.Forms.Init() and we are good to go! If we have a MainController we can call it before navigating if it isn’t initialized, or execute it in ViewDidLoad or a similar lifecycle event.

MainController.cs

public class MainController: UIViewController
{    

    protected override void ViewDidLoad()
    {
        base.ViewDidLoad();

        // assume SomeButton is created and named in the Storyboard file
        SomeButton.TouchUpInside += delegate 
        {
             if(!Xamarin.Forms.Forms.IsInitialized)
                 Xamarin.Forms.Forms.Init(this, savedInstance);

             var someController = this.Storyboard.InstantiateViewController("SomeController") as SomeViewController;
             NavigationController.PushViewController(someController, true);
        }
    } 
}

And there you have it! Some new Xamarin.Forms embedding for performance and other extra benefits 🙂

In future posts of this subject, we’ll look at extending interactions between the Xamarin.Forms Page and the native Activity and ViewControllers, using advanced native components with the embedded Xamarin.Forms Page, and more!

Let me know what you think of this pattern – have you used it? What else would you want to hear about it??

Be sure to checkout some of the Xamarin examples on embedding too!


If you like what you see, don’t forget to follow me on twitter @Suave_Pirate, check out my GitHub, and subscribe to my blog to learn more mobile developer tips and tricks!

Interested in sponsoring developer content? Message @Suave_Pirate on twitter for details.

Xamarin.Tip – Adding a Password Toggle Button in Android

Here’s another quick tip to use when building your Android apps whether in Xamarin, or native in Java/Kotlin. Depending on the target audience of your application, you may find it necessary to add a password toggle button to your password EditText to allow users to view and hide their password while typing it.

In this post, we will explore how to do this in Android natively while future posts will cover iOS (which is more involved) as well as building a Xamarin.Forms custom Entry view (no renderer’s required!) to handle the toggling.

There are two places to achieve this in Android – in the xml of the layout resource, or in the code behind where manipulating the view. Luckily, Android (unlike iOS) has this feature built in to the properties of the TextInputLayout control.

We get the ability to show the button as well as apply a custom Drawable if we want!

Using the Layout Resource

Here is an example using the TextInputLayout from the xml side to wrap an EditText:

activity_login.axml

<android.support.design.widget.TextInputLayout
    android:id="@+id/password_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:passwordToggleEnabled="true"
    app:passwordToggleTint="@android:color/white">
    <android.support.design.widget.TextInputEditText
        android:id="@+id/password_editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:password="true"
        android:hint="Password"
        android:textColor="@android:color/white"
        android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>

Notice the two properties:

app:passwordToggleEnabled="true"

and

app:passwordToggleTint="@android:color/white"

These are the two that control showing the password toggle. Alternatively, you can set the

app:passwordToggleDrawable="@drawable/someDrawable"

Using Code

If you’re manipulating your TextInputLayout in your code, you can also update these fields very easily:

LoginActivity.cs

public class LoginActivity : AppCompatActivity
{
    protected override void OnCreate(Bundle savedInstance)
    {
        base.OnCreate(savedInstance);
        SetContentView(Resource.Layout.activity_login);

        var editTextLayout = FindViewById<TextInputLayout>(Resource.Id.password_layout);

        editTextLayout.PasswordVisibilityToggleEnabled = true;
    }
}

That’s it!

Results

Take a look for yourself!

Screen Shot 2018-03-15 at 11.04.31 AM
Screen Shot 2018-03-15 at 11.04.40 AM


If you like what you see, don’t forget to follow me on twitter @Suave_Pirate, check out my GitHub, and subscribe to my blog to learn more mobile developer tips and tricks!

Interested in sponsoring developer content? Message @Suave_Pirate on twitter for details.

Xamarin.Tip – Embed Your Xamarin.Forms Pages in Your Android Activities

The number one complaint I hear about Xamarin.Forms is the slow startup time of the applications that use it. The team at Xamarin has done a lot to help with this and give some more options such as XAML Compilation, Lazy Loading, and Ahead of Time Compilation. Check out some of David Ortinau’s suggestions here: 5 Ways to Boost Xamarin.Forms App Startup Time.

However, one of the best ways I’ve found to help with this issue is to use Xamarin.Forms Embedding to its full potential. Embedding became available in Xamarin.Forms 2.5 and at a high level allows you to embed your Xamarin.Forms pages into your Native Xamarin views by using the extension methods .CreateFragment(Context context); for Android and .CreateViewController(); for iOS. This is most commonly used for when you want to share some UI in your Xamarin Native apps using Xamarin.Forms, however you still need to call Xamarin.Forms.Init() which is one of the main culprits in the slow startup time.

The solution proposed here still allows you to create almost all of your views in Xamarin.Forms by using embedding, but requires some architecture and design changes. The premise is this:

  • First Activity is non-Xamarin.Forms and loads your app right away
  • Init Xamarin.Forms after this activity is loaded
  • Embed Xamarin.Forms pages in other Activities
  • Lift navigation out of Xamarin.Forms and into the native navigation.

This also has advantages outside the startup time such as better performance on transitions, more natural look and feel to end-users, performance gains in other areas, and a smaller app-size.

This means:

  • No NavigationPage
  • No Xamarin.Forms toolbar (using the native Toolbar control instead)
  • Still have MVVM and all our bindings we would expect

So if you’re already using a framework that is not tied down to Xamarin.Forms such as MvvmLight, you don’t have to change much behind the scenes since the INavigationService is abstracted.

Let’s kick this off by creating an inheritable Activity that handles the embedding and layout how we want.

xamarin_forms_activity.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.design.widget.AppBarLayout     
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:layout_gravity="top"
        app:elevation="0dp">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </android.support.design.widget.AppBarLayout>
    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

This layout gives us the native Android toolbar (with the shadow! Another plus!) and a space for us to embed in this FrameLayout.

Now let’s create the Activity:

XamarinFormsActivity.cs

/// <summary>
/// Base xamarin forms activity.
/// This activity contains a single fragment in the layout and renders the fragment pulled from the Xamarin.Forms page
/// </summary>
public abstract class XamarinFormsActivity<TPage> : AppCompatActivity
    where TPage : ContentPage, new()
{
    protected readonly TPage _page;
    protected int _containerLayoutId = Resource.Layout.activity_fragment_container;
    public Android.Support.V7.Widget.Toolbar Toolbar { get; set; }
    public AppBarLayout AppBar { get; set; }

    public XamarinFormsActivity()
    {
        _page = new TPage();
    }

    /// <summary>
    /// Creates the activity and maps the Xamarin.Forms page to the fragment
    /// </summary>
    /// <param name="savedInstanceState">Saved instance state.</param>
    protected override void OnCreate(Android.OS.Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        SetContentView(Resource.Layout.xamarin_forms_activity);

        Toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
        if (Toolbar?.Parent != null)
        {
            AppBar = Toolbar?.Parent as AppBarLayout;
            SetSupportActionBar(Toolbar);
        }

        // register the fragment
        var transaction = SupportFragmentManager.BeginTransaction();
        transaction.Add(Resource.Id.fragment_container, _page.CreateSupportFragment(this));
        transaction.Commit();
        SupportActionBar?.SetDisplayHomeAsUpEnabled(true);
        SupportActionBar?.SetDisplayShowHomeEnabled(true);
        Toolbar?.SetBackgroundColor(Android.Graphics.Color.White);
        // everything else from this point should be managed by the Xamarin.Forms page behind the fragment
    }
}

So now we can create a simple Xamarin.Forms page:

SomePage.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"     x:Class="MyApp.Pages.SomePage">
    <ContentPage.Content>
        <Grid>
            <Label Text="I'm Embedded!" HorizontalOptions="Center" VerticalOptions="Center"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Then create the associated Activity:

SomeActivity.cs

public class SomeActivity : XamarinFormsActivity<SomePage>
{
    protected override void OnCreate(Bundle savedInstance)
    {
        SupportActionBar.Title = "Some Page";
    }
}

Now all we have to do is kick off this SomeActivity after calling Xamarin.Forms.Init() and we are good to go! If we have a MainActivity we can call it before navigating if it isn’t initialized, or execute it in OnResume or a similar lifecycle event.

MainActivity.cs

public class MainActivity : AppCompatActivity 
{    

    protected override void OnCreate(Bundle savedInstance)
    {
        base.OnCreate(savedInstance);
        SetContentView(Resource.Layout.main_activity);
        var someButton = FindViewBy<Button>(Resource.Id.some_button);
        someButton.Click += delegate 
        {
             if(!Xamarin.Forms.Forms.IsInitialized)
                 Xamarin.Forms.Forms.Init(this, savedInstance);
             StartActivity(typeof(SomeActivity));
        }
    } 
}

And there you have it! Some new Xamarin.Forms embedding for performance and other extra benefits 🙂

In future posts of this subject, we’ll look at the same setup for iOS, extending interactions between the Xamarin.Forms Page and the native Activity and ViewControllers, using advanced native components with the embedded Xamarin.Forms Page, and more!

Let me know what you think of this pattern – have you used it? What else would you want to hear about it??

Be sure to checkout some of the Xamarin examples on embedding too!


If you like what you see, don’t forget to follow me on twitter @Suave_Pirate, check out my GitHub, and subscribe to my blog to learn more mobile developer tips and tricks!

Interested in sponsoring developer content? Message @Suave_Pirate on twitter for details.

Xamarin.Tip – No Bounce ScrollView in Xamarin.Forms

So on iOS, UIScrollView bounces by default so in Xamarin.Forms the ScrollView natrually bounces. But what if you don’t want your ScrollView to bounce? Android doesn’t bounce, so we won’t worry about it.

Let’s solve this problem with a custom renderer and control called NoBounceScrollView. This could also be done with an Effect but I like to have a custom control with the verbosity and flexibility with a renderer.

Let’s start by building a simple control in our Xamarin.Forms project:

NoBounceScrollView.cs

public class NoBounceScrollView : ScrollView { }

We don’t need anything in it since we are just going to assume it should never bounce and doesn’t affect the ScrollView in any other way. If you want, you can add a bindable property here to set Bouncable or something like that to true or false. Note: if you don’t want your ScrollView to bounce ever, then you don’t need this. Instead just have your renderer replace the default ScrollView renderer.

So we have our Xamarin.Forms control to build the renderer for, so now let’s create the iOS renderer:

NoBounceScrollViewRenderer.cs

public class NoBounceScrollViewRenderer : ScrollViewRenderer
{

    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);
        UpdateScrollView();
    }

    private void UpdateScrollView()
    {
        ContentInset = new UIKit.UIEdgeInsets(0, 0, 0, 0);
        if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0))
            ContentInsetAdjustmentBehavior = UIKit.UIScrollViewContentInsetAdjustmentBehavior.Never;
        Bounces = false;
        ScrollIndicatorInsets = new UIKit.UIEdgeInsets(0, 0, 0, 0);
    }
}

What this is doing is setting the content insets to 0 so we don’t have empty space on top or bottom that the bouncing adds, and we also set Bounces to false. Note that the ContentInsetAdjustmentBehavior is only available on iOS 11 and higher, so for that extra step, we need to check the current iOS version.

Lastly, be sure to register your renderer:

[assembly: ExportRenderer(typeof(NoBounceScrollView), typeof(NoBounceScrollViewRenderer))]

or if you are replacing all ScrollViews:

[assembly: ExportRenderer(typeof(ScrollView), typeof(NoBounceScrollViewRenderer))]

Now we have everything we need! So let’s use it in our page:

MainPage.xaml

<ContentPage ...>
    <components:NoBounceScrollView>
        <StackLayout>
            ...
        </StackLayout>
    </components:NoBounceScrollView>
</ContentPage>

Check out the difference!

You can see this control in action with the EF Go Ahead Tours Companion App


If you like what you see, don’t forget to follow me on twitter @Suave_Pirate, check out my GitHub, and subscribe to my blog to learn more mobile developer tips and tricks!

Interested in sponsoring developer content? Message @Suave_Pirate on twitter for details.

Xamarin.Tip – Dynamic Elevation Frames

How about some more Material Design based controls for Xamarin.Forms?

A while back I wrote about creating more “Material” Frames in your Xamarin.Forms apps using a custom renderer for iOS: Xamarin.Tip – Making Your iOS Frame Shadows More Material

And also wrote about the MaterialButton control I created that added dynamic Elevation properties for both iOS and Android:
Xamarin.Tip – Adding Dynamic Elevation to Your Xamarin.Forms Buttons

And I’ve been getting requests to talk about how to do it with the Frame control in Xamarin.Forms. Spoiler Alert: It’s basically the exact same thing as the MaterialButton…..

Let’s start by creating a custom Frame class in our Xamarin.Forms project:

MaterialFrame.cs

public class MaterialFrame : Frame
{
    public static BindableProperty ElevationProperty = BindableProperty.Create(nameof(Elevation), typeof(float), typeof(MaterialButton), 4.0f);

    public float Elevation
    {
        get
        {
            return (float)GetValue(ElevationProperty);
        }
        set
        {
            SetValue(ElevationProperty, value);
        }
    }
}

We add our bindable Elevation property with a default value of 4.

Now we just need simple custom renderers for our iOS and Android implementations.

Starting with iOS:

MaterialFrameRenderer_iOS.cs

public class MaterialFrameRenderer : FrameRenderer
{
    public static void Initialize()
    {
        // empty, but used for beating the linker
    }
    protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
    {
        base.OnElementChanged(e);

        if (e.NewElement == null)
            return;
        UpdateShadow();
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
        if(e.PropertyName == "Elevation")
        {
            UpdateShadow();
        }
    }

    private void UpdateShadow()
    {

        var materialFrame = (MaterialFrame)Element;

        // Update shadow to match better material design standards of elevation
        Layer.ShadowRadius = materialFrame.Elevation;
        Layer.ShadowColor = UIColor.Gray.CGColor;
        Layer.ShadowOffset = new CGSize(2, 2);
        Layer.ShadowOpacity = 0.80f;
        Layer.ShadowPath = UIBezierPath.FromRect(Layer.Bounds).CGPath;
        Layer.MasksToBounds = false;

    }
}

And now the simple Android renderer that can use the built in Elevation properties

MaterialFrameRenderer_Android.cs

public class MaterialFrameRenderer : Xamarin.Forms.Platform.Android.AppCompat.FrameRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
    {
        base.OnElementChanged(e);
        if (e.NewElement == null)
            return;

        UpdateElevation();
    }


    private void UpdateElevation()
    {
        var materialFrame= (MaterialFrame)Element;

        // we need to reset the StateListAnimator to override the setting of Elevation on touch down and release.
        Control.StateListAnimator = new Android.Animation.StateListAnimator();

        // set the elevation manually
        ViewCompat.SetElevation(this, materialFrame.Elevation);
        ViewCompat.SetElevation(Control, materialFrame.Elevation);
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
        if(e.PropertyName == "Elevation")
        {
            UpdateElevation();
        }
    }
}

Now with both our renderers, we can reference our MaterialFrame component in our content!

<ContentPage ...>
    <StackLayout>
        <components:MaterialFrame Elevation="6" />
        <components:MaterialFrame Elevation="{Binding SomeNumber}"/>
    </StackLayout>
</ContentPage>

And that’s it! Now you can control the elevation of your frames for both iOS and Android in Xamarin.Forms:
iOSMaterialFrameAndLabel


If you like what you see, don’t forget to follow me on twitter @Suave_Pirate, check out my GitHub, and subscribe to my blog to learn more mobile developer tips and tricks!

Interested in sponsoring developer content? Message @Suave_Pirate on twitter for details.