Xamarin Forms – iOS floating tabbar

Sometimes the design of our apps requires us to create custom elements inside of Xamarin Forms.
One thing I wanted to try out, was using a floating tabbar instead of a bottom fixed one.

The end result should be this:

Let me show you how you can achieve this in Xamarin Forms targeting iOS.

We actually don’t want to create our own page panel switcher or view host, rather, we would love to reuse the current TabbedPage that is provided by Xamarin Forms. So if we want to alter the one given by Xamarin, we need to create a Custom Renderer for it.
In this custom renderer we will be hide the default TabBar that is provided by iOS and instead we will load a Xamarin Forms ContentView and place it inside the UIView that is currently loaded; placing it somewhere on the bottom of the page.

Meaning we need to convert the ContentView to a iOS native control! This is possible all thanks to Michael Ridland his code shown here https://michaelridland.com/xamarin/creating-native-view-xamarin-forms-viewpage/

The end result Custom Renderer looks like this:

Now that our view is visible and the default tabbar is hidden, we only need to trigger the actual tab switching.
This is done inside our ContentView!
Inside of the new TabBar view, we have defined 3 buttons. Each button will trigger a page switch, doing this through use of the Xamarin Forms Tabbed Page. We just switch the CurrentPage property of the TabbedPage and this will trigger the normal tab switching.

That is basically it!
As you can see the overlay tabbar is just XAML, so you can do whatever you want in it… of you would like to animate the selection or use images, you can just change it.

The end effect is like so:

As always the code can be found on GitHub here…

Xamarin forms – Android label less bottom tabs with badges

Since a while we are able to render a bottom tabbar in Xamarin Forms for Android!
If you want to know the whole setup, take a look at this great blog post by James Montemagno here…

So recently we added this in our production app, because our own implementation was not always working 100% correct depending on the Android version it was being shown.

But we also needed some extra functionality and didn’t want to bring in an external library. So let me show you what we needed and how we added this to Xamarin Forms Android.

First extra needed feature was the ability to show tab badges. In other words a counter that shows, in our case, the amount of unread messages.
End result should be:

Now the fact that we eventually also need to port this to iOS, means we need some abstracted elements that reside in Xamarin Forms project and not in the os specific projects.
First we need a small class that can contain the badge info that we want to show, it has 2 properties, one for the badge caption and one for the badge color.

So when you want to dynamically change the color or caption, you just change the data in the properties and the code on os level will handle this.
Because we want to interact on os level, we need to create a Custom Renderer. To be sure it can get a hold of the TabData class we also create our own TabbedPage first.

I pre-init this page with a badge for the first tab that is blue and has 5 as caption.
With that in place we can start adding our Android Custom renderer.

The actual end goal of the custom renderer is to inject a badge control in each tab where needed. So we have to go through the Tabs dictionary of the BottomTabbedPage to see if we need to add a badge or not. Also we want to hook into the PropertyChanged event of the BadgeData class, so that we can actually change the visuals while the app is running.
This is all handled in the OnElementChanged method of the Custom Renderer.

A bunch of code, but it’s not that difficult to understand… first we adjust the Shift Mode so that our tabs are always shown equally ( reference the blog post of James on top ).
After that we go through the defined TabData elements and get the corresponding BottomNavigationItemView ( the actual item being rendered ).

Note that in my example, I only have a badge on the first tab. When you want badges on each, you need to pre init the TabData list for each tab.

When we want to add a badge, we create a new TextView element and add it to the corresponding BottomNavigationItemView. The TextView itself is just text but with a circular background element ShapeDrawable, that inherits the color you specified in the BadgeData.
All this code can be seen in the BadgeView class.

Also note that we keep track of the PropertyChanged event, so that we alter the color and caption if needed of the presented BadgeView.
And that’s it for our first feature! Bottom tabs with badges for Android.

But we also wanted to have the ability to show only icons on the tabs, so loosing the labels. This will of course only work when you have very descriptive icons.
This should look like so:

Now normally this should be very easy in Android API 28, because there you can provide a value stating if you want labels or not… but since of this writing Xamarin Forms is not yet 28 compatible ( https://github.com/xamarin/Xamarin.Forms/issues/3083 ) so we need our own implementation.

For this to work, we will strip out the labels that are available in the TabView. But that is not enough, we also need to shift down the icon. Because when you loose the labels, the icon will not be in the center of the TabView. On our BottomTabbedPage class we already added a bool property Labels that we can set in XAML to indicate if we want tabs with or without labels.

In the OnElementChanged we strip out the labels.

And in the OnLayout we shift down the icons ( we only have the tab height at that point ).

So we take the actual height of the tab itself, divided by 2 to get the center. Than we grab the height of the icon and also divide this by 2 and also get the current top position of the icon. With those values we now know how much pixels we need to add as top padding to our icon to get it vertically center.

All in all not that much code, but as always with android, you need to know how the actual objects are called and rendered.

As always working copy can be found here…

Xamarin forms – keep visual element in view linked to content scroll view

Assume you have some news page that contains a header with the actual news title, some highlight image and a lot of body text.
If this is represented on a mobile device, depending on the screen resolution, this can result in the user needing to scroll the text content to be able to read everything.
Now if you just put the whole page in a ScrollView, the user will loose the content of the article he is reading, because most likely the title will also scroll out of view.
So let me show you what you can do to keep the title fixed as soon as it reaches a certain anchor point on screen, while the user is scrolling the text content.

The starting view looks like this

You will notice the title “Bear found in the wild” is fixed to the bottom of the highlight picture and as soon as the user scrolls, this will also scroll to the top of the screen. But we want to keep it in view when it reaches the top of the image ( it will be fixed below the “Fixed header demo page title ). even if the user keeps scrolling down after we reached our anchor point.

First the design of the page in XAML:

Import thing to note here, is that the actual TitleText label is positioned outside of the ScrollView! This is needed, because we will animate it ourselves depending on the scroll values of the ScrollView.
So how do we position this TitleText to the bottom of the bear image? This is done in the code behind of the page! In the constructor we hookup to the SizeChanged event of the bear image and in that event we will set the margin of the TitleText to the Height of the bear image minus the height of the TitleText itself.

Now when the TitleText has been fixed to it’s starting position, we need to take hold of the top Y coördinate. This is needed to calculate the anchor point while scrolling.
We also hookup to the SizeChanged event of the TitleText and when it changes, we can grab the Y point.

Only one thing left to do, we now have to keep hold of the scroll values of the ScrollView, so we can animate the TitleText in sync with the scroll position and direction.
So we subscribe to the PropertyChanged event of the ScrollView and look for Y value changes.
When we get a change, we validate if it is still lower than our anchor point, if so, animate the TitleText Y coördinate to the same value. If it’s passed the anchor point, we will just keep the TitleText coördinate the same. This will result in the title being kept in view!

And that’s it!
The end result will look like this:

As always a complete demo can be found on my GitHub here…

Xamarin forms – Switch custom font on Style Trigger

Just a small reminder for myself.
I was actually unaware this was possible in XAML styling, but now that I know it can be done, I will be using this more often 🙂 !

So assume you want to use a custom font in your Xamarin Forms app and you want to preset each Label control with it, you can define this in a Styles.xml like so:

But what do you do when your custom font has no build in Bold feature and you have to rely on a separate custom font for that?
Well, you can let your XAML style check for a trigger and swap the font!
It’s fairly easy, so the code will now look like:

And now each time you add the FontAttributes=”Bold” property to your Label control, it will use the correct font type!

Happy coding.

UWP – Auto resizable flyout

So imaging you have this great looking layout in your UWP app, all set up with the new guidelines.
Meaning a side bar for navigation and a master detail section, that will dynamically change when you don’t have enough space to fit and master and detail.

We are talking about this layout:

Screenshot (37)

But of course like in most other apps, you want to enable some filtering on the content. That way the user can find the items that are more important to him… So for UWP there is a wonderful control that has all the needed qualities for such a feature; the MenuFlyout !
Now if you add this control, as is, it will only render itself in a certain width and height depending on the content that it contains. Meaning that most of the time, it will look tiny and out of place with the rest of the visual elements.
Here is a Phone screenshot example : notice how the flyout hovers above the side pane and it’s width is only calculated to it’s content

Wrong - 03 Mobile

What we would love to have, is a Flyout that takes up the full width size of the parent control it’s contained in… in other words in our example, have an equal width to the column that hosts the item list.
Let me show you how you can accomplish this.

First up, create this nice triple design, by using the new SplitView control, this will give you the side pane. Of course you’ll still need to add 2 columns to host the list and the detail content.
We’ll use the new Visual State Manager settings style to change the layout if we use the app on smaller screens!
Do note we are using a button with an empty button style to render the text for filter selection and a FlyoutMenu is attatched to that button. They are contained in the MasterColumn

Now that we have this all setup up, only thing left to do is calculate the actual width of the MasterColumn and use that to change the size of the flyout. But also take into account the side pane width to shit the flyout in place.
We will recalculate each time the flyout opens, because the app could be resized by the user before the flyout is actually opened.
So you’ll see a handler hooked up called for the Opened event called OnFilterFlyoutOpened with following code

The trick here is to change the MenuFlyoutPresenterStyle, with that style we can apply a minimum width to the actual flyout. That width should be equal to the width of the Master column…
We also apply some margin to compensate for the side pane.
By doing all this we now get following nice result :

Correct - 03 Mobile

As ever this sample can be found on my GitHub right here…

UWP – adaptive triggers and custom triggers

**
UPDATE it seems there IS a way to deep link properties!
Thanks to Juan Pablo for providing this tip!

He posted all the goods up on CodeProject here…

In short you can write:

I’ve update the Adaptive trigger example off the GitHub project
**

Well I’m only just getting started with an UWP windows 10 project, so naturally I guessed I would hit some bumps on the road.
But the real first problem I got, was not an easy one to solve. The fix is easy, but I couldn’t wrap my head around it at first…

So hence this blogpost so maybe others could benefit from it.
Thanks to Scott Lovegrove for helping and testing this…

So what did I want to do, I wanted to change the background of the root grid of a XAML View depending on the Size of the page ( or depending on the Device Family that was viewing the page ).
First can be done with the new Adaptive triggers, second one can be done with a Custom trigger : look at Morten Nielsen his lib on Github.

So I tried following code:

But got no result, same thing with the Device Family trigger!
I then contacted Scott to see if he had an angle I didn’t try and together we tried several other Setters.
Like using other uri’s for the Value like: ms-appx:///Assets/White-Wallpaper-Windows-10-HD.jpg and other bindings for the Target like: LayoutRoot.(Grid.Background)

But all without luck, even contacted Morten to see if debugging the custom trigger would help. But nothing seemed to work out.

Until it hit me, maybe we can’t deep link Targets… so I changed the code to following

And look all of a sudden everything works!!
So the only thing I changed was actually giving the ImageBrush a name and using that as a the target for the triggers.

Not sure why this is the case, because writing this in XAML is valid:

That’s why I started with a wrong foot in the beginning.

Scott has a valid point, that the inner workings of the triggers is trying to map it to the real object and that can be very different then what we put in our XAML. So some internal conversion could be missing when using triggers.

Example project up on GitHub here…

Win RT – Masked edit box [community help]

Ok here is the deal, I’ve been looking for a good Masked Edit box for Win8 RT and only found one from SyncFusion.

But of course like any dev I didn’t want to have 3th party control libs in my project. Open source projects aren’t a problem, but the big Win RT toolkits I know of don’t have one available.

So hence my question, who would like to help out and create a community Masked Edit box? I’ve already started with something that works, but is very limited! So if someone wants to improve this, please be my guest 🙂

What I started with is a behavior that can be used on a TextBox. It currently has one dependency property called Mask where you can define simple masks. The only fixed chars that are available for the mask are 9 ( for numeric placeholders ) and # ( for all chars placeholders ). So you could already set up a mask like this: 99.99.###.999

But the behavior still has some flaws!

  • Copy paste a large string will not trigger a correct mask formatting
  • While deleting and again entering chars, will sometime result in the need to enter the same char twice

Like I said, it’s just a start… so who is up for it? If you feel the urge to help out, take a look at the project on GitHub and do a fork and a pull request 🙂

Windows Phone Image button style

So you are creating your latest windows phone app and would like to add some fancy designed icons or images… But instead of just showing these, they’ll need to react as a button! By the way, we normally use vector data, but that is not always to our disposal. It could be we have a nicely designed icon in several resolutions.

Well that’s easy you think, we’ll just add a button and put that image inside it – here is the code

But when you just use it like this, the image won’t look good! It will have the default button border around it and that’s not something you want.

image

Than you think a little bit about it, maybe search the internet and yes, behold Jeff Wilcox used something back in the wp7 days that could be usefull! An EmptyButtonStyle, it’s a button style stripped to the bare minimum! So you add that and use it – here is the code

But again you’ll notice it’s not perfect… ok it has no visual references anymore to a button, but pressing the image will now also no longer give a visual indication!

image

On wp8, pressing a button, the content will slightly grey out to tell the user he’s pressing that button! So we need to check the state of the button to play with the opacity and enable this visual effect again! Behold the ImageButtonStyle

So when running the app you’ll notice no difference with the empty button style, until you press it! It will now grey out the content a little bit.

As always a test project can be found on github here: ImageButton project

Fixing header when scrolling content on windows phone page

Thanks to Kévin Gosse @KooKiz for tweaking a part of the code to get it right 🙂

So, sometimes you want to try something different on Windows Phone and this time I wanted to tweak the scroll animation of a page.

The setup I was looking for visually: You have a content page ( for example in a news app ) that shows a nice article with an image and a title caption on top. But as you can see the text of the article is too large, so when the user scrolls down to view the text, we want to keep the header title in view! ( or something else depending on your taste )

TextPage TextPage2 TextPage3

You would think this would be easy, but it alas! Again we are faced with a stripped down XAML version in Windows Phone, so we don’t have the same ‘control’ over these events as in WPF.
Now with some small tricks, it’s possible to get a decent working version, so let’s get to it!

Just create a new Windows Phone app in Visual Studio, when doing so you’ll get a MainPage.xaml right away.

We are going to change the page, so delete everything inside the LayoutRoot grid and replace it with following xaml


If you did this correctly ( also there should be a bear.jpg image inside the Assets/Images folder 😉 ) you’ll get a nice page representing the article!

TextPage

You’ll notice the page has a scrollviewer that contains everything except the header title! The trick we are going to use, is manipulating the location of the header title ourselves.

Do note that we need to se the ManipulationMode of the ScrollViewer to Control to get a smooth UI effect! ( see xaml above ) Otherwise the UI won’t be notified enough with the scrollviewer scroll values – is a performance optimization that we now need to bypass.

To manipulate the location of the header title, we need to keep track of the scroll offset of our scrollbar. But the scrollviewer itself doesn’t give use enough info, the way to get this info is by hooking into the ValueChanged event of the VerticalScrollBar that is inside the ScrollViewer !

So first we need to get hold of this VerticalScrollBar, this is done by using the VisualTreeHelper on our ScrollViewer and hook onto the ValueChanged event.


Inside our ValueChangedHandler we will animate our header title to the corresponding vertical offset of our ScrollBar, but we will stop animating when the vertical offset is higher than the top position of our header title when the page was launched!! Because if our vertical offset has reached that value this means that the header title will be positioned at the top of our page!

The top value of the header title is called _borderTop and is calculated at page load.


With that in place all is looking great, except for one thing: what to do when the user compresses the ScrollViewer by dragging the content down when the page is at it’s initial position. This behaviour is sometimes used in listboxes to get that ‘pull to refresh effect’. When someone does this on our page, the header title will stay at it’s position while the rest is dragged down… not a nice effect indeed. Let’s fix this.

This can be solved by hooking into 2 other events of the ScrollViewer: MouseMove and MouseLeftButtonUp. MouseMove to detect the compression and MouseLeftButtonUp to know when the user stops the compression.

When the compression occurs, you’ll notice a positive TranslateY value on the CompositeTransform of the ScrollViewer content, we’ll use this to also animate our header title. When the compression is stopper, we check if we had a positive TranslateY value and if so, we reset the position of the header title.


If all goes well, the end result should look like this

 

To not mis anything, the demo project is up on my github here https://github.com/Depechie/FixedTextScrollDemo

Semantic Zoom with MVVMLight – Windows 8 Metro

This week I’ve been trying out some Windows 8 Metro development and by doing so I came across something I think will help out other devs.
I wanted to try out one of the key new features that is presented in Windows 8, called Semantic Zoom ( read about/view it here ).

But because of the fact I’m mostly familiar with Windows Phone 7 development, I wanted to use Laurent Bugnion’s MVVMLight framework also on Windows 8. You can get a v4Beta1 version here…

So by doing so, I needed to tweak my code so it would fit nicely with the Semantic Zoom pattern. Let me show you how I did this.

First create a new MVVMLight Project

image

Than open the Model folder and add a class called Car.cs

 

And a class called Manufacturer.cs