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.

Advertisements

Xamarin.Tip – iOS CardView

We’ve talked here before plenty of times on ways we can bring Material Design to iOS, but mostly in the context of Xamarin.Forms. In this quick Xamarin.Tip, we will look at a super simple control to create a CardView in Xamarin.iOS – not Xamarin.Forms.

If you’re looking for the Xamarin.Forms implementation of this concept, check out this post: Xamarin.Tips – Making Your iOS Frame Shadows More Material

I may end up making a quick NuGet package for this control, even just to save me some time with implementing it over and over again, but don’t hold me to it.

Make Your Own CardView

The goal here is to create a view that fills the need of the Material Design CardView spec, and make it customizable within the storyboard editor (oh yeah, storyboard support is awesome).

This can all be achieved with a super simple class:

CardView.cs

    /// <summary>
    /// A simple view with child views to have a set shadow in design time.
    /// This can be imported into a storyboard or xib with these design time variables
    /// </summary>
    [Register("CardView"), DesignTimeVisible(true)]
    public class CardView : UIView
    {
        private float cornerRadius;
        private UIColor shadowColor;
        private int shadowOffsetHeight;
        private int shadowOffsetWidth;
        private float shadowOpacity;

        [DisplayName("Shadow Opacity"), Export("shadowOpacity"), Browsable(true)]
        public float ShadowOpacity
        {
            get { return shadowOpacity; }
            set
            {
                shadowOpacity = value;
                SetNeedsDisplay();
            }
        }

        [DisplayName("Shadow Offset Width"), Export("shadowOffsetWidth"), Browsable(true)]
        public int ShadowOffsetWidth
        {
            get { return shadowOffsetWidth; }
            set
            {
                shadowOffsetWidth = value;
                SetNeedsDisplay();
            }
        }

        [DisplayName("Shadow Offset Height"), Export("shadowOffsetHeight"), Browsable(true)]
        public int ShadowOffsetHeight
        {
            get { return shadowOffsetHeight; }
            set
            {
                shadowOffsetHeight = value;
                SetNeedsDisplay();
            }
        }

        [DisplayName("Corner Radius"), Export("CornerRadius"), Browsable(true)]
        public float CornerRadius
        {
            get { return cornerRadius; }
            set
            {
                cornerRadius = value;
                SetNeedsDisplay();
            }
        }

        [DisplayName("Shadow Color"), Export("ShadowColor"), Browsable(true)]
        public UIColor ShadowColor
        {
            get { return shadowColor; }
            set
            {
                shadowColor = value;
                SetNeedsDisplay();
            }
        }

        public CardView()
        {
            Initialize();
        }

        public CardView(NSCoder coder) : base(coder)
        {
            Initialize();
        }

        protected CardView(NSObjectFlag t) : base(t)
        {
            Initialize();
        }

        protected internal CardView(IntPtr handle) : base(handle)
        {
        }

        public CardView(CGRect frame) : base(frame)
        {
            Initialize();
        }


        public override void AwakeFromNib()
        {
            base.AwakeFromNib();
            Initialize();
        }

        private void Initialize()
        {
            ShadowColor = UIColor.Gray;
            CornerRadius = 0;
            ShadowOffsetHeight = 1;
            ShadowOffsetWidth = 0;
            ShadowOpacity = 0.2f;
            SetupCard();
        }

        private void SetupCard()
        {
            Layer.CornerRadius = CornerRadius;
            UIBezierPath bezierPath = UIBezierPath.FromRoundedRect(Bounds, CornerRadius);
            Layer.MasksToBounds = false;
            Layer.ShadowColor = ShadowColor.CGColor;
            Layer.ShadowOffset = new CGSize(shadowOffsetWidth, shadowOffsetHeight);
            Layer.ShadowOpacity = shadowOpacity;
            Layer.ShadowPath = bezierPath.CGPath;
        }

        public override void LayoutSubviews()
        {
            base.LayoutSubviews();
            SetupCard();
        }
    }

What’s going on here is that we register properties such as the CornerRadius and all the shadow properties, and also register the CardView class itself with decorator attributes DesignTimeVisible, Register, Export, and DisplayName.

So now, all we have to do is go to our storyboard, and change the class of a UIView to our CardView, then we will see these properties as options to edit.

You can now use the storyboard editor to add subview to the CardView and create a UI that is simply awesome, like this!
Screen Shot 2018-03-23 at 2.03.00 PM


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 – iOS Pill Button (with Storyboard Support)

Here’s another simple but useful control for Xamarin.iOS – the PillButton. The name describes it pretty well, it’s a button shaped like a pill or capsule and allows for managing the border color within your storyboard files by exposing an outlet for the color.

In the end, we want something that looks like this:
Screen Shot 2018-03-14 at 2.45.59 PM

Let’s create a simple PillButton class:

PillButton.cs

    /// <summary>
    /// Pill button. A button in a capsule shape
    /// </summary>
    [Register("PillButton"), DesignTimeVisible(true)]
    public class PillButton : UIButton
    {
        [DisplayName("Border Color"), Export("BorderColor"), Browsable(true)]
        public UIColor BorderColor { get; set; } = UIColor.Clear;

        public PillButton(IntPtr handle)
            : base(handle)
        {

        }

        public PillButton(CGRect frame)
            : base(frame)
        {
            SetupBorder();
        }

        public override void AwakeFromNib()
        {
            base.AwakeFromNib();
            SetupBorder();
        }

        /// <summary>
        /// Sets up the border radius and the color
        /// </summary>
        protected void SetupBorder()
        {
            Layer.BorderColor = BorderColor.CGColor;
            Layer.BorderWidth = 2;
            Layer.CornerRadius = Frame.Height / 2;
            Layer.MasksToBounds = true;
        }
    }

Let’s breakdown how this works:

  • We setup the border to use the Border color property and apply it to the layer
  • Apply the CornerRadius as 1/2 the height of the final frame
  • Call this SetupBorder() method from the constructor as well as in AwakeFromNib() which is called by the storyboard renderer.
  • We also need to decorate our class with a Register and DesignTimeVisible attribute in order for it to be usable in the storyboard
  • Lastly we need to decorate our BorderColor property with [DisplayName("Border Color"), Export("BorderColor"), Browsable(true)] so it can be used in the storyboard as well.

Now in our storyboard files, we can drag and drop a UIButton on the ViewController, then set the class to our PillButton, and once we do we can see the property exposed for the BorderColor:
Screen Shot 2018-03-14 at 2.47.41 PM

Also, we can even see these applied in our storyboard so that it really does look like it will in the app:

Screen Shot 2018-03-14 at 2.47.17 PM

And that’s it! The moral of the story is to not be afraid to subclass controls to make your life easier when re-using them. It’s a normal practice in iOS development, and that practice comes right on over to our Xamarin.iOS development!


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 – Bindable iOS UIRefreshControl

Here’s another super simple tip that has made my life easier with a basic control for iOS – the BindableRefreshControl. The premise is to wrap the BeginRefreshing() and EndRefreshing() calls into a bindable property that can be applied with a one-way binding from a ViewModel.

To premise this a bit, the existing UIRefreshControl from iOS has the two methods mentioned above as well as a Refreshing bool property that is readonly. The need for wrapping this in a property came from wanting to bind my native ViewControllers to a ViewModel and a property such as IsLoading.

So here’s the control:

BindableRefreshControl.cs

    /// <summary>
    /// Bindable refresh control.
    /// Adds a refresh event to bind to.
    /// </summary>
    public class BindableRefreshControl : UIRefreshControl
    {
        private bool _isRefreshing;
        public bool IsRefreshing
        {
            get
            {
                return _isRefreshing;
            }
            set
            {
                _isRefreshing = value;
                if (value)
                    BeginRefreshing();
                else
                    EndRefreshing();
            }
        }
    }

Yeah that’s literally it.

However, I now can use it like this (using MvvmLight):

MainViewModel.cs

public class MainViewModel : ViewModelBase
{
    private bool _isLoading;
    public bool IsLoading
    {
        get
        {
            return _isLoading;
        }
        set
        {
            Set(ref _isLoading, value);
        }
    }
}

And in the ViewController:
MainViewController.cs

public class MainViewController : UIViewController
{
    private BindableRefreshControl _refreshControl;
    private MainViewModel _viewModel;
    protected override void ViewDidLoad() 
    {
        _viewModel = new MainViewModel();
        _refreshControl = new BindableRefreshControl();
        ...
        ...
        this.SetBinding(() => _viewModel.IsLoading,
                        () => _refreshControl.IsRefreshing));
    }
}

And like that, your native iOS spinners can be easily bound to your view model properties!


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.NuGet – Xamarin.Forms Dynamic Bindable StackLayout

