Telerik Forums / UI for Xamarin
This is a migrated thread and some comments may be shown as answers.

Tabs navigation

7 Answers 328 Views
TabView
This is a migrated thread and some comments may be shown as answers.
Sebastián Soto
Top achievements
Rank 1
Sebastián Soto asked on 11 Aug 2017, 01:41 PM

Hi, is it possible navigate between tabs moving left/right with the fingers? like a carousel.

Thank you.

7 Answers, 1 is accepted

Sort by
0
Stefan Nenchev
Telerik team
answered on 16 Aug 2017, 08:48 AM
Hi Sebastian,

The functionality is not available in the current version of the RadTabView control. However, we might consider implementing such feature at some point so I have logged it as a feature request in our Ideas & Feedback portal. You can track its progress on the following page - TabView: Support sliding in the Header. I have also added some points to your account for the suggestion.

Have a great rest of the week.

Regards,
Stefan Nenchev
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
4mori
Top achievements
Rank 1
answered on 22 Jan 2018, 09:11 AM

Hello,

it would be appropriate to swipe the entire card and not just on the header, a bit like it happens on WhatsApp.
  But is this implementation expected soon?
Thank you
Marcello

0
Stefan Nenchev
Telerik team
answered on 24 Jan 2018, 01:15 PM
Hi, Marcello,

Indeed, once we start working on the functionality, we have plans to introduce such behavior where swiping the whole tab will be respected. However, I cannot provide any exact information on when the functionality will be added. Currently, we are working on introducing new controls and enriching the suite so the feature will probably not be available for the next release - R2. We hope to be able to include it during R3, but I really cannot guarantee you anything at this point. 

Have a great rest of the week.

Regards,
Stefan Nenchev
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Simrat
Top achievements
Rank 1
answered on 21 Sep 2018, 02:15 PM

Hi,

We are evaluating the Telerik Xamarin Forms control suite.   Being able to swipe between tabs is a pretty important feature. It's pretty much standard behavior in modern apps.

 

 

0
Lance | Senior Manager Technical Support
Telerik team
answered on 21 Sep 2018, 03:45 PM
Hello Andy,

As Stefan mentioned, we do have the feature request for swiping in our plans. If you subscribe (click "follow this item") to the Feedback Portal item, you'll be notified when it's implemented: TabView: Support Sliding

In the meantime, I've written a demo using the Xamarin.Forms PanGestureRecognizer to get the same result. 

<ContentPage ...>
    <Grid x:Name="RootGrid">
        <Grid.GestureRecognizers>
            <PanGestureRecognizer PanUpdated="PanGestureRecognizer_OnPanUpdated" />
        </Grid.GestureRecognizers>
 
        <telerikPrimitives:RadTabView x:Name="tabView">
            <telerikPrimitives:RadTabView.Items>
                <telerikPrimitives:TabViewItem HeaderText="Home">
                    <telerikPrimitives:TabViewItem.Content>
                        <Label Margin="10"
                               Text="This is the content of the Home tab" />
                    </telerikPrimitives:TabViewItem.Content>
                </telerikPrimitives:TabViewItem>
                <telerikPrimitives:TabViewItem HeaderText="Folder">
                    <telerikPrimitives:TabViewItem.Content>
                        <Label Margin="10"
                               Text="This is the content of the Folder tab" />
                    </telerikPrimitives:TabViewItem.Content>
                </telerikPrimitives:TabViewItem>
                <telerikPrimitives:TabViewItem HeaderText="View">
                    <telerikPrimitives:TabViewItem.Content>
                        <Label Margin="10"
                               Text="This is the content of the View tab" />
                    </telerikPrimitives:TabViewItem.Content>
                </telerikPrimitives:TabViewItem>
            </telerikPrimitives:RadTabView.Items>
        </telerikPrimitives:RadTabView>
    </Grid>
</ContentPage>

using System.Linq;
using Telerik.XamarinForms.Primitives;
using Xamarin.Forms;
 
namespace YourAppNamespace
{
    public partial class MainPage : ContentPage
    {
        private double swipeDetectionThreshold = 100;
        private double totalTranslatedX;
 
        public MainPage()
        {
            InitializeComponent();
        }
 
        private void PanGestureRecognizer_OnPanUpdated(object sender, PanUpdatedEventArgs e)
        {
            if (e.StatusType == GestureStatus.Running)
            {
                // Keep track of the total X translation while gesture is active
                totalTranslatedX = e.TotalX;
            }
            else if (e.StatusType == GestureStatus.Completed)
            {
                // When the gesture is complete, check the totalTranslatedX value and determine if the gesture was a left ro right swipe
 
                var selectedIndex = tabView.Items.IndexOf(tabView.SelectedItem as TabViewItem);
                 
                if (totalTranslatedX < -swipeDetectionThreshold) // Swiped left
                {
                    if (tabView.SelectedItem == tabView.Items.LastOrDefault())
                    {
                        tabView.SelectedItem = tabView.Items.FirstOrDefault();
                    }
                    else
                    {
                        tabView.SelectedItem = tabView.Items[selectedIndex + 1];
                    }
                }
                else if (totalTranslatedX > swipeDetectionThreshold) // Swiped right
                {
                    // Swiped right
                    if (tabView.SelectedItem == tabView.Items.FirstOrDefault())
                    {
                        tabView.SelectedItem = tabView.Items.LastOrDefault();
                    }
                    else
                    {
                        tabView.SelectedItem = tabView.Items[selectedIndex - 1];
                    }
                }
            }
        }
    }
}


