MVVM Binding Issues

xjinxxjinx USMember
edited July 2015 in Xamarin.Forms

Hello all,

I am having difficulty with the data bindings with xamarin and I was hoping someone might be able to see what I am doing wrong.

First created this in my resources

        <DataTemplate x:Key="tileTemplate">
            <Grid x:Name="gridTile" WidthRequest="90" HeightRequest="90" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="Aqua">
                <StackLayout>
                    <Grid BackgroundColor="{Binding Color}">
                        <!---<Image Source="{Binding Image}" IsVisible="{Binding IsVisible}" Height="70" Width="70" HorizontalOptions="Center"/>-->
                    </Grid>
                    <Grid HeightRequest="20" WidthRequest="90">
                        <StackLayout IsVisible="{Binding IsVisible}" BackgroundColor="Gray">
                            <TextCell Text="{Binding Text}" HeightRequest="20" TextColor="White" HorizontalOptions="CenterAndExpand"/>
                        </StackLayout>
                    </Grid>
                </StackLayout>
            </Grid>
        </DataTemplate>

In the constructor I have this.BindingContext = new TileBoardViewModel (); and in the same view as above I added

(using the gridview class from the xlab package)

        <controls:GridView
                x:Name="TileBoard" 
                HeightRequest="90"
                HorizontalOptions="CenterAndExpand"
                VerticalOptions="Center"                
                ItemsSource="{Binding TileTimes}" 
                ItemTemplate="{StaticResource tileTemplate}"/>

My observable collection of tiles gets populated but it doesn't show up in my view :(.

Is there something that I am missing or not getting?

Thanks for any help!!

