Forum General

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

Get Images Slider From Web in Xamarin Froms

elahi1mahdielahi1mahdi Member ✭✭
edited December 2019 in General

Hi,
i use ImageCarouselRenderer for use image slider but i want read my image from web and use image source , no use File Image Source from project

`ObservableCollection imageSources = new ObservableCollection();
public MainPage()
{
InitializeComponent();

        imageSources.Add("XamarinmonkeyLogo.png");  
        imageSources.Add("github.png");  
        imageSources.Add("microsoft.png");  


        imgSlider.Images = imageSources;  
    }  `

i want get my image from web and set in image slider and show it

how can i do it ?

Best Answer

Answers

  • elahi1mahdielahi1mahdi Member ✭✭

    i use timer for automatic slider with timer to change carousel view position but its scroll very high speed
    how to change scroll speed ?

    my timer
    ` Device.StartTimer(TimeSpan.FromSeconds(2), (Func)(() =>
    {

                imgSlider.Position = (imgSlider.Position + 1) % imageSources.Count;
    
                return true;
            }));`
    
  • JGoldbergerJGoldberger USMember, Forum Administrator, Xamarin Team, University Xamurai
    edited December 2019

    I see no way to adjust the scrolling speed.

    Xamarin.Forms uses the default scrolling speed set in the underlying iOS UICollectionView and I can't even find a way to modify the scrolling speed on the native UICollectionView/UICollectionViewController.

    You could instead use a ScrollView and a StackLayout and then animate it manually:

    MainPage.xaml:

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 mc:Ignorable="d"
                 x:Class="YourNamespace.MainPage"
                 x:Name="imageSliderPage">
        <ScrollView Orientation="Horizontal"
                    x:Name="scrollView">
            <StackLayout Orientation="Horizontal"
                         x:Name="stackLayout"
                         Spacing="0"
                         BindableLayout.ItemsSource="{Binding ImageSources}">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding .}"
                               WidthRequest="{Binding Source={x:Reference imageSliderPage}, Path=Width}"
                               Aspect="AspectFit"
                               />
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </StackLayout>
    
        </ScrollView>  
    </ContentPage>
    

    MainPage.xaml.cs:

    namespace YourNamespace
    {
        public partial class MainPage : ContentPage
        {
            public ObservableCollection<ImageSource> ImageSources { get; set; } = new ObservableCollection<ImageSource>();
            uint scrollRate = 1000; // in milliseconds
    
            public ImageSliderPage()
            {
                InitializeComponent();
                BindingContext = this;
    
                ImageSources.Add(new Uri("https://www.nasa.gov/sites/default/files/styles/full_width_feature/public/thumbnails/image/49258250868_0e5795b4a9_3k.jpg"));
                ImageSources.Add(new Uri("https://www.nasa.gov/sites/default/files/styles/full_width_feature/public/thumbnails/image/iss061e091427.jpg"));
                ImageSources.Add(new Uri("https://www.nasa.gov/sites/default/files/styles/full_width_feature/public/thumbnails/image/iss061e076563.jpg"));
    
                Device.StartTimer(TimeSpan.FromSeconds(2), HandleTimer);
    
            }
    
            bool HandleTimer()
            {
                double offset = scrollView.ScrollX >= (ImageSources.Count - 1) * this.Width ? 0 : scrollView.ScrollX + this.Width;
                var animation = new Animation(x => scrollView.ScrollToAsync(x, scrollView.ScrollY, false), scrollView.ScrollX, offset);
                animation.Commit(this, "Scroll",length: scrollRate);
    
                return true;
            }
        }
    }
    
  • Nandu09528Nandu09528 Member ✭✭
    edited March 2020

    Is it possible to add left right arrows to swipe ?

  • JGoldbergerJGoldberger USMember, Forum Administrator, Xamarin Team, University Xamurai

    For the carousel view, you can already swipe left and right as that functionality is built in. So you would just have to add an ImageButton (or other control) with a left and right arrow on either side of the carousel view.

    If you are going the ScrollView and StackLayout route, you would have to add a SwipeGestureRecognizer to the StackLayout in addition to adding the ImageButtons

Sign In or Register to comment.