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.Forms MarkdownTextView NuGet Announcement!

A while back I talked about building your own Markdown Label / TextView to your Xamarin applications including Xamarin Native and Xamarin Forms. I decided to put the control I’ve been working off of over on NuGet so anyone can use its basic form.

Note that this control isn’t final, I am working on some refactoring and enhancements, but if you want something that just works, then give it a shot, or contribute to the repository!

Previous Posts

Down below you can find the documentation as it’s found on the GitHub repo!

MarkdownTextView

alt tag

A Xamarin.Forms component to display markdown text in a TextView

Installation

Now on NuGet!

Install-Package MarkdownTextView.Forms

https://www.nuget.org/packages/MarkdownTextView.Forms

Usage

  • Call Init before calling Xamarin.Forms.Init()
  • iOS: SPControls.MarkdownTextView.iOS.MarkdownTextView.Init();
  • Android: SPControls.MarkdownTextView.Droid.MarkdownTextView.Init();
  • Use the control
  • In Xaml:
<ContentPage ...
             xmlns:spcontrols="clr-namespace:SPControls.Forms;assembly=SPControls.MarkdownTextView"
             ...>
  <spcontrols:MarkdownTextView Markdown="{Binding MarkdownString}" />
</ContentPage>
  • or in C#:
var mdTextView = new MarkdownTextView();
mdTextView.Markdown = "# this is my *header* tag";

TODO

  • Add other properties for updating markdown settings
  • Add text color settings
  • Add UWP Support

Xamarin.NuGet – Native Behaviors

I’ve been doing a lot of mix development between Xamarin.Forms and Native Xamarin iOS/Android. Because of this, we abstract away concepts that can be shared regardless of using Xamarin.Forms or not. One thing I personally like, and use all the time, is Xamarin.Forms Behaviors. I wanted a way to use the same pattern with my native components. I went ahead and created NativeBehaviors.

Get it

Concepts

Like mentioned above, we wanted to follow the same style as Xamarin.Forms Behaviors without having a dependency on Xamarin.Forms. You can create a NativeBehavior for any native control, and then handle attaching and detaching the behavior within the lifecycle of your ViewController, Activity, Fragment, etc.

This helps us keep our event handling cleaned up in memory while still being useful, easy to follow, re-usable, and flexible.

Documentation

Read below for the documentation on how to build your own NativeBehaviors and start making your controls more flexible!

NativeBehaviors

A behaviors implementation for Xamarin Native controls meant to reflect the usefulness of Xamarin.Forms.Behaviors

Installation

This project is up on NuGet now:

Install-Package NativeBehaviors

Usage

These behaviors are meant to reflect the same use as Xamarin.Forms Behaviors, but require a little more work to manage the lifecycle of events since native views don’t have a collection of Behaviors as a property.

  1. Create a custom Behavior on your native platform. This example will use an iOS UITextField

TextFieldPhoneMaskBehavior.cs

/// <summary>
/// Text field phone mask behavior.
/// Format of (###) ###-####
/// </summary>
public class TextFieldPhoneMaskBehavior : NativeBehavior<UITextField>
{
    public override string BehaviorName => nameof(TextFieldPhoneMaskBehavior);

    private string _previousText = string.Empty;
    /// <summary>
    /// Attach text changed event
    /// </summary>
    /// <param name="bindable">Bindable.</param>
    protected override void OnAttachedTo(UITextField bindable)
    {
        bindable.EditingChanged += Bindable_TextChanged;
    }

    /// <summary>
    /// Detach event
    /// </summary>
    /// <param name="bindable">Bindable.</param>
    protected override void OnDetachingFrom(UITextField bindable)
    {
        bindable.EditingChanged -= Bindable_TextChanged;
    }

