Tab me more: Scrollable tabs and circle Button in tabs

Version 1.3.0 of the Sharpnado toolkit is here \o/

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

Scrollable tabs

A new Property TabType was added to the TabHostView:

public TabType TabType

public enum TabType
{
    Fixed = 0,
    Scrollable,
}

TabButton

Sometimes your designer wants to spice-up a bit the bottom bar tabs by adding a button like a "take a picture" button. The issue is that the semantic differs from the others tabs since you will make an action instead of swapping views.

So I created the TabButton for scenarios like this.

It has a load of properties to fulfill your designer wildest dreams:

public string IconImageSource

public ICommand TapCommand

public int CornerRadius

public Color ButtonBackgroundColor

public Thickness ButtonPadding

public double ButtonWidthRequest

public double ButtonHeightRequest

public double ButtonCircleSize

For the circle button the issue is that most of the time, you want it to be bigger and to come out a bit of the bar. It needs a little trick to make it works. For example this is the source of the above circle button:

<tabs:TabHostView x:Name="TabHost"
                    Grid.Row="2"
                    BackgroundColor="White"
                    SelectedIndex="{Binding Source={x:Reference Switcher}, Path=SelectedIndex, Mode=TwoWay}"
                    ShadowType="Top"
                    TabType="Fixed">
    <tabs:TabHostView.Tabs>
        <tabs:BottomTabItem Style="{StaticResource BottomTabStyle}"
                            IconImageSource="house_96.png"
                            Label="{localization:Translate Tabs_Home}" />
        <tabs:BottomTabItem Style="{StaticResource BottomTabStyle}"
                            IconImageSource="list_96.png"
                            Label="{localization:Translate Tabs_List}" />

        <!--  Circle button  -->
        <tabs:TabButton ButtonBackgroundColor="Accent"
                        ButtonCircleSize="60"
                        ButtonPadding="15"
                        IconImageSource="camera_96.png"
                        Scale="1.3"
                        TranslationY="-10" />

        <tabs:BottomTabItem Style="{StaticResource BottomTabStyle}"
                            IconImageSource="grid_view_96.png"
                            Label="{localization:Translate Tabs_Grid}" />
        <tabs:BottomTabItem Style="{StaticResource BottomTabStyle}"
                            IconImageSource="house_96.png"
                            Label="{localization:Translate Tabs_Home}" />
    </tabs:TabHostView.Tabs>
</tabs:TabHostView>

So just a bit of translation and scale here.

You can also decide to have a more boring button, why not?

<tabs:TabButton Padding="5"
                ButtonBackgroundColor="Accent"
                ButtonPadding="10"
                CornerRadius="5"
                IconImageSource="camera_96.png" />

More tab stuff

New properties

UnderlinedTabItem.UnderlineAllTab=(true|false)

You can decide whether or not you want the underline to take the whole tab width, or just the text width.

BottomTabItem.IsTextVisible=(true|false)

If you like your bottom bar items without text:

BREAKING CHANGE

The TabItem needs now to be inside the Tabs property of the TabHostView:

<tabs:TabHostView x:Name="TabHost"
                    Grid.Row="2"
                    BackgroundColor="White"
                    SelectedIndex="{Binding Source={x:Reference Switcher}, Path=SelectedIndex, Mode=TwoWay}"
                    ShadowType="Top"
                    TabType="Fixed">
    <tabs:TabHostView.Tabs>
        <tabs:BottomTabItem Style="{StaticResource BottomTabStyle}"
                            IconImageSource="house_96.png"
                            Label="{localization:Translate Tabs_Home}" />
        <tabs:BottomTabItem Style="{StaticResource BottomTabStyle}"
                            IconImageSource="list_96.png"
                            Label="{localization:Translate Tabs_List}" />
    ...

Fixes and improvements

[Feature] Enable Tab visibility toggle

https://github.com/roubachof/Sharpnado.Presentation.Forms/issues/47
Binding to IsVisible property of the TabItem wasn't working, should be fixed with this release.

HorizontalListView holiday fixes

List goes blank after reset event

https://github.com/roubachof/Sharpnado.Presentation.Forms/issues/81
This fix make it possible to bind the HorizontalListView to the DynamicData.Binding.ObservableCollectionExtended collection.

How to prevent a ListView from scrolling to the beginning at the ItemsSource update?

https://github.com/roubachof/Sharpnado.Presentation.Forms/issues/77
Will keep CurrentIndex after reloading the bound ItemsSource.

[Android] Can't set padding correctly

https://github.com/roubachof/Sharpnado.Presentation.Forms/issues/64
Weird little padding added on android removed.

[Android] DragAndDropEndedCommand called before the item is reordered in the collection

https://github.com/roubachof/Sharpnado.Presentation.Forms/issues/71

[Android] ObjectDisposedException thrown when adding or deleting items to/from ItemsSource

https://github.com/roubachof/Sharpnado.Presentation.Forms/issues/72
Added some guards to protect from adapter disposal.

[iOS] NullException at iOS.Effects.iOSViewStyleEffect.OnDetached

https://github.com/roubachof/Sharpnado.Presentation.Forms/issues/75