I recently released a component I commonly use in my Xamarin.Forms applications for binding data to a wrapping layout here: Xamarin.NuGet – DynamicWrapLayout Announcement! In the spirit of this type of control, I’ve also released a new NuGet package for a bindable DynamicStackLayout. It’s a simple control that allows you to create a StackLayout and bind an ItemsSource collection and an ItemTemplate. This is useful for smaller, but dynamic collections with the use of the orientation changing of a StackLayout. This means you could have a horizontally scrolling list of cards, bind the orientation or change it to vertical, and play with positioning more easily than using a ListView. I would still highly suggest using a ListView over this control for a standard vertical stack of dynamic content since this control does NOT use any view recycling or virtualization which can cause performance issues with large collections or constantly changing collection.

Get it here

NuGet: https://www.nuget.org/packages/DynamicStackLayout

Github: https://github.com/SuavePirate/DynamicStackLayout

In the end, you get something like this!

Be sure to read the documentation below:

DynamicStackLayout

A Xamarin.Forms layout for creating dynamically wrapped views. Inspired by the WrapLayout example: https://developer.xamarin.com/samples/xamarin-forms/UserInterface/CustomLayout/WrapLayout/

Installation

It’s on NuGet! https://www.nuget.org/packages/DynamicStackLayout/

Install-Package DynamicStackLayout

Be sure to install in all projects that use it.

Usage

There are two key properties that make this control useful – the ItemsSource (like a ListView) and the ItemTemplate (although, you can also just add children to the view – it does both!)
Be sure to wrap it in a ScrollView though

XAML

Add the xmlns:

xmlns:suave=&quot;clr-namespace:SuaveControls.DynamicStackLayout;assembly=SuaveControls.DynamicStackLayout&quot;

Use it in your View:

&lt;ScrollView&gt;
    &lt;suave:DynamicStackLayout ItemsSource=&quot;{Binding Items}&quot; HorizontalOptions=&quot;Fill&quot;&gt;
        &lt;suave:DynamicStackLayout.ItemTemplate&gt;
            &lt;DataTemplate&gt;
                &lt;StackLayout BackgroundColor=&quot;Gray&quot; WidthRequest=&quot;120&quot; HeightRequest=&quot;180&quot;&gt;
                    &lt;Label Text=&quot;{Binding .}&quot; VerticalOptions=&quot;FillAndExpand&quot; HorizontalOptions=&quot;FillAndExpand&quot; VerticalTextAlignment=&quot;Center&quot; HorizontalTextAlignment=&quot;Center&quot; /&gt;
                &lt;/StackLayout&gt;
            &lt;/DataTemplate&gt;
        &lt;/suave:DynamicStackLayout.ItemTemplate&gt;
    &lt;/suave:DynamicStackLayout&gt;
&lt;/ScrollView&gt;

Don’t like data-binding and want to just use child views? You can do that too!

&lt;ScrollView&gt;
    &lt;suave:DynamicStackLayout HorizontalOptions=&quot;Fill&quot;&gt;
      &lt;StackLayout BackgroundColor=&quot;Gray&quot; WidthRequest=&quot;120&quot; HeightRequest=&quot;180&quot;&gt;
          &lt;Label Text=&quot;0&quot; TextColor=&quot;White&quot; VerticalOptions=&quot;FillAndExpand&quot; HorizontalOptions=&quot;FillAndExpand&quot; VerticalTextAlignment=&quot;Center&quot; HorizontalTextAlignment=&quot;Center&quot; /&gt;
      &lt;/StackLayout&gt;
      &lt;StackLayout BackgroundColor=&quot;Gray&quot; WidthRequest=&quot;120&quot; HeightRequest=&quot;180&quot;&gt;
          &lt;Label Text=&quot;1&quot; TextColor=&quot;White&quot; VerticalOptions=&quot;FillAndExpand&quot; HorizontalOptions=&quot;FillAndExpand&quot; VerticalTextAlignment=&quot;Center&quot; HorizontalTextAlignment=&quot;Center&quot; /&gt;
      &lt;/StackLayout&gt;
      &lt;StackLayout BackgroundColor=&quot;Gray&quot; WidthRequest=&quot;120&quot; HeightRequest=&quot;180&quot;&gt;
          &lt;Label Text=&quot;2&quot; TextColor=&quot;White&quot; VerticalOptions=&quot;FillAndExpand&quot; HorizontalOptions=&quot;FillAndExpand&quot; VerticalTextAlignment=&quot;Center&quot; HorizontalTextAlignment=&quot;Center&quot; /&gt;
      &lt;/StackLayout&gt;
      &lt;StackLayout BackgroundColor=&quot;Gray&quot; WidthRequest=&quot;120&quot; HeightRequest=&quot;180&quot;&gt;
          &lt;Label Text=&quot;3&quot; TextColor=&quot;White&quot; VerticalOptions=&quot;FillAndExpand&quot; HorizontalOptions=&quot;FillAndExpand&quot; VerticalTextAlignment=&quot;Center&quot; HorizontalTextAlignment=&quot;Center&quot; /&gt;
      &lt;/StackLayout&gt;
      &lt;StackLayout BackgroundColor=&quot;Gray&quot; WidthRequest=&quot;120&quot; HeightRequest=&quot;180&quot;&gt;
          &lt;Label Text=&quot;4&quot; TextColor=&quot;White&quot; VerticalOptions=&quot;FillAndExpand&quot; HorizontalOptions=&quot;FillAndExpand&quot; VerticalTextAlignment=&quot;Center&quot; HorizontalTextAlignment=&quot;Center&quot; /&gt;
      &lt;/StackLayout&gt;
    &lt;/suave:DynamicStackLayout&gt;
