A Breadcrumbs bar? Bread? Crumbs? Breadcrumbs? Ok I don’t wanna make you hungry right now! 😛
le Breadcrumbs bar…
But hey you know the Breadcrumbs bar we use in our UI designs! that bar kind of thingy that they put up, to indicate Navigation steps in Websites and mobile applications(not often though). Yeah that one, exactly! 😀
So the other day I had to implement a Breadcrumbs bar control with some nice animations to one of our Xamarin Forms apps… First I was like, Breadcrumbs bar? they actually use them in Mobile Apps? Well turned out to be YEAH! some still do! lol 😛
So I thought, why not give a try to Xamarin Forms Animations while I’m at it, without diving in to the native level to handle all the nice animations.
So as a result of that, let me introduce you to the Cool Breadcrumbs Bar cooked right out of Xamarin Forms Animations. 😉
This Breadcrumbs Bar control can be used to show case navigation path in your Xamarin Forms mobile applications, and you could use this as a separate ui control and add it to each page in your app, and set it to nicely animate and showcase breadcrumbs path in those pages. 😀
Now how did I do it?
In simple theory, I created a StackLayout control, which adds Labels horizontally on demand, but when the Labels are added to the StackLayout, they are being added with a nice X axis point transformation from right end of the screen to the left end using Xamarin Forms Animations. Likewise, each breadcrumb gets added next to each other one by one on demand.
^^ Yep that’s the actual Breadcrumbs bar control I implemented with Xamarin Forms! 😉
Now I must inform you for the sake of the post I have done a simple implementation in a sample code, since I can not share the original implementation I did for my company project. So you should be smart enough to extract this implementation into another control and use it as a component for your pages. 😛
Now if you’re one of em lazy people, then grab my github up in here : XFBreadcrumbsBar
Let’s get into coding.
Alright create your Xamarin Forms PCL project and follow me!
namespace WhateverYourNamespace { public class HomePage : ContentPage { private StackLayout _breadcrumbStackLayout; private ScrollView _breadCrumbsScrollView; private Button _addNewBreadcrumbButton; private Button _clearAllBreadcrumbsButton; public HomePage() { } } }
Alright we create the HomePage and make sure to add those initial elements which we will be using later.
Create the Breadcrumbs Bar
Next lets create our simple but awesome Breadcrumbs bar implementation with the above StackLayout and ScrollView.
// le animated breadcrumbs bar _breadcrumbStackLayout = new StackLayout() { Orientation = StackOrientation.Horizontal, HorizontalOptions = LayoutOptions.FillAndExpand, Children = { new Label { HorizontalOptions = LayoutOptions.Start, Text = "Welcome!", FontSize = 15, FontAttributes = FontAttributes.Bold, TextColor = Color.Black, }, }, Padding = new Thickness(10,0,10,0), HeightRequest = 30, }; _breadcrumbStackLayout.ChildAdded += AnimatedStack_ChildAdded; // let's add that breadcrumbs stacklayout inside a scrollview _breadCrumbsScrollView = new ScrollView { Content = _breadcrumbStackLayout, Orientation = ScrollOrientation.Horizontal, VerticalOptions = LayoutOptions.StartAndExpand, };
Now let me do a bit of explaining there, I have created StackLayout with Horizontal Orientation so that we could stack up our breadcrumb Labels next to each other. Then I have added a Label as the first child to showcase the first default Breadcrumb in the bar. 🙂
Next I have wrapped the StackLayout inside a ScrollView, to allow the new Breadcrumbs to be visible in case the Breadcrumbs StackLayout gets filled and more breadcrumb Labels are to be added. So that we could scroll to the end of the Breadcrumbs StackLayout and make them visible. 😉
Then notice I have subscribed the to ChildAdded event? yep that’s to handle new Breadcrumbs being added at the runtime, which we will get into later. 😀
Add the rest of tid bits for the UI
Next let’s add a title to the page and two buttons to show case the awesome Breadcrumbs bar, then put them all together into the Content of the page.
// Button for adding and removing breadcrumbs _addNewBreadcrumbButton = new Button() { Text = "Add a Breadcrumb", TextColor = Color.Black, BackgroundColor = Color.White, BorderColor = Color.Gray, BorderWidth = 2, }; _addNewBreadcrumbButton.Clicked += AddNewBreadcrumbButtonOnClicked; _clearAllBreadcrumbsButton = new Button() { Text = "Clear Breadcrumbs", TextColor = Color.Black, BackgroundColor = Color.White, BorderColor = Color.Gray, BorderWidth = 2, }; _clearAllBreadcrumbsButton.Clicked += ClearAllBreadcrumbsButtonOnClicked; // Now put em all together on the screen Content = new StackLayout() { Padding = Device.OnPlatform( new Thickness(5, 40, 5, 0), new Thickness(0, 20, 0, 0), new Thickness(0, 20, 0, 0)), Orientation = StackOrientation.Vertical, Children = { _breadCrumbsScrollView, new Label() { VerticalOptions = LayoutOptions.EndAndExpand, HorizontalTextAlignment = TextAlignment.Center, Text = "Welcome to the Breadcrumbs Bar with Xamarin Forms !", FontSize = 25, TextColor = Color.Black, }, new StackLayout() { Children = { _addNewBreadcrumbButton, _clearAllBreadcrumbsButton, }, VerticalOptions = LayoutOptions.End, Padding = new Thickness(10,10,10,10), } } }; BackgroundColor = Color.White;
Alright no need to spoon feed this part I suppose, since the basic Xamarin Forms stuff. Those Button click events we will handle next! 😉
Adding a new Breadcrumb?
Don’t you worry child! Here’s the button click event I talked about earlier, AddNewBreadcrumbButtonOnClicked.
private void AddNewBreadcrumbButtonOnClicked(object sender, EventArgs e) { _addNewBreadcrumbButton.IsEnabled = false; // retrieve the page width var width = Application.Current.MainPage.Width; // Add the new Breadcrumb Label _breadcrumbStackLayout.Children.Add(new Label { // Grab some random text (as in insert whatever // the text you want for your new breadrumb) Text = "/ " + RandomWordGenerator.GetMeaninglessRandomString(new Random().Next(5, 10)), FontSize = 15, TextColor = Color.Black, TranslationX = width, }); // Scroll to the end of the StackLayout _breadCrumbsScrollView.ScrollToAsync(_breadcrumbStackLayout, ScrollToPosition.End, true); _addNewBreadcrumbButton.IsEnabled = true; }
Now here is where we add the new Breadcrumbs to the Breadcrumbs Bar StackLayout at run time. Pretty simple right?
Ok when you click on the “Add a Breadcrumb” button, it will first retrieve the Screen Width and then create a Label which represents a Breadcrumb and add some dummy text to it. Oh by the way to generate a dummy text I’m using this super simple static class which I created earlier you can grab it in this post : Random String Generator
Then we are setting it’s TranslationX property to the Width of the screen, which will place this Label at the edge of the Breadcrumbs Bar StackLayout.
After adding the Label, next we are scrolling the ScrollView to the end to make the transition visible for the new Breadcrumb Label.
Now you should keep in mind that,
You can add any type of Breadcrumbs to the breadcrumbs bar, such as Buttons, Images etc… and make it look even more cooler! 😉
Next is the beautiful Animation part….
Awesome Animation…
So this is the most important part where we are animating out the Breadcrumb Label getting added to the Breadcrumbs Bar.
private void AnimatedStack_ChildAdded(object sender, ElementEventArgs e) { Device.BeginInvokeOnMainThread(() => { var width = Application.Current.MainPage.Width; var storyboard = new Animation(); var enterRight = new Animation(callback: d => _breadcrumbStackLayout.Children.Last().TranslationX = d, start: width, end: 0, easing: Easing.Linear); storyboard.Add(0, 1, enterRight); storyboard.Commit( _breadcrumbStackLayout.Children.Last(), "RightToLeftAnimation", length: 800); }); }
So to explain a bit we are using a compound animation to animate the Breadcrumb Label’s X position from the starting point to the 0th point of the screen. Since we originally set the X position to the edge of the Screen, now we can decrease it through an Animation and bring it to the position it should be placed, which is next to the previous Child in the _breadcrumbStackLayout.
This gets fired whenever you click on the “Add a Breadcrumb” button and a new child gets added to the StackLayout, resulting a beautiful animation from right end of the screen to the left.
PS : You can play around with the Easing of the Animation and the timing to add beautiful animation to it. Use your imagination and go crazy! 😉
Clear the Breadcrumbs!
This is super easy!
private void ClearAllBreadcrumbsButtonOnClicked(object sender, EventArgs eventArgs) { _breadcrumbStackLayout.Children.Clear(); _breadcrumbStackLayout.Children.Add( new Label { HorizontalOptions = LayoutOptions.Start, Text = "Welcome!", FontSize = 15, FontAttributes = FontAttributes.Bold, TextColor = Color.Black, }); }
Just get rid of the Children in the StackLayout and add the default Breadcrumb back if you wish like I have chosen above 😉
Next is Run time!
That’s it fellas, hit F5 and watch the magic! 😀
Well here’s the cool Breadcrumbs Bar control I added in my project after all the customization. 😉
Here’s a little tip, I basically moved the Breadcrumb related stuff to a custom control and used them in all the app pages. So now whenever we navigate to any page the breadcrumbs bar will nicely animate itself at the page visible event. 😉
So your imagination is the limit fellas!
Enjoy! 😀
![c4ppur4rzkmcg2xl_luefa[1]](https://theconfuzedsourcecode.wordpress.com/wp-content/uploads/2015/10/c4ppur4rzkmcg2xl_luefa1.jpg?w=604&h=242)
![6935723_orig[1]](https://theconfuzedsourcecode.wordpress.com/wp-content/uploads/2015/10/6935723_orig1.jpg?w=604&h=402)
![quote-your-work-is-going-to-fill-a-large-part-of-your-life-and-the-only-way-to-be-truly-satisfied-steve-jobs-14-71-51[1]](https://theconfuzedsourcecode.wordpress.com/wp-content/uploads/2015/10/quote-your-work-is-going-to-fill-a-large-part-of-your-life-and-the-only-way-to-be-truly-satisfied-steve-jobs-14-71-511.jpg?w=604&h=284)
![choose-a-job-you-love-and-you-will-never-have-to-work-a-day-in-your-life4[1]](https://theconfuzedsourcecode.wordpress.com/wp-content/uploads/2015/10/choose-a-job-you-love-and-you-will-never-have-to-work-a-day-in-your-life41.png)
There are so many alternatives for E-Mail Marketing in real world such as Web banners, posters, mobile advertising, mobile in-app advertising and so on. We are gonna look at some alternative we think is best suited for the modern world.
ÇøŋfuzëÐ SøurcëÇødë 