title: Xamarin Forms - Using bindable layout to access different parts of the model
body: <p>I'm trying to setup a gallery of images, that also features the ability to click on the image to show/hide a grid with image description, using the MVVM process.</p>
  
  <p>However, i think my model, view model and view is not correctly setup because i am only able to display the images in the stacklayout if i use <code>BindableLayout.ItemsSource="{Binding GalleryList.Gallery}"</code> in the top stacklayout, but not able to access the other parts of the class, i.e. only the Gallery list.</p>
  
  <p>So essentially, I cant access <code>InfoGridVisible</code> binding, since the it can't find/reach it? (i'm not sure to be honest).</p>
  
  <p>Here is a snippet of my work so far:</p>
  
  <p>View - testpage.xaml:</p>
  
  <pre><code>
  &lt;ContentPage
      xmlns="http://xamarin.com/schemas/2014/forms"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      x:Class="testproject.Pages.testpage"
      xmlns:d="http://xamarin.com/schemas/2014/forms/design"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:styles="clr-namespace:testproject.Styles"
      xmlns:behaviours="clr-namespace:testproject.ViewModels"
      mc:Ignorable="d"
      xmlns:pancakeview="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
      xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
      BackgroundColor="Orange"
      x:Name="Root"&gt;
        &lt;ContentPage.Content&gt;
              &lt;ScrollView&gt;
                  &lt;Grid 
                      Grid.Row="3"&gt;
                      &lt;Grid.RowDefinitions&gt;
                          &lt;RowDefinition Height="Auto" /&gt;
                          &lt;RowDefinition Height="*"/&gt;
                      &lt;/Grid.RowDefinitions&gt;
                      &lt;Grid.ColumnDefinitions&gt;
                          &lt;ColumnDefinition Width="Auto"/&gt;
  
                      &lt;/Grid.ColumnDefinitions&gt;
  
                      &lt;!--PROBLEM STARTS HERE --&gt;
                      &lt;StackLayout x:Name="GalleryStk" Grid.Row="1" Orientation="Vertical" BindableLayout.ItemsSource="{Binding GalleryList.Gallery}" Margin="10,0,10,0"&gt;
                          &lt;BindableLayout.ItemTemplate&gt;
                              &lt;DataTemplate&gt;
                                  &lt;Grid RowSpacing="5" ColumnSpacing="0"&gt;
                                      &lt;Grid.RowDefinitions&gt;
                                          &lt;RowDefinition Height="AUTO"/&gt;
                                          &lt;RowDefinition Height="AUTO"/&gt;
                                      &lt;/Grid.RowDefinitions&gt;
  
  
  
                                      &lt;Frame x:Name="ImageFrame" CornerRadius="20" Padding="0" IsClippedToBounds="True" Grid.Row="0"&gt;
                                          &lt;Image Source="{Binding Image}" Aspect="AspectFill" Grid.RowSpan="2" HorizontalOptions="Center" VerticalOptions="Center"&gt;
                                              &lt;Image.GestureRecognizers&gt; 
                                                  &lt;TapGestureRecognizer BindingContext="{Binding Source={x:Reference Root}, Path=BindingContext}" Command="{Binding TapCommand}"/&gt;
                                              &lt;/Image.GestureRecognizers&gt;
                                          &lt;/Image&gt;
                                      &lt;/Frame&gt;
                                      &lt;!--&lt;Image Source="ShadowOverlay" Grid.RowSpan="2"  Aspect="Fill" VerticalOptions="End" HorizontalOptions="Fill" /&gt;--&gt;
  
                                      &lt;Grid x:Name="InfoGrid"  RowSpacing="10" ColumnSpacing="10" Grid.Row="0" IsEnabled="False" IsVisible="{Binding GalleryList.InfoGridVisible, Source={x:Reference InfoGrid}}"&gt;
                                          &lt;Grid.RowDefinitions&gt;
                                              &lt;RowDefinition Height="AUTO"/&gt;
                                              &lt;RowDefinition Height="25"/&gt;
                                          &lt;/Grid.RowDefinitions&gt;
                                          &lt;Grid.ColumnDefinitions&gt;
                                              &lt;ColumnDefinition Width="5"/&gt;
                                              &lt;ColumnDefinition Width="*"/&gt;
                                              &lt;ColumnDefinition Width="AUTO"/&gt;
                                          &lt;/Grid.ColumnDefinitions&gt;
  
                                              &lt;BoxView Color="Black" Opacity="0.5" CornerRadius="20" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="0" Grid.RowSpan="5" Grid.ColumnSpan="3"/&gt;
                                              &lt;Label Text="{Binding Title}" Padding="10,10,0,0" Grid.Row="0" Grid.ColumnSpan="3" Style="{StaticResource TitleLabel}" LineBreakMode="NoWrap"/&gt;
  
  
                                          &lt;!--&lt;controls:CircleImage Source="{Binding ProfileImage}" Aspect="AspectFill" Grid.Row="1" Grid.Column="0" WidthRequest="25" HeightRequest="25" /&gt;--&gt;
                                              &lt;Label Text="{Binding Description}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Padding="10,0,10,0" Grid.Row="1" Grid.RowSpan="4" Grid.ColumnSpan="3" Style="{StaticResource HandleLabel}"/&gt;
                                              &lt;!--&lt;Button Text="See More" x:Name="ExpandContractButton" Clicked="ExpandContractButton_Clicked" Padding="10,0,10,0" Grid.Row="2" Grid.RowSpan="3" Grid.ColumnSpan="3"/&gt;--&gt;
  
  
                                          &lt;!--&lt;StackLayout Orientation="Horizontal"  VerticalOptions="Center" Grid.Column="2" Grid.Row="1" Spacing="5"&gt;
                                              &lt;Image Source="Eye"/&gt;
                                              &lt;Label Text="{Binding ViewCount, StringFormat='{0:N0}'}" Style="{StaticResource HandleLabel}" /&gt;
                                              &lt;Label Text="views" Style="{StaticResource BodyLabel}"/&gt;
                                          &lt;/StackLayout&gt;--&gt;
                                      &lt;/Grid&gt;
  
                                  &lt;/Grid&gt;
                              &lt;/DataTemplate&gt;
                          &lt;/BindableLayout.ItemTemplate&gt;
  
                          &lt;/StackLayout&gt;
                      &lt;/Grid&gt;
              &lt;/ScrollView&gt;
      &lt;/ContentPage.Content&gt;
  &lt;/ContentPage&gt;
  </code></pre>
  
  <p>Code behind for view - testpage.xaml.cs</p>
  
  <pre><code>public partial class testpage : ContentPage
      {
          private Image _galleryImage;
          public Grid GalleryInfoGrid;
          private static testpage _instance;
  
          public UserProfileViewModel vm { get; }
  
          public static testpage Instance
          {
              get
              {
                  if (_instance == null)
                      _instance = new testpage();
  
                  return _instance;
              }
          }
  
          public testpage()
          {
              InitializeComponent();
              vm = new UserProfileViewModel();
              BindingContext = new UserProfileViewModel();
              //var _galleryInfoGrid = (Grid)Root.FindByName("InfoGrid");
              //_galleryInfoGrid.IsEnabled = true;
              //_galleryInfoGrid.IsVisible = true;
  
          }
  
  </code></pre>
  
  <p>Model:</p>
  
  <pre><code>    {
          public List&lt;GalleryImage&gt; Gallery { get; set; }
          public string InfoGridVisible;
          public string InfoGridEnabled;
      }
  
      public class GalleryImage
      {
          public string Title { get; set; }
          public string Image { get; set; }
          public string Description { get; set; }
      }
  
  </code></pre>
  
  <p>Services (data):</p>
  
  <pre><code>public class ProfileService
      {
          private static ProfileService _instance;
  
  
          public static ProfileService Instance
          {
              get
              {
                  if (_instance == null)
                      _instance = new ProfileService();
  
                  return _instance;
              }
          }
  public GalleryList GetGallery()
          {
              return new GalleryList
              {
                  InfoGridEnabled = "False",
                  InfoGridVisible = "False",
                  Gallery = new List&lt;GalleryImage&gt;
                  {
                      new GalleryImage { Title="sevilla01.jpg", Image = "sevilla01.jpg", Description="Description1Description1Description1Description1 Description1Description1Description1 Description1Description1" },
                      new GalleryImage { Title="sevilla02.jpg", Image = "sevilla02.jpg", Description="Description2 Description1Description1Description1Description1Descript ion1Description1"  },
                      new GalleryImage {Title="sevilla03.jpg", Image = "sevilla03.jpg", Description="Description3Description1Description1Description1"  },
                      new GalleryImage {Title="sevilla04.jpg", Image = "sevilla04.jpg", Description="Description4Description1Description1" },
                      new GalleryImage {Title="sevilla05.jpg", Image = "sevilla05.jpg", Description="Description5Description1" },
                      new GalleryImage {Title="sevilla06.jpg", Image = "sevilla06.jpg", Description="Description6" },
                      new GalleryImage {Title="sevilla07.jpg", Image = "sevilla07.jpg", Description="Description7Description1Description1Description1Description1Description1Description1Description1Description1 Description1" }
                  }
              };
          }
      }
  
  </code></pre>
  
  <p>View Model - UserProfileViewModel.cs:</p>
  
  <pre><code>public class UserProfileViewModel : BindableObject
      {
          //Models
          private Profile _profile;
          private GalleryList _galleryList;
          int taps = 0;
          ICommand tapCommand;
  
          public UserProfileViewModel()
          {
              Profile = ProfileService.Instance.GetProfile();
              GalleryList = ProfileService.Instance.GetGallery();
  
              tapCommand = new Command(OnTapped);
          }
  
          public ICommand TapCommand
          {
              get { return tapCommand; }
          }
  
          void OnTapped(object s)
          {
              taps++;
              //var info1Grid = testpage.Instance.GalleryInfoGrid;
              //info1Grid.IsVisible = true;
              //info1Grid.IsEnabled = true;
              //GalleryList.InfoGridEnabled = "False";
              //GalleryList.InfoGridVisible = "False";
              Console.WriteLine("parameter: " + taps + " " + GalleryList.InfoGridVisible);
              OnPropertyChanged();
          }
  
          public Profile Profile
          {
              get { return _profile; }
              set
              {
                  _profile = value;
                  OnPropertyChanged();
              }
          }
          public GalleryList GalleryList
          {
              get { return _galleryList; }
              set
              {
                  _galleryList = value;
                  OnPropertyChanged();
              }
          }
      }
  
  </code></pre>
  
  <p>Apologies for the code dump, any help would be appreciated as i have been stuck on this for a few days.
  If there is a better method of implementing this, i would love to hear it.</p>