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
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?
@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.
Try making List Public. Also I would recommend change the name as it's also a Type
@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#.
@ThomasBurkhart not even displaying a label
Could you just try it with a normal ListView?
In your XAML:
Tried that?
He said he set the ViewModel as BindingContect of the Page so that cannot be the problem
This is the Binding Context i declare
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.
Does you ViewModel implement INotifyPropertyChanged?
i am using MvvmLight & rest of app is using that & working fine
In my App.cs
and this to register the VM
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
@imrohit I think you have to push to github a repo...
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.