    /// <summary>
    /// Apply mask
    /// </summary>
    /// <param name="sender">Sender.</param>
    /// <param name="e">E.</param>
    void Bindable_TextChanged(object sender, EventArgs e)
    {
        var textField = sender as UITextField;

        // only apply change if typing forward
        if (textField != null && textField.Text.Length > _previousText.Length)
        {
            if (textField.Text.Length == 1)
            {
                // we have our first number, add the ( behind it
                textField.Text = $"({textField.Text}";
            }
            if (textField.Text.Length == 4)
            {
                // finish the area code
                textField.Text += ") ";
            }
            if (textField.Text.Length == 9)
            {
                // add dash
                textField.Text += "-";
            }
        }
        _previousText = textField.Text;
    }
}
  1. Attach Behavior in lifecycle

MyViewController.cs

using NativeBehaviors; // needed for extension method
...
private TextFieldPhoneMaskBehavior _phoneMaskBehavior;

protected override void ViewWillAppear(bool animated)
{
    ...
    _phoneMaskBehavior = new TextFieldPhoneMaskBehavior();
    myTextField.AttachBehavior(_phoneMaskBehavior);
    ...
}
...
  1. Detach Behavior in lifecycle

MyViewController.cs

using NativeBehaviors; // needed for extension method
...
protected override void ViewDidDisappear()
{
    ...
    myTextField.DetachBehavior(_phoneMaskBehavior);
    ...
}
...

Use the OnCreate and OnDestroy events in your Android Activities.

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.

Markdig Extension – Bad Header Handler

First off, if you haven’t seen Markdig yet, you’re missing out! It has to be the most extensible Markdown processor I’ve ever seen, and it is still incredibly fast. It’s slim enough to confidently use on small .NET Clients like Xamarin, and supports custom output as well (not just HTML).

Because of it’s flexibility and componentization, we are able to customize it without sacrificing performance using their “Extension” framework. The extension we are talking about here is one that ideally would never exist, but solves the problem of malformed Markdown headers. How often do you see wrong headers with the missing space after the “#” in places like Github and WordPress?

Where

#My Header

Should be

# My Header

Well if you’re using Markdig and run into this issue, simply slap this extension into your processing pipeline and worry no more! It even works with a mix of good and bad headers.

Install

You can find it on NuGet or Clone it yourself from Github:

Usage

Add it to your pipeline that you use to parse:

var pipelineBuilder = new MarkdownPipelineBuilder();
pipelineBuilder = MarkdownExtensions.Use<BadHeadersExtension>(pipelineBuilder);
var pipeline = pipelineBuilder.Build();
var html = Markdown.ToHtml(BAD_HEADER_MARKDOWN, _pipeline);

Check out the unit tests in the source code to view a working example.

Source

The gist is a HeadingBlockParser and the Extension itself.

BadHeadingBlockParser.cs

