1. Home
  2. Forum
  3. Xamarin.Forms
  4. sfCarousel does not display items when they are added to the list

sfCarousel does not display items when they are added to the list

In my app the user take a picture and then this picture is upload to a web service, the web service return a JSON string that contains the URLimage and a GUID, then a carousel object is create with the JSON values and the object is added to the list, the weird thing here is that if I add a picture in the contructor page to the list the carousel display the image without problem, but when I take a picture and whole process starts no image are displayed.

XAML CODE

     <?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:syncfusion="clr-namespace:Syncfusion.SfCarousel.XForms;assembly=Syncfusion.SfCarousel.XForms"
             x:Class="DemoActivos.FotosActivos"
             BackgroundColor="Black">
    <ContentPage.Content>
        <StackLayout x:Name="stackLayout" Orientation="Vertical"
                     VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <!--Carousel-->
            <syncfusion:SfCarousel x:Name="CarouselView" SelectionChanged="CarouselView_SelectionChanged"                                    
                                   VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">
            </syncfusion:SfCarousel>
            <!--Stacklayout-->
            <StackLayout Orientation="Horizontal" Padding="20, 0, 20, 20" VerticalOptions="End">
                <!--Añadir-->
                <Image x:Name="imgEliminar" Source="borrar.png" HorizontalOptions="StartAndExpand" />
                <!--Eliminar-->
                <Image x:Name="imgAnadir" Source="mas.png" HorizontalOptions="End" />
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
     </ContentPage>

LOGIC CODE

        protected async void ObtenerFoto()
        {
            //Se limita a 4 las fotos que se pueden tomar por activo
            if (carouselList.Count < 4)
            {
                //Interface para ejecutar el proceso de la camara
                var media = Resolver.Resolve<IMediaPicker>();

                string error = string.Empty;

                //Proceso en espera que se ejecutara al aceptar la foto
                await media.TakePhotoAsync(new CameraMediaStorageOptions { DefaultCamera = CameraDevice.Front, MaxPixelDimension = 400 }).ContinueWith(async t =>
                {
                    if (t.IsFaulted)
                        error = t.Exception.InnerException.ToString();
                    else if (t.IsCanceled)
                        error = Constantes.FotosActivosCancelado;
                    else if (t.IsCompleted)
                    {
                        string pathFile = t.Result.Path;

                        InsertarFoto(pathFile);
                        return;
                    }

                    await DisplayAlert("Informacion", error, "Aceptar");
                });
            }
            else
                await DisplayAlert("Informacion", Constantes.FotosActivosMaximoPermitido, "Aceptar");
        }

        protected async void InsertarFoto(string path)
        {
            //Se crea la instancia del usuario
            var usuario = new UsuarioServiceEntidad()
            {
                CuentaUsuario = Application.Current.Properties["CuentaUsuario"].ToString(),
                Contrasenia = Application.Current.Properties["Contraseña"].ToString(),
                ClaveDispositivo = CrossDeviceInfo.Current.Id,
                SesionId = Application.Current.Properties["SesionId"].ToString()
            };

            //Instancia para insertar la foto
            var localizacion = new LocalizacionActivoEntidad()
            {
                SesionId = Application.Current.Properties["SesionId"].ToString(),
                LevantamientoIdTemp = LevantamientoId,
                EmpleadoId = EmpleadoId,
                ActivoId = ActivoId,
                EstatusId = EstatusId,
                LocalizacionJson = ObtenerLocalizacion(),
                UsuarioIdInserto = Convert.ToInt32(Application.Current.Properties["UsuarioId"].ToString()),
                Archivo = DependencyService.Get<IFile>().ReadAllBytes(path)
            };

            //Validar que se haya obtenido la localizacion
            if (string.IsNullOrEmpty(localizacion.LocalizacionJson))
            {
                await DisplayAlert("Error", Constantes.ErrorInesperado, "Aceptar");
                return;
            }

            //Instancia para consumir el web service
            var serviceAgent = new ActivoServiceAgent();

            //JSON recibido
            string sJSON = await serviceAgent.InsertarFotosActivo(usuario, localizacion);

            //Si no hay error en la aplicacion se obtiene la url y el id
            //del JSON para crear la instancia que se mostrara en el carousel
            if (sJSON != string.Empty)
            {
                dynamic dynObj = JsonConvert.DeserializeObject(sJSON);

                string descripcionError = dynObj.DescripcionError;

                if (dynObj.ErrorId == "0")
                {
                    string sURL = dynObj.Registros[0].UrlImagen;
                    string sFileId = dynObj.Registros[0].FileId;

                    DependencyService.Get<IFile>().Delete(path);

                    var carousel = new Carousel() { Url = sURL, FileId = sFileId };

                    Device.BeginInvokeOnMainThread(() =>
                    {
                        carouselList.Add(carousel);
                    });
                }
                else
                    await DisplayAlert("Error", descripcionError, "Aceptar");
            }
            else
                await DisplayAlert("Error", Constantes.ErrorInesperado, "Aceptar");
        }

CONSTRUCTOR CODE

        private void ConfigurarComponentes()
        {
            ConfigurarCarousel();

            ConfigurarImagenes();
        }

        protected void ConfigurarCarousel()
        {
            carouselList = new ObservableCollection<Carousel>();

            var DataTemplate = new DataTemplate(() =>
            {
                var nameLabel = new Image();
                nameLabel.Aspect = Aspect.AspectFit;
                nameLabel.SetBinding(Image.SourceProperty, "Url");
                return nameLabel;
            });

            //Adding items to the list here the sfCarousel's items are displayed fine

            CarouselView.ItemTemplate = DataTemplate;
            CarouselView.DataSource = carouselList;
        }

        protected void ConfigurarImagenes()
        {
            imgAnadir.GestureRecognizers.Add(
                new TapGestureRecognizer
                {
                    Command = new Command((o) => { ObtenerFoto(); }),
                    NumberOfTapsRequired = 1
                }
            );
        }

1 Reply
MS Mariappan S Syncfusion Team October 31, 2017 01:04 PM UTC

Hi Abraham, 

We were able to reproduce the issue and have logged defect report regarding this. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates 


Please let me know if you have any questions. 

Regards, 
Mariappan S 


Loader.
Up arrow icon