There's a field named "swipeDetectionThreshold", this is the X translation threshold by which you want to invoke a swipe. You can tweak this to meet your needs, just keep in mind that a value too low can inadvertently trigger swipe logic.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Simrat
Top achievements
Rank 1
answered on 21 Sep 2018, 06:30 PM

Hi Lance, your example works great.

I applied it to my layout and it looks like nested StackLayouts suppress the event.
Also, there's no animation during the swipe.   Am I better off using the SlideView and faking my own tabstrip above it?

 

 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Fieldpoint.MobileX"
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
             x:Class="Fieldpoint.MobileX.MainPage">

    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand">
        <StackLayout.GestureRecognizers>
            <PanGestureRecognizer PanUpdated="PanGestureRecognizer_OnPanUpdated" />
        </StackLayout.GestureRecognizers>
        
        <StackLayout  Orientation="Horizontal" HorizontalOptions="FillAndExpand" BackgroundColor="#143964">
            <Button HorizontalOptions="Start" Text="MENU" />
            <Label WidthRequest="10" Text="" />
            <Entry HorizontalOptions="FillAndExpand"></Entry>
            <Button HorizontalOptions="End" Text="SEARCH" />
        </StackLayout>

        <telerikPrimitives:RadTabView x:Name="tabView">
            <telerikPrimitives:RadTabView.Items>
                <telerikPrimitives:TabViewItem HeaderText="Home">
                    <telerikPrimitives:TabViewItem.Content>
                        <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
                            <Label Margin="10" Text="This is the content of the Home tab" />
                        </StackLayout>
                    </telerikPrimitives:TabViewItem.Content>
                </telerikPrimitives:TabViewItem>
                <telerikPrimitives:TabViewItem HeaderText="Work Orders">
                    <telerikPrimitives:TabViewItem.Content>
                        <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
                            <Label Margin="10" Text="Cookie Crumbs" />
                        </StackLayout>
                    </telerikPrimitives:TabViewItem.Content>
                </telerikPrimitives:TabViewItem>
                <telerikPrimitives:TabViewItem HeaderText="View">
                    <telerikPrimitives:TabViewItem.Content>
                        <ScrollView VerticalOptions="FillAndExpand">
                            <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  x:Name="lblSomeLabel" Text="Replaced by code behind"/>
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Work Order List" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Work Order 2342  (Pinned)" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Appointments for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Appointment 9:30am-11:30am for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Item 32GB RAM for Work Order 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="CheckList for Appointment 9:30am-11:30am for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Work Order List" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Work Order 2342  (Pinned)" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Appointments for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Appointment 9:30am-11:30am for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Item 32GB RAM for Work Order 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="CheckList for Appointment 9:30am-11:30am for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Work Order List" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Work Order 2342  (Pinned)" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Appointments for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Appointment 9:30am-11:30am for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Item 32GB RAM for Work Order 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="CheckList for Appointment 9:30am-11:30am for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Work Order List" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Work Order 2342  (Pinned)" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Appointments for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Appointment 9:30am-11:30am for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Item 32GB RAM for Work Order 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="CheckList for Appointment 9:30am-11:30am for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Work Order List" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Work Order 2342  (Pinned)" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Appointments for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Appointment 9:30am-11:30am for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Item 32GB RAM for Work Order 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="CheckList for Appointment 9:30am-11:30am for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Work Order List" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Work Order 2342  (Pinned)" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Appointments for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Appointment 9:30am-11:30am for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Item 32GB RAM for Work Order 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="CheckList for Appointment 9:30am-11:30am for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Work Order List" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Work Order 2342  (Pinned)" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Appointments for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Appointment 9:30am-11:30am for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Item 32GB RAM for Work Order 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="CheckList for Appointment 9:30am-11:30am for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Work Order List" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Work Order 2342  (Pinned)" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Appointments for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Appointment 9:30am-11:30am for WorkOrder 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                                <Label HeightRequest="75" VerticalTextAlignment="Center"  HorizontalOptions="StartAndExpand" Text="Item 32GB RAM for Work Order 2342" />
                                <BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" BackgroundColor="#143964"/>
                            </StackLayout>
                        </ScrollView>
                    </telerikPrimitives:TabViewItem.Content>
                </telerikPrimitives:TabViewItem>
            </telerikPrimitives:RadTabView.Items>
        </telerikPrimitives:RadTabView>        

        
        
    </StackLayout>
</ContentPage>

 

 

 

 

 

0
Lance | Senior Manager Technical Support
Telerik team
answered on 21 Sep 2018, 09:15 PM
Hi Andy,

The TabStrip was designed to be more a UI Layout presenter rather than a data ItemsControl (which is why it doesn't have an ItemsSource type of property). Whereas the SlideView does support ItemsSource and ItemTemplate (withother perks like UI virtualization).

You can also probably use a SegmentedControl as the Tabs" and bind the SegmentedControl.SelectedIndex to the SlideView.SelectedItem with a simple model <-> int converter

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
TabView
Asked by
Sebastián Soto
Top achievements
Rank 1
Answers by
Stefan Nenchev
Telerik team
4mori
Top achievements
Rank 1
Simrat
Top achievements
Rank 1
Lance | Senior Manager Technical Support
Telerik team
Share this question
or