Partial area of some tab items not firing tap event on sharpnado tabs

user_4684925 0
Viewed 144

I'm using "Sharpnado Tabs" and having problem in firing tap event in middle "BottomTabItems". I have 5 bottom tabs as you can see the attached photo and the areas outlined with black is firing tap event and changing the views accordingly. However, the areas marked with white, is not doing anything. enter image description here

EDIT

The 5 tabs are spread evenly across the bottom panel. I have set the middle tabs' background to red to see the area they cover and where the touch is working. Setting InputTransparent="true" removes the touch event from the whole area of the tab.

<sho:ViewSwitcher x:Name="Switcher"
                              Grid.Row="0"
                              Grid.RowSpan="3"
                              Animate="False"
                              SelectedIndex="{Binding SelectedViewModelIndex}">

            <sho:LazyView x:TypeArguments="pages:ProfilePage" BindingContext="{Binding ProfilePageViewModel}" />

        </sho:ViewSwitcher>

        <Image Source="navigationbackground.png" Grid.Row="3" TranslationY="5" />
        <sho:TabHostView x:Name="TabHostLogo"
                             Grid.Row="3"
                             WidthRequest="200"
                             HeightRequest="60"
                             Margin="0"
                             Padding="0,20,0,0"
                             HorizontalOptions="Fill"
                             VerticalOptions="Start"
                             BackgroundColor="Transparent"
                             IsSegmented="False"
                             Orientation="Horizontal"
                             TabType="Fixed"
                             SelectedTabIndexChanged="TabHostLogo_SelectedTabIndexChanged"
                             SelectedIndex="{Binding Source={x:Reference Switcher}, Path=SelectedIndex, Mode=TwoWay}">

            <sho:TabHostView.Tabs>

                <sho:BottomTabItem IconImageSource="homeiconselected.png" IconSize="20" />
                <sho:BottomTabItem IconImageSource="profileicon.png"  IconSize="20"/>

                <sho:TabButton x:Name="TabButton"
                                   IsVisible="True"
                                   ButtonBackgroundColor="Transparent"
                                   ButtonCircleSize="40"
                                   CornerRadius="40"
                                   IconImageSource="navigationaddbutton.png"
                                   TapCommand="{Binding ProfileViewCommand}"
                                   Scale="2.5"
                                   Margin="0,0,0,15"
                                   TranslationY="-20" />
                <sho:BottomTabItem IconImageSource="chaticon.png" IconSize="20"/>
                <sho:BottomTabItem IconImageSource="moreicon.png" IconSize="20"/>

            </sho:TabHostView.Tabs>
        </sho:TabHostView>
xamarin.forms tabs
1 Answers

The problem is caused by Scale attribute. Unfortunately, that scales the entire tab area, not just the circle button. At Scale=2, half of each of the surrounding buttons are blocked by an invisible expanded tab rectangle (that surrounds the middle tab button).

As you discovered, at Scale=2.5, more than half of the surrounding tabs are invisibly blocked.

I did not find any way to work around this bug. (Other than not using Scale - but then the button is either too small or not a circle, depending on values you use for ButtonCircleSize and CornerRadius.)

I recommend raising this as an issue at github Sharpnado.Tabs issue.

If you do, include a link in that issue to this SO Q&A. And add a link to bottom of your question to that issue - so people can track progress.

user_1993640
Related