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;
            }
        }
    }
    
Sign In or Register to comment.