<br />    /// <summary>
    /// Bad heading block parser. Does the same thing as the header parser, but doesn't require a space.
    /// Using a private class to ensure all markdown logic is contained within this service.
    /// </summary>
    public class BadHeadingBlockParser : HeadingBlockParser
    {
        /// <summary>
        /// The head char.
        /// </summary>
        private readonly char _headChar;

        /// <summary>
        /// Initializes a new instance of the <see cref="T:Markdig.BadHeaders.BadHeadingBlockParser"/> class.
        /// </summary>
        /// <param name="headChar">Head char.</param>
        public BadHeadingBlockParser(char headChar)
        {
            _headChar = headChar;
        }

        /// <summary>
        /// Overrides the TryOpen for the heading block parser to ignore the need for spaces
        /// </summary>
        /// <returns>The open.</returns>
        /// <param name="processor">Processor.</param>
        public override BlockState TryOpen(BlockProcessor processor)
        {
            // If we are in a CodeIndent, early exit
            if (processor.IsCodeIndent)
            {
                return BlockState.None;
            }

            // 4.2 ATX headings
            // An ATX heading consists of a string of characters, parsed as inline content, 
            // between an opening sequence of 1–6 unescaped # characters and an optional 
            // closing sequence of any number of unescaped # characters. The opening sequence 
            // of # characters must be followed by a space or by the end of line. The optional
            // closing sequence of #s must be preceded by a space and may be followed by spaces
            // only. The opening # character may be indented 0-3 spaces. The raw contents of 
            // the heading are stripped of leading and trailing spaces before being parsed as 
            // inline content. The heading level is equal to the number of # characters in the 
            // opening sequence.

            // We are not doing this ^^ we don't have the spaces... so we need to handle that adjusted logic here
            var column = processor.Column;
            var line = processor.Line;
            var sourcePosition = line.Start;
            var c = line.CurrentChar;
            var matchingChar = c;

            int leadingCount = 0;

            // get how many of the headChar we have and limit to 6 (h6 is the last handled header)
            while (c == _headChar && leadingCount <= 6)
            {
                if (c != matchingChar)
                {
                    break;
                }
                c = line.NextChar();
                leadingCount++;
            }

            // A space is NOT required after leading #
            if (leadingCount > 0 && leadingCount <= 6)
            {
                // Move to the content
                var headingBlock = new HeadingBlock(this)
                {
                    HeaderChar = matchingChar,
                    Level = leadingCount,
                    Column = column,
                    Span = { Start = sourcePosition }
                };
                processor.NewBlocks.Push(headingBlock);
                processor.GoToColumn(column + leadingCount); // no +1 - skip the space

                // Gives a chance to parse attributes
                if (TryParseAttributes != null)
                {
                    TryParseAttributes(processor, ref processor.Line, headingBlock);
                }

                // The optional closing sequence of #s must not be preceded by a space and may be followed by spaces only.
                int endState = 0;
                int countClosingTags = 0;
                for (int i = processor.Line.End; i >= processor.Line.Start; i--)  // Go up to Start in order to match the no space after the first ###
                {
                    c = processor.Line.Text[i];
                    if (endState == 0)
                    {
                        if (c.IsSpaceOrTab())
                        {
                            continue;
                        }
                        endState = 1;
                    }
                    if (endState == 1)
                    {
                        if (c == matchingChar)
                        {
                            countClosingTags++;
                            continue;
                        }

                        if (countClosingTags > 0)
                        {
                            if (c.IsSpaceOrTab())
                            {
                                processor.Line.End = i - 1;
                            }
                            break;
                        }
                        else
                        {
                            break;
                        }
                    }
                }

                // Setup the source end position of this element
                headingBlock.Span.End = processor.Line.End;

                // We expect a single line, so don't continue
                return BlockState.Break;
            }

            // Else we don't have an header
            return BlockState.None;
        }
    }

 
Then we use the Parser in the Extension:

BadHeadersExtension.cs

<br />    /// <summary>
    /// Markdig markdown extension for handling bad markdown for titles
    /// </summary>
    public class BadHeadersExtension : IMarkdownExtension
    {
        /// <summary>
        /// Sets up the extension to use the badheading block parser
        /// </summary>
        /// <returns>The setup.</returns>
        /// <param name="pipeline">Pipeline.</param>
        public void Setup(MarkdownPipelineBuilder pipeline)
        {
            if (!pipeline.BlockParsers.Contains<BadHeadingBlockParser>())
            {
                // Insert the parser before any other parsers and use '#' as the character identifier
                pipeline.BlockParsers.Insert(0, new BadHeadingBlockParser('#'));
            }
        }

        /// <summary>
        /// Not needed
        /// </summary>
        /// <returns>The setup.</returns>
        /// <param name="pipeline">Pipeline.</param>
        /// <param name="renderer">Renderer.</param>
        public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer)
        {
            // not needed
        }
    }

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 – Xamarin.Forms Long Press Effect

Here’s a quick and helpful tool to use in your Xamarin.Forms applications! How many times have you wanted to add a long press handler? Seems like something that should be a simple Gesture built into the platform, but we have to fend for ourselves. Luckily the solution is pretty simple using Xamarin.Forms Effects!

Let’s first create our shared Effect in our shared code:

LongPressedEffect.cs

    /// <summary>
    /// Long pressed effect. Used for invoking commands on long press detection cross platform
    /// </summary>
    public class LongPressedEffect : RoutingEffect
    {
        public LongPressedEffect() : base("MyApp.LongPressedEffect")
        {
        }

        public static readonly BindableProperty CommandProperty = BindableProperty.CreateAttached("Command", typeof(ICommand), typeof(LongPressedEffect), (object)null);
        public static ICommand GetCommand(BindableObject view)
        {
            return (ICommand)view.GetValue(CommandProperty);
        }

        public static void SetCommand(BindableObject view, ICommand value)
        {
            view.SetValue(CommandProperty, value);
        }


        public static readonly BindableProperty CommandParameterProperty = BindableProperty.CreateAttached("CommandParameter", typeof(object), typeof(LongPressedEffect), (object)null);
        public static object GetCommandParameter(BindableObject view)
        {
            return view.GetValue(CommandParameterProperty);
        }

        public static void SetCommandParameter(BindableObject view, object value)
        {
            view.SetValue(CommandParameterProperty, value);
        }
    }

Now we have 2 bindable properties – the Command that we want to bind when the long press is detected and the CommandParameter to pass into the Command.

We can use these in our native Effect implementations to invoke when the press is detected. Let’s create our Android implementation.

AndroidLongPressedEffect.cs

[assembly: ResolutionGroupName("MyApp")]
[assembly: ExportEffect(typeof(AndroidLongPressedEffect), "LongPressedEffect")]
namespace AndroidAppNamespace.Effects
{
    /// <summary>
    /// Android long pressed effect.
    /// </summary>
    public class AndroidLongPressedEffect : PlatformEffect
    {
        private bool _attached;

        /// <summary>
        /// Initializer to avoid linking out
        /// </summary>
        public static void Initialize() { }

        /// <summary>
        /// Initializes a new instance of the
        /// <see cref="T:Yukon.Application.AndroidComponents.Effects.AndroidLongPressedEffect"/> class.
        /// Empty constructor required for the odd Xamarin.Forms reflection constructor search
        /// </summary>
        public AndroidLongPressedEffect()
        {
        }

        /// <summary>
        /// Apply the handler
        /// </summary>
        protected override void OnAttached()
        {
            //because an effect can be detached immediately after attached (happens in listview), only attach the handler one time.
            if (!_attached)
            {
                if (Control != null)
                {
                    Control.LongClickable = true;
                    Control.LongClick += Control_LongClick;
                }
                else
                {
                    Container.LongClickable = true;
                    Container.LongClick += Control_LongClick;
                }
                _attached = true;
            }
        }

        /// <summary>
        /// Invoke the command if there is one
        /// </summary>
        /// <param name="sender">Sender.</param>
        /// <param name="e">E.</param>
        private void Control_LongClick(object sender, Android.Views.View.LongClickEventArgs e)
        {
            Console.WriteLine("Invoking long click command");
            var command = LongPressedEffect.GetCommand(Element);
            command?.Execute(LongPressedEffect.GetCommandParameter(Element));
        }

        /// <summary>
        /// Clean the event handler on detach
        /// </summary>
        protected override void OnDetached()
        {
            if (_attached)
            {
                if (Control != null)
                {
                    Control.LongClickable = true;
                    Control.LongClick -= Control_LongClick;
                }
                else
                {
                    Container.LongClickable = true;
                    Container.LongClick -= Control_LongClick;
                }
                _attached = false;
            }
        }
    }

And now for iOS:

iOSLongPressedEffect.cs

[assembly: ResolutionGroupName("MyApp")]
[assembly: ExportEffect(typeof(iOSLongPressedEffect), "LongPressedEffect")]
namespace iOSNamespace.Effects
{
    /// <summary>
    /// iOS long pressed effect
    /// </summary>
    public class iOSLongPressedEffect : PlatformEffect
    {
        private bool _attached;
        private readonly UILongPressGestureRecognizer _longPressRecognizer;
        /// <summary>
        /// Initializes a new instance of the
        /// <see cref="T:Yukon.Application.iOSComponents.Effects.iOSLongPressedEffect"/> class.
        /// </summary>
        public iOSLongPressedEffect()
        {
            _longPressRecognizer = new UILongPressGestureRecognizer(HandleLongClick);
        }