Answers

  • AlecTucker.2208AlecTucker.2208 AUInsider, University, Developer Group Leader mod

    Hi Joshua,

    A couple of questions:

    You've got <controls:GridView... as your grid, rather than a standard Xamarin Forms Grid. Please post the xmlns line for the top of the xml that defines 'controls'.
    Also please post your property from the view model - with getter and setter.

    Thanks
    Alec

  • xjinxxjinx USMember

    Hi Alec!

    Here is the snippet from the top

    xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"

    From the viewmodel

        /// <summary>
        /// Gets the current tile.
        /// </summary>
        public Tile CurrentCategory
        {
            get
            {
                return this._currentCategory;
            }
            protected set
            {
                this._currentCategory = value;
                this.NotifyPropertChanged("CurrentCategory");
            }
        }
    

    One thing I need to change at the top... copy and past error.

                <controls:GridView
                    x:Name="TileBoard"
                    HeightRequest="90"
                    HorizontalOptions="CenterAndExpand"
                        VerticalOptions="Center" 
                    ItemsSource="{Binding CurrentCategory.Items}"
                    ItemTemplate="{StaticResource tileTemplate}"/>
    

    I have no idea how I got "TileTimes".

  • AlecTucker.2208AlecTucker.2208 AUInsider, University, Developer Group Leader mod

    Thanks - looks OK.

    Try replacing this:

                            <StackLayout IsVisible="{Binding IsVisible}" BackgroundColor="Gray">
                                <TextCell Text="{Binding Text}" HeightRequest="20" TextColor="White" HorizontalOptions="CenterAndExpand"/>
                            </StackLayout>
    

    With this:

                            <StackLayout IsVisible="{Binding IsVisible}" BackgroundColor="Gray">
                                <Label Text="{Binding Text}" HeightRequest="20" TextColor="White" HorizontalOptions="CenterAndExpand"/>
                            </StackLayout>
    
  • xjinxxjinx USMember

    Thanks for the reply unfortunately that didn't work either :(. So confirmed that at least the GridView ItemsSource is being "bound".

    So at least it is getting the data. So either the datatemplate isn't being applied or there is an issue where the items are showing off screen?

    Do you have any tips on how to make sure that I can see the data within the visible space of the gridview. I thought the above might work but not sure now :(.

  • DavidDancyDavidDancy AUMember ✭✭✭✭

    @xjinx I see your DataTemplate is a Grid containing a StackLayout that in turn contains two Grids. That seems a bit unweildy to me. Do you have a sketch of what you're trying to achieve? I'd recommend trying to turn the whole thing into just one Grid if possible.

  • AlecTucker.2208AlecTucker.2208 AUInsider, University, Developer Group Leader mod

    Agreed.

    Will a ListView using an ImageCell meet your needs?
    Described here: http://developer.xamarin.com/guides/cross-platform/xamarin-forms/controls/cells/

        <ListView x:Name="lvAuditItems"
                  ItemsSource="{Binding CurrentCategory.Items}"
                  >
          <ListView.ItemTemplate>
            <DataTemplate>
              <ImageCell ImageSource="{Binding Image}" Text="{Binding Text}" Detail="{Binding MoreTextHereIfYouNeedIt}" />
            </DataTemplate>
          </ListView.ItemTemplate>
        </ListView>
    
  • xjinxxjinx USMember
    edited July 2015

    Hi guys, thanks for the comments. The list view will not meet my needs. I will share with you the app that I am trying to convert.

    https://www.microsoft.com/en-us/store/apps/passeri/9wzdncrdfwnk

    It is designed to be on a tablet, and I need to show a grid of icons to the user.

  • DavidDancyDavidDancy AUMember ✭✭✭✭

    So in that case I would look at trying to figure out how to use the various views in Xamarin Forms to achieve the look you need.
    The top set of icons could be a horizontal StackLayout in a ScrollView.
    The center grid of icons is trickier because Xamarin Forms Grid control isn't dynamic, so it doesn't have an ItemsSource like a ListView does.
    However the Xamarin Forms Labs project has a GridView, and there are some other projects that also have them.
    Alternatively, if you're prepared to build the Grid in code, you can do it in the SizeAllocated callback of the page. The size of the page has been allocated by then, and you can easily calculate the number of rows and columns of your grid, then set up the various icons from your own data source. It's important to do it in the SizeAllocated because that will automatically handle device rotations and window resizes (iOS 9 split views) for you.

    HTH

  • DavidDancyDavidDancy AUMember ✭✭✭✭

    Actually, thinking about it some more, I'd make the top set of icons into a Grid as well. If there aren't too many you could put the Grid into a ScrollView, or alternatively use the left and right arrow buttons to refill the Grid with different icons.

  • xjinxxjinx USMember

    Hi David!

    Yes, found out about Grid the hard way. Not sure if you saw but I am trying to use the GridView from xlab. I have the item source bound and see the items in the code behind but I can't see them in the view and it doesn't look like the template is being applied. I have even removed everything from the template besides the label...

  • DavidDancyDavidDancy AUMember ✭✭✭✭

    OK, sorry I hadn't seen that your controls namespace was the Xamarin Forms Labs assembly.

    I know in the ideal case it's better if you can use your DataTemplate as a resource, but have you tried inlining it first? I usually do that to get the kinks out of the template, then move it to a separate file or to a resource once it's working. Otherwise I have too many problems to solve at once if it doesn't work straight away.

  • xjinxxjinx USMember

    That is great advice! So I put in a list view in and tried it again using a ViewCell and I was able to see some things :). However, when doing so with the GridView not so much. I am wondering if there is a problem within the GridView itself maybe it can only show images?

  • xjinxxjinx USMember
    edited August 2015

    I am getting desperate... pulled this form their example

    https://github.com/XLabs/Xamarin-Forms-Labs/blob/master/Samples/XLabs.Sample/Pages/Controls/GridViewPage.xaml

    Updated it slightly but still no good. Unless there is a bug for gridview on ios I have no idea what I am doing wrong :neutral:

    <?xml version="1.0" encoding="UTF-8"?>

    <mvvm:BaseView.Content>

    <controls:GridView.ItemTemplate>


    <ViewCell.View>

    </mvvm:BaseView.Content>
    

    Also I think this would be super helpful if the xamarin folks made it so Grid had an itemssource...

  • DavidDancyDavidDancy AUMember ✭✭✭✭

    Well, I think they will eventually make one. However the Grid as it stands isn't the kind of grid that will benefit from or be able to use a ItemsSource because it's a fixed grid where you define all the columns and rows at design time.

    There are lots of people here who would be willing to help debug your issue and suggest ways to fix it. However it's very hard to do this from code snippets alone. If you'd like some help, please create a small test case as a complete project, zip it, and post it here. That would enable us to understand what you're experiencing.

  • xjinxxjinx USMember

    Hi everyone,

    Sorry for the late reply... I was out of commission for awhile and was unable to work on this project :(. However, I finally started back up and even after all this time... I am still having issue. I have attached a zip and would love for anyone to tell me what I have done wrong :smile:

  • xjinxxjinx USMember

    For anyone that has a similar issue I found the issue. In the IOS package you need to add the var r = new XLabs.Forms.Controls.....

    If you do that, atleast in my case it works!!!

    [Register ("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
    public override bool FinishedLaunching (UIApplication app, NSDictionary options)
    {
    global::Xamarin.Forms.Forms.Init ();
    var r = new XLabs.Forms.Controls.GridViewRenderer();

            // Code for starting up the Xamarin Test Cloud Agent
            #if ENABLE_TEST_CLOUD
            Xamarin.Calabash.Start();
            #endif
    
            LoadApplication (new App ());
    
            return base.FinishedLaunching (app, options);
        }
    }
    
  • FaleyeBenjaminFaleyeBenjamin USMember

    Hello Joshu Hoy, thank goodness you finally got it to work. I need to also implement this same feature(load images into the xlabs's GridView. I was just going through your codes and i was wondering

    public class TestViewModel : ViewModel
    {
    private Category _cat;
    Can i see the contents of "ViewModel" thanks

  • xjinxxjinx USMember

    Hi Falleye,

    I would be happy too but I am using XLabs.Forms.Mvvm.ViewModel. Is there something that you are trying to specifically answer?

Sign In or Register to comment.