Tabs navigation

8 posts, 0 answers
  1. Sebastián Soto
    Sebastián Soto avatar
    11 posts
    Member since:
    Jun 2017

    Posted 11 Aug 2017 Link to this post

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

    Thank you.

  2. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    652 posts

    Posted 16 Aug 2017 Link to this post

    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
  3. 4mori
    4mori avatar
    8 posts
    Member since:
    Apr 2009

    Posted 22 Jan in reply to Stefan Nenchev Link to this post

    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

  4. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    652 posts

    Posted 24 Jan Link to this post

    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
  5. Andy Leitzinger
    Andy  Leitzinger avatar
    2 posts
    Member since:
    May 2018

    Posted 21 Sep Link to this post

    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.

     

     

  6. Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    785 posts

    Posted 21 Sep Link to this post

    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
  7. Andy Leitzinger
    Andy  Leitzinger avatar
    2 posts
    Member since:
    May 2018

    Posted 21 Sep in reply to Lance | Tech Support Engineer, Sr. Link to this post

    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>

     

     

     

     

     

  8. Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    785 posts

    Posted 21 Sep Link to this post

    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
Back to Top