        /// <summary>
        /// Apply the handler
        /// </summary>
        protected override void OnAttached()
        {
            //because an effect can be detached immediately after attached (happens in listview), only attach the handler one time
            if (!_attached)
            {
                Container.AddGestureRecognizer(_longPressRecognizer);
                _attached = true;
            }
        }

        /// <summary>
        /// Invoke the command if there is one
        /// </summary>
        private void HandleLongClick()
        {
            var command = LongPressedEffect.GetCommand(Element);
            command?.Execute(LongPressedEffect.GetCommandParameter(Element));
        }

        /// <summary>
        /// Clean the event handler on detach
        /// </summary>
        protected override void OnDetached()
        {
            if (_attached)
            {
                Container.RemoveGestureRecognizer(_longPressRecognizer);
                _attached = false;
            }
        }

    }

Now that we have our 2 implementations, let’s use it in our XAML!

MyPage.xaml

<Label Text="Long Press Me!" effects:LongPressedEffect.Command="{Binding ShowAlertCommand}" effects:LongPressedEffect.CommandParameter="{Binding .}">
    <Label.Effects>
        <effects:LongPressedEffect />
    </Label.Effects>
</Label>

Now you can start handling long presses on any control! If you want to add it to a ListView just attach it to either the ViewCell or the internal View of the cell.

 

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.NuGet – DynamicWrapLayout Announcement!

It’s been a little while since I’ve posted about any new Xamarin Controls or updates, but here’s a great one!

I needed to create a layout that could bind to a collection of data in Xamarin.Forms that fit to a dynamic grid that also scaled to larger devices and orientation changes. I thought about creating a new custom renderer that uses the RecyclerView with a GridLayoutManager and a UICollectionView with a custom layout. However, I didn’t need to bind to tons of data, so I decided to create a new control that is entirely Xamarin.Forms – No custom renderers!

I’ve called it the DynamicWrapLayout since it was inspired by the WrapLayout from Charles Petzold and David Britch.

Get it on NuGet: https://www.nuget.org/packages/DynamicWrapLayout/
Get the source on GitHub: https://github.com/SuavePirate/DynamicWrapLayout

Because it is all Xamarin.Forms, it should work on all the platforms that Forms supports! So use it everywhere! I’ll create another post about how I built it if you want to work on your own implementation, but for now, you can read the documentation on the control below.

Documentation

DynamicWrapLayout

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/DynamicWrapLayout/

Install-Package DynamicWrapLayout

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 DataTemplate (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="clr-namespace:SuaveControls.DynamicWrapLayout;assembly=SuaveControls.DynamicWrapLayout"

Use it in your View:

<ScrollView>
    <suave:DynamicWrapLayout ItemsSource="{Binding Items}" HorizontalOptions="Fill">
        <suave:DynamicWrapLayout.ItemTemplate>
            <DataTemplate>
                <StackLayout BackgroundColor="Gray" WidthRequest="120" HeightRequest="180">
                    <Label Text="{Binding .}" TextColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />
                </StackLayout>
            </DataTemplate>
        </suave:DynamicWrapLayout.ItemTemplate>
    </suave:DynamicWrapLayout>
</ScrollView>

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

<ScrollView>
    <suave:DynamicWrapLayout HorizontalOptions="Fill">
      <StackLayout BackgroundColor="Gray" WidthRequest="120" HeightRequest="180">
          <Label Text="0" TextColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />
      </StackLayout>
      <StackLayout BackgroundColor="Gray" WidthRequest="120" HeightRequest="180">
          <Label Text="1" TextColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />
      </StackLayout>
      <StackLayout BackgroundColor="Gray" WidthRequest="120" HeightRequest="180">
          <Label Text="2" TextColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />
      </StackLayout>
      <StackLayout BackgroundColor="Gray" WidthRequest="120" HeightRequest="180">
          <Label Text="3" TextColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />
      </StackLayout>
      <StackLayout BackgroundColor="Gray" WidthRequest="120" HeightRequest="180">
          <Label Text="4" TextColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />
      </StackLayout>
    </suave:DynamicWrapLayout>
</ScrollView>

Features

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

What does this thing look like?

Android:


iOS:


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)
     

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.