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

Use it in your View:

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

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

<ScrollView>
    <suave:DynamicStackLayout 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:DynamicStackLayout>
</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!)

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.

Advertisements

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.Meetup – Boston Meetup Today: DevOps for Mobile Apps with Dan Hermes

Join us at Microsoft’s NERD Center to learn about DevOps for Mobile Apps! Meet with some of the local Xamarin MVPs and employees while also enjoying some food.

https://www.meetup.com/bostonmobiledev/events/244933704/

How do we keep our iOS and Android builds organized, tested, and distributed to team members and users who need them, with the correct versions flowing into the app stores? This is DevOps for mobile apps.

Dan Hermes, Xamarin MVP and co-organizer of Boston Mobile C# Developers Group, will discuss the high points of his upcoming edX video course for Microsoft on how to do all of these things using Visual Studio Mobile Center (VSMC). He will talk about developing, deploying and managing mobile applications in DevOps environments. He’ll cover setup and management of VSMC and the testing and deployment of mobile apps. Mobile Center Build, Test, and Distribute are powered by Visual Studio Team System (VSTS), Xamarin Test Cloud, and HockeyApp.  Learn the VSMC workflows that tie all of these tools together.

This talk is for any and all native app developers, not just C#.  Many features of VSMC work for Objective-C and Java just as well as Xamarin.

About the Speaker

Dan Hermes is a Xamarin MVP,  Microsoft MVP, and founder of Lexicon Systems, an award-winning Xamarin consulting firm. Mr. Hermes helps developers create great mobile apps and helps businesses develop a winning mobile strategy. His firm’s Xamarin projects include B4UFLY, a drone app for the Federal Aviation Administration, and a cross-platform app for Thermo Fisher Scientific which won a W3, a Davey award, and was a finalist for a Xammy award. Mr. Hermes’ clientele includes dozens of software-building firms such as Fidelity Investments, EDS, and Computerworld Magazine. He has spoken recently at Microsoft Ignite, IBM InterConnect, Microsoft Azure Day, Xamarin DevDays, and mobile user groups nationwide . His mobile cross-platform dev blog is http://mobilecsharpcafe.com/. Connect with him on Twitter at @danhermes. Dan is a writer for MSDN Magazine, a video course instructor for Microsoft’s OpenEdX curriculum, and author of the best-selling Apress book Xamarin Mobile Application 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.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.

Xamarin iOS Expanding Splash View NuGet Announcement!

Here’s another fun NuGet package I’ve put up for everyone: The ExpandingSplashView is a Xamarin.iOS Binding implementation of the CBZSplashView from CallumBoddy on GitHub: https://github.com/callumboddy/CBZSplashView

It allows you to create a quick expanding view and add it to any ViewController very easily. It also allows for you to create the expanding view from either a rasterized image such as a png icon, or from a vector icon using a UIBezierPath.

Here’s the NuGet Package: https://www.nuget.org/packages/ExpandingSplashView

And the GitHub project for the binding and NuGet: https://github.com/SuavePirate/ExpandingSplashView
twitter-gif
Be sure to read the documentation either below here or on the GitHub project!

Documentation


CBZSplashView

A Xamarin.iOS implementation of the popular iOS control CBZSplashView from @callumboddy

Credit where credit is due (I just spent a couple hours fighting with the binding libraries, but @callumboddy did the real work): https://github.com/callumboddy/CBZSplashView

Installation

You can either clone the repository and reference the CBZSplashView project, or you can now use NuGet!

Install-Package ExpandingSplashView

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

Usage

This can be used on any view, but is best suited for covering an entire UIViewController. Simply create either a CBZSplashViewCBZRasterSplashView, or CBZVectorSplashView via their constructors or the static initializer within the CBZSplashView:

var splashView = new CBZRasterSplashView(someUIImage, someUIColor);

Then add the splashview to your View:

View.Add(splashView);

Then start your animation whenever you want:

splashView.StartAnimation();

Here’s an entire ViewController class example:

using System;

using UIKit;
using CBZSplashView;

namespace Example
{
    public partial class ViewController : UIViewController
    {
        private CBZSplashView.CBZSplashView _splashView;
        protected ViewController(IntPtr handle) : base(handle)
        {
        }

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

            var icon = UIImage.FromFile("snapchatIcon.png");

            _splashView = new CBZSplashView.CBZRasterSplashView(icon, UIColor.Yellow);

            View.Add(_splashView);

        }

        public override void ViewDidAppear(bool animated)
        {
            base.ViewDidAppear(animated);

            if (_splashView != null)
                _splashView.StartAnimation();
        }
    }
}

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.

HackHarvard This Weekend!

HackHarvard is this weekend, October 20th – 22nd!

Check out http://hackharvard.io/ for details.

I’m excited to announce that I’ll be joining the Microsoft team to mentor participants at this year’s installment of the hackathon. If you’re working with Microsoft technologies such as using C# with Unity, Hololens, Windows MR, Xamarin, Xenko,  or using any of the Azure Cloud Services, then I’m here to help. I’m looking forward to working with some incredible teams with some of the latest technology to build some awe inspiring applications.

Be sure to come over to the Microsoft table and say hi!

 

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.