&lt;/ScrollView&gt;

Features

  • Bindable child views
  • Bindable to collections
  • Handles layout changing well (try rotating the device)
  • Doesn’t require custom renderers (All Xamarin.Forms baby!)

Notes

This does not use any native view virtualization, which means performance does not scale well with extremely large data sets.

Coming soon

  • ItemSelected event and SelectedItem bindable property (for now, you can add custom gestures and commands to your DataTemplate and handle the events yourself)
  • Better Collection Updating

 

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.iOS RKNotificationHub NuGet Announcement!

More awesome iOS controls coming our way as Xamarin developers! I’ve gone ahead and added another UI control to NuGet which is an incredibly useful little notification manager to add badges to any control or any frame in our view.

Check out the NuGet and GitHub project:

NuGet: https://www.nuget.org/packages/RKNotificationHub/
GitHub: https://github.com/SuavePirate/Xamarin-RKNotificationHub

Documentation


Xamarin RKNotificationHub

A Xamarin.iOS library for adding badges to any UIView, UIBarButtonItem, or position on the screen. You can also animate your badges!

Installation

Use NuGet!
Install-Package RKNotificationHub
https://www.nuget.org/packages/RKNotificationHub/

Usage

Once installed, create an RKNotificationHub.

var hub = new RKNotificationHub.RKNotificationHub(myView);
// or...
var hub = new RKNotificationHub.RKNotificationHub(myUIBarButtonItem);
// or...
var hub = new RKNotificationHub.RKNotificationHub();

You can then set or change the view or position of the circle:

hub.SetView(myView);
hub.SetCircleAtFrame(myFrame);

You can also set the color:

hub.SetCircleColor(circleColor, labelColor);

Then you can change the value of the notifcation:

hub.Increment();
hub.IncrementBy(10);
hub.Decrement();
hub.DecrementBy(10);
hub.HideCount();
hub.ShowCount();

And of course you can play with styles and animations!

hub.Bump();
hub.Blink();
hub.Pop();
hub.MoveCircleByX(x,y);
hub.ScaleCircleSizeBy(3);

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.iOS UITextField Shaker NuGet Announcement!

Shake up those text boxes with the newest UITextFieldShaker now available on NuGet!

This is a Xamarin.iOS Binding Library around a popular iOS extension called UITextField+Shake developed by Andrea Mazzini.

Check out the binding GitHub here: https://github.com/SuavePirate/UITextFieldShaker
And the NuGet here: https://www.nuget.org/packages/UITextFieldShaker/

UITextFieldShaker

Be sure to check out the documentation here or on GitHub:

Documentation


UITextFieldShaker

A Xamarin.iOS Binding implementation of the UITextField+Shaker extension.

Installation

Use NuGet!

Install-Package UITextFieldShaker

https://www.nuget.org/packages/UITextFieldShaker

Usage

Simply include the namespace, and start calling Shake() on your UITextFields!

MyTextField.Shake();

There are a number of overloads to allow you to choose how many times it shakes, the delta between shakes, add an action when the shaking is done, choose the direction it shakes, and more.

void Shake();
void Shake(int times, nfloat delta);
void Shake(int times, nfloat delta, Action handler);
void Shake(int times, nfloat delta, double interval);
void Shake(int times, nfloat delta, double interval, Action handler);
void Shake(int times, nfloat delta, double interval, ShakeDirection shakeDirection);
void Shake(int times, nfloat delta, double interval, ShakeDirection shakeDirection, Action handler);

Start Shaking!


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.