Forum Xamarin.Forms

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.

Xamarin xaml binding not working

I m making a Gallery Page using xamarin forms. I wrote the Code in Pure C# & it worked but when I try to do same in XAML following the MVVM, nothing appears on page,there is some binding issue with the image. Please Help.

C# Code

        public class GalleryPlus : ContentPage
        {
            const string keys = "**********************************";
            ObservableCollection<string> images = new ObservableCollection<string> ();
            ObservableCollection<ItemModel> List;

            ProgressBar pb;
            public bool boolVisible {
                get;
                set;
            }
            public bool boolRunning {
                get;
                set;
            }
            async Task<bool> AlphaPhase ()
            {
                RootObject rootobject = new RootObject ();
                var client = new System.Net.Http.HttpClient ();
                string Jsonstr = string.Format ("https://api.instagram.com/v1/users/self/media/recent?access_token={0}", keys);
                var response = await client.GetAsync (Jsonstr);
                var earthquakesJson = response.Content.ReadAsStringAsync ().Result;
                rootobject = JsonConvert.DeserializeObject<RootObject> (earthquakesJson);
                await pb.ProgressTo (.5, 250, Easing.Linear);
                foreach (var item in rootobject.data) {
                    images.Add (item.images.low_resolution.url);
                }
                if (images.Count > 0) {
                    await pb.ProgressTo (.6, 250, Easing.Linear);
                    return true;
                } else {
                    await pb.ProgressTo (.99, 250, Easing.Linear);
                    return false;
                }
            }
            async void BetaPhase ()
            {
                await pb.ProgressTo (.4, 250, Easing.Linear);
                var result = await AlphaPhase ();
                if (result.Equals (true)) {
                    int number = 0;
                    //  for (int n = 0; n < 20; n++) {
                    for (int i = 0; i < images.Count; i++) {
                        number++;
                        var item = new ItemModel () {
                            ImageUrl = images [i],
                            FileName = string.Format ("image_{0}.jpg", number),
                        };

                        List.Add (item);
                        //  }
                    }
                    await pb.ProgressTo (.7, 250, Easing.Linear);
                }
            }
            public GalleryPlus ()
            {
                List = new ObservableCollection<ItemModel> ();
                Image imge = new Image { Source = "gallery_iamge.png", Aspect = Aspect.AspectFill };
                pb = new ProgressBar { IsVisible = true, IsEnabled = true, Progress = .2 };
                FlowListView listView = new FlowListView () {
                    FlowColumnTemplate = new DataTemplate (typeof (ListCell)),
                    SeparatorVisibility = SeparatorVisibility.None,
                    HasUnevenRows = true,
                    FlowColumnMinWidth = 110,
                    FlowItemsSource = List,
                };
                listView.FlowItemTapped += (s, e) => {
                    var item = (ItemModel)e.Item;
                    if (item != null) {
                        App.Current.MainPage.DisplayAlert ("Alert", "Tapped {0} =" + item.FileName, "Cancel");
                    }
                };

                Content = new StackLayout {
                    Children = {

                        imge,
                        pb,
                       listView
                    }
                };
                BetaPhase ();


            }
            public class ItemModel
            {
                public string ImageUrl { get; set; }
                public string FileName { get; set; }

            }
            public class ListCell : ContentView
            {
                public ListCell ()
                {
                    CachedImage IconImage = new CachedImage {
                        HeightRequest = 100,
                        Aspect = Aspect.Fill,
                        DownsampleHeight = 100,
                        DownsampleUseDipUnits = false,
                    };
                    IconImage.SetBinding (CachedImage.SourceProperty, "ImageUrl");
                    Grid grd = new Grid {
                        Padding = 3,
                        ColumnDefinitions = {
                        new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) },
                    },
                        RowDefinitions = {
                        new RowDefinition { Height=GridLength.Star},
                    },
                    };
                    grd.Children.Add (IconImage, 0, 0);
                    Content = grd;
                }
            }
        }}

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" 
        Title="GALLERY" x:Class="BarberShop.Gallery" 
        xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView" 
        xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms">
            <ContentPage.Content>
            <StackLayout>
            <Image Aspect="AspectFill" Source="gallery_iamge.png" />

            <flv:FlowListView SeparatorVisibility="None" HasUnevenRows="true" FlowItemTappedCommand="{Binding TapCommand}" FlowColumnMinWidth="110" FlowItemsSource="{Binding List}">
            <flv:FlowListView.FlowColumnTemplate>
            <DataTemplate>
            <Grid Padding="3">
            <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <ffimageloading:CachedImage HeightRequest="100" Aspect="AspectFill" DownsampleHeight="100" DownsampleUseDipUnits="false" Source="{Binding ImageUrl}" />
            </Grid>
            </DataTemplate>
            </flv:FlowListView.FlowColumnTemplate>
            </flv:FlowListView>


                </StackLayout>
            </ContentPage.Content>
        </ContentPage>

ViewModelCode

    public class GalleryViewModel : ViewModelBase
        {
            public class ItemModel
            {
                public string ImageUrl { get; set; }
                public string FileName { get; set; }

            }
    const string keys = "******************";

            ObservableCollection<ItemModel> List { get; set; }
    public GalleryViewModel ()
            {
    List = new ObservableCollection<ItemModel> ();
                BetaPhase ();
    }



            async Task<bool> AlphaPhase ()
            {

                RootObject rootobject = new RootObject ();
                var client = new System.Net.Http.HttpClient ();
                string Jsonstr = string.Format ("https://api.instagram.com/v1/users/self/media/recent?access_token={0}", keys);
                var response = await client.GetAsync (Jsonstr);
                var earthquakesJson = response.Content.ReadAsStringAsync ().Result;
                rootobject = JsonConvert.DeserializeObject<RootObject> (earthquakesJson);
                foreach (var item in rootobject.data) {
                    images.Add (item.images.low_resolution.url);
                }
                response.Dispose ();

                if (images.Count > 0) {
                    return true;
                } else {
                    return false;
                }
            }

            async void BetaPhase ()
            {

                var result = await AlphaPhase ();
                if (result.Equals (true)) {
                    int number = 0;
                    for (int n = 0; n < 20; n++) {
                        for (int i = 0; i < images.Count; i++) {
                            number++;
                            var item = new ItemModel () {
                                ImageUrl = images [i],
                                FileName = string.Format ("image_{0}.jpg", number),
                            };


                            List.Add (item);
                        }
                    }

                }
            }

Answers

  • ThomasBurkhartThomasBurkhart DEMember ✭✭✭✭

    What do you mean by nothing is displayed? Not even the static defined image? Do you set you viewmodel as Bindingcontext of you page before pushing the Page?

  • imrohitimrohit INMember

    @ThomasBurkhart Image Do Display Rest of part is blank, if i change background color of FlowListView that is visible too, only problem this view not reading anything from ObservableCollection List nor from *ImageUrl property of ItemModel. yes i had set the viewmodel as binding context still no chances.

  • ThomasBurkhartThomasBurkhart DEMember ✭✭✭✭

    Try making List Public. Also I would recommend change the name as it's also a Type

  • imrohitimrohit INMember

    @ThomasBurkhart I changed that , I created a simple page with a simple list & bind FlowListView to display text, Still nothing is visible. But thing is same code working with C#.

  • imrohitimrohit INMember

    @ThomasBurkhart not even displaying a label

                    <flv:FlowListView SeparatorVisibility="None" HasUnevenRows="true" FlowColumnMinWidth="110" ItemsSource="{Binding Tata}">
                            <flv:FlowListView.FlowColumnTemplate>
                                <DataTemplate>
                                    <Grid Padding="3">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="100" />
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Label Text="{Binding FileName}" />
                                    </Grid>
                                </DataTemplate>
                            </flv:FlowListView.FlowColumnTemplate>
                        </flv:FlowListView>
    
  • ThomasBurkhartThomasBurkhart DEMember ✭✭✭✭

    Could you just try it with a normal ListView?

  • lindstromdevlindstromdev SEMember ✭✭

    In your XAML:

    xmlns:local="clr-namespace:YourAppName.Viewmodels
    
    
        <ContentPage.BindingContext>
             <local:GalleryViewModel />
            </ContentPage.BindingContext>
    

    Tried that?

  • ThomasBurkhartThomasBurkhart DEMember ✭✭✭✭

    He said he set the ViewModel as BindingContect of the Page so that cannot be the problem

  • imrohitimrohit INMember

    This is the Binding Context i declare

    public partial class Gallery : ContentPage
        {
            public GalleryViewModel vm {
                get { return this.BindingContext as GalleryViewModel; }
            }
            public Gallery ()
            {
                this.BindingContext = App.Locator.Gallery;
                App.Locator.Gallery.Navigation = Navigation;
                InitializeComponent ();
            }
    

    I put the static image in my view model and bind that from there, so there is no problem that it not read from view model. But this unable to read the same List & ItemModel property if i use Listview there, Default Listview also coming blank.

     <ListView x:Name="OffersListView" RowHeight="50" ItemsSource="{Binding Lister}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <Label Text="{Binding FileName}" />
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>)
    
  • ThomasBurkhartThomasBurkhart DEMember ✭✭✭✭

    Does you ViewModel implement INotifyPropertyChanged?

  • imrohitimrohit INMember

    i am using MvvmLight & rest of app is using that & working fine

    In my App.cs

            private static ViewModelLocator _locator;
                public static ViewModelLocator Locator {
                    get {
                        return _locator ?? (_locator = new ViewModelLocator ());
                    }
                }
    

    and this to register the VM

        public class ViewModelLocator
            {
                public ViewModelLocator ()
                {
                    ServiceLocator.SetLocatorProvider (() => SimpleIoc.Default);
                    SimpleIoc.Default.Register<GalleryViewModel> ();
        }
    
            public GalleryViewModel Gallery {
                    get {
                        return ServiceLocator.Current.GetInstance<GalleryViewModel> ();
                    }
                }
    
  • ThomasBurkhartThomasBurkhart DEMember ✭✭✭✭
    edited November 2016

    And you are sure that your List does contain data? I use this sort of Binding all the time so I can asure you that it normally works

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    @imrohit I think you have to push to github a repo...

  • imrohitimrohit INMember

    Yes I put Breakpoint on List & It show Data in it, Well I ll put this in GitHub & Share the Link here. Please review that.

Sign In or Register to comment.