We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

enable navigation strip for visualizing index, but disable click on the strip

Thread ID:

Created:

Updated:

Platform:

Replies:

150449 Jan 7,2020 06:43 PM UTC Jan 9,2020 12:06 PM UTC Xamarin.Forms 4
loading
Tags: SfRotator
Mike
Asked On January 7, 2020 06:43 PM UTC

I'm using a rotator to guide a user through a set of tutorial images.  

Swiping is enabled. 

Navigationstrip is enabled.

Everything is working well.  Though we discovered that a user could start at the beginning and just tap on the very last dot and skip over everything in between.  Our client has requested that they do not want users to be able to skip to the very last image without going through the entire set.

I've looked through documentation, but I cannot find a way to disable the tap event on dots,  or if there is an explicit click event accessible.

Is it possible to disable the NavigationStrip click event?



Hemalatha Marikumar [Syncfusion]
Replied On January 8, 2020 01:53 PM UTC

Hi Mike, 
 
Greetings from Syncfusion.

We have analyzed your query and currently we don’t have touch interaction support for NavigationStripMode. We have logged this one as feature request and it can be tracked through our feedback portal below.

Feedback link:
https://www.syncfusion.com/feedback/11153/disable-touch-interaction-support-for-navigationstripmode

However, you can achieve this requirement by creating custom view based on the rotator items as like below code snippet. 
 
XAML: 
<rotator:SfRotator Grid.Row="0" 
            SelectedIndexChanged="Rotator_SelectedIndexChanged" 
            x:Name="rotator" 
            NavigationStripMode="Dots" 
            DotPlacement="None"> 
            <rotator:SfRotator.ItemTemplate> 
                <DataTemplate> 
                    <Grid > 
                        <Image VerticalOptions="Center" Aspect="Fill" HorizontalOptions="Center" Source="{Binding Image}"/> 
                    </Grid> 
                </DataTemplate> 
            </rotator:SfRotator.ItemTemplate> 
        </rotator:SfRotator> 
        <StackLayout Grid.Row="1" x:Name="rotatorThumb" Orientation="Horizontal" HorizontalOptions="Center"> 
          </StackLayout> 
  
C#: 
  public partial class MainPage : ContentPage 
    { 
  
        public List<RotatorViewModel> RotatorItems { getset; } 
        public MainPage() 
        { 
            InitializeComponent(); 
  
  
            RotatorItems = new List<RotatorViewModel>() 
            { 
  
              new RotatorViewModel(){Image="image3.jpg"}, 
                new RotatorViewModel(){Image="image2.jpg"}, 
                new RotatorViewModel(){Image="image1.jpg"}, 
                new RotatorViewModel(){Image="image4.jpg"}, 
  
           }; 
  
            rotator.ItemsSource = RotatorItems; 
  
            for (var i = 0; i < RotatorItems.Count; i++) 
            { 
                var itemView = new DotsView() { BindingContext = RotatorItems[i], Index = i }; 
                if (rotator.SelectedIndex == i) 
                    (itemView.BindingContext as RotatorViewModel).ThumbBorder = Color.Red; 
  
                rotatorThumb.Children.Add(itemView); 
            } 
            BindingContext = this; 
        } 
  
  
        private void Rotator_SelectedIndexChanged(object sender, Syncfusion.SfRotator.XForms.SelectedIndexChangedEventArgs e) 
        { 
            foreach (DotsView thumbView in rotatorThumb.Children) 
            { 
                (thumbView.BindingContext as RotatorViewModel).ThumbBorder = Color.LightGray; 
            } 
           ((rotatorThumb.Children[(int)e.Index] as DotsView).BindingContext as RotatorViewModel). 
                       ThumbBorder = Color.Red; 
        } 
    } 
  
DotsView: 
<ContentView.Content> 
        <border:SfBorder BorderColor="{Binding ThumbBorder}" HorizontalOptions="Center" VerticalOptions="Center" BorderWidth="5" CornerRadius="50"  /> 
  </ContentView.Content> 
    

We have created sample based on your requirement please find the sample from below location. 
 

Regards, 
Hemalatha M. 


Mike
Replied On January 8, 2020 07:00 PM UTC

Thank you for the proposed work-around.  I hope the feature request is put into place one day.

I was able to see your sample working in the Android simulator. 

However, the iOS simulator doesn't seem to render the dots and I am not sure why.

I've attached screenshots from both simulators.

Attachment: Archive_c1d861e.zip

Mike Bouchard
Replied On January 8, 2020 07:49 PM UTC

I've sorted out the iOS side.   I didn't realize that SFBorder needed to be initialized in iOS appdelegate until I read the documentation.  Both platforms appear correctly, so I will attempt to use this workaround until this feature is made available.

thank you!

Syncfusion.XForms.iOS.Border.SfBorderRenderer.Init()

Hemalatha Marikumar [Syncfusion]
Replied On January 9, 2020 12:06 PM UTC

Hi Mike, 
 
Thanks for your update. 
 
We are glad to hear that given solution works. 
 
As promised earlier, we will implement this feature and that will be available in our any of upcoming release. 
 
Regards, 
Hemalatha M. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon