Sharpnado.Tabs 2.2: Material Design Tabs and Geometry (SVG) icon support

Tabs version 2.2.0 is here \o/

	https://github.com/roubachof/Sharpnado.Tabs

What's new?

Material Design tabs specs full support

Contributor: @mkanyo (Miklos Kanyo)

A new type of tab has been introduced: the MaterialUnderlinedTabItem.
It's a full implementation of the material tabs specifications:

https://material.io/components/tabs

IconOptions values:

1. TopIcon
2. IconOnly
3. LeadingIcon
4. TextOnly

You can also set precisely the gap between the icon and the text thanks to the IconTextSpacing.

Instead of using a classic Image you can also set a svg Geometry icon thanks to the GeometryIcon property.

Cool Hack: you can use a MaterialUnderlinedTabItem (and then use a SVG image) as a bottom bar item, just specify UnderlineHeight = 0 ;o).

If you chose to go down this road you can also set the following properties:

• public bool Fill
• public double StrokeThickness
• public double IconTextSpacing

<tabs:TabHostView x:Name="TabHost"
                  Grid.Row="4"
                  Style="{DynamicResource DynamicBottomShadow}"
                  Margin="-16,0"
                  BackgroundColor="{DynamicResource Elevation4dpColor}"
                  ShowScrollbar="False"
                  TabType="Scrollable"
                  SelectedIndex="{Binding Source={x:Reference Switcher}, Path=SelectedIndex, Mode=TwoWay}">
    <tabs:TabHostView.Tabs>
        <tabs:MaterialUnderlinedTabItem Style="{StaticResource ScrollableTabStyle}"
                                        IconImageSource="list_96.png"
                                        IconOptions="TopIcon"
                                        IconSize="24"
                                        IconTextSpacing="0"
                                        Label="{localization:Translate Tabs_Quote}"
                                        UnderlineHeight="2" />
        <tabs:MaterialUnderlinedTabItem Style="{StaticResource ScrollableTabStyle}"
                                        IconImageSource="theme_96.png"
                                        IconOptions="IconOnly"
                                        IconSize="24"
                                        IconTextSpacing="0"
                                        Label="FILMO" />
        <tabs:MaterialUnderlinedTabItem Style="{StaticResource ScrollableTabStyle}"
                                        IconImageSource="grid_view_96.png"
                                        IconOptions="LeadingIcon"
                                        IconSize="24"
                                        IconTextSpacing="0"
                                        Label="{localization:Translate Tabs_Meme}" />
        <tabs:MaterialUnderlinedTabItem Style="{StaticResource ScrollableTabStyle}"
                                        Padding="10,0"
                                        IconImageSource="house_96.png"
                                        IconOptions="TextOnly"
                                        IconSize="24"
                                        IconTextSpacing="0"
                                        Label="NONSENSE" />
      </tabs:TabHostView.Tabs>
</tabs:TabHostView> 

GeometryIcon (SVG image) support

Code like this for example:

Who made that possible?

Miklos Kanyo did!

Let's find more about him :)

Dear Miklos, who the hell are you?

I am a software developer from Budapest. About a year ago started developing with Xamarin after some 20 years in other areas of .NET. I wanted to develop a mobile application for wine tasting which is a personal hobby of mine... :-)

Why did you use sharpnado tabs?

I had a lot of specific ideas about the app and a friend of mine designed UX and the UI for this app and he came up with Tab based sections for certain views. At that point I evaluated the built-in XF tabs support, the Xamarin Community Toolkit's tabs and Sharpnado.Tabs. I felt I had more flexibility with what I needed with Sharpnado.Tabs plus my design at that point had underlined tab sections which Sharpnado.Tabs supported already and it also rendered better than the others.

Where did you get this idea?

As our screens were refined the tab based sections got extended with SVG icons at which point I was already settled with Sharpnado.Tabs and suddenly I wanted to extend Sharpnado.Tabs with it...

Let's talk about your fist implementation...

The first implementation was only for me: as I was using Sharpnado.Tabs via the latest public nuget, I created a custom control in my project, extended "UnderlinedTabItem" and overrode the key UI elements so I could manipulate the XAML markup for it and introduce SVG support. It was a fairly hacky solution as I had to use reflection to replace certain elements and I felt it would have been much cleaner if Sharpnado.Tabs had it in the first place.

And then the idea of a PR came up?

I had a look at the repo on GitHub, cloned and luckily I saw that there was already an enhancement request submitted for tabs with image support so I thought that's it! It's a sign that this should be here too, the whole world needs it. So, initially I ported my code and restructured the UnderlinedTabItem so it has a base class that my image supporting control can also leverage (no need for reflection) and made a local nuget out of it. I did not want to touch the original 'UnderlinedTabItem' more than I had to and this approach seemed like a good way to do that. The tab still worked great - now packed as a local nuget - so I entered the scene with a PR...

And then our collaboration begun :)

I submitted my PR on GitHub which at that point was introducing a new tab control called 'GeometryIconUnderlinedTabItem' which only supported SVG (Geometry) based images. JM welcomed the PR and asked if I could also extend the PR so it supported "Image" based tabs, which in truth was really what the original feature request was about. As I submitted more code JM pointed out further ways to optimize it and eventually the new control's image support aligned with Material concepts in terms of features and ratios.

Finally JM took over and gave it a once-over cleaning up some code, merged the PR and packed it in a RC nuget which I happily validated. :)

The Sharpnado Silly Questions

The Sharpnado Silly Questions will now enter the private sphere of the contributor.

What are your top 3 best album/songs of all time?

Well, there's just too many I couldn't pick 3 just off the top of my head:

Black Keys - El Camino
The National - Trouble Will Find Me
Dire Straits - On the Night
Placebo - Sleeping With Ghosts
Muse - Absolution
Air - Talkie Walkie
Kings of Leon - WALLS
The Maccabees - Wall of Arms

aaah there's too many I like...

What are your top 3 best movies of all time?

Again this would be too many but based on what I seem to have watched the most

Annie Hall
Naked Gun
Airplane!
You Rang M'lord?
Monty Python's

What is currently your favorite youtube video?

https://www.youtube.com/watch?v=odzHlT8a3M4 :)

Are you more a city, mountain, sea, or country person?

I lived in Budapest and London most of my life so I guess I'm a city person... But I love the sea and the countryside too - also, that's where wine comes from. :-)

What do you enjoy in life apart from coding?

I love music so I go to gigs. I like tasting craft beers and wine. I recently became a winemaker so I'm also interested in that. And wine tasting - I'm doing a WSET course in a few weeks.

What is your quest?

Enjoy life, I guess! :-)

What is your favorite color?

I think blue. Not sure! :-)