Intersoft Community - Crosslight - Crosslight ViewModelBase and List Tables

Crosslight ViewModelBase and List Tables

yudi — Tue, 16 Sep 2014 04:09:20 GMT

I'm having a problem with AddViewModelBinding, its not finding the refrence. I changed it to AddBinding but it doesn't do anything.

I suggest you to download and apply Crosslight 2 Update 4. For your information, I'm using Crosslight 2 Update 4 in my end and the unable to find reference problem is not persist.

So I have to hardcode the entire top part? Is there anyway I can make each portion in XIB & XAML and have it load as the header?

I managed to create a sample where the content of TableHeaderView is loaded from XIB file. However, I have layout problem where the TableHeaderView overlaps the TableView.

I will get back to you as soon as I have a solution for this.

Edited on September 16, 2014 06:15 AM
Reason: update solution to load table header from XIB

Please follow the step-by-step below in order to create view (XIB file) and use it as HeaderViewTemplate.

Section 1: Create MyHeader.xib

Add an iPhone Table View Cell and named it as MyHeader in the Views folder of the iOS project.
In Xcode Interface Builder, add a Round Style Text Field; a Label; and a Button control so that the layout will look like below.
Set the outlet of the button and text.
Set Row Height to 50.
Open MyHeader.cs file and set MyHeader class to inherits from UIView.

Section 2: To use MyHeader as HeaderViewTemplate

Open ItemListViewController.cs file.

Override HeaderViewTemplate and add following code.

public override UIViewTemplate HeaderViewTemplate
{
	get { return new UIViewTemplate(MyHeader.Nib); }
}

Save all changes.
The final layout should look like:

Crosslight ViewModelBase and List Tables

devincroud — Mon, 15 Sep 2014 23:15:29 GMT

I'm having a problem with AddViewModelBinding, its not finding the refrence. I changed it to AddBinding but it doesn't do anything.

So I have to hardcode the entire top part? Is there anyway I can make each portion in XIB & XAML and have it load as the header?

Crosslight ViewModelBase and List Tables

yudi — Mon, 15 Sep 2014 09:36:03 GMT

Thank you very much for the attached picture. It really helps to figure out the layout to be achieved.

...Do you have a sample of how I can display my form and a tableview inside the form at the bottom?

UITableView has TableHeaderView property. We can set that to whatever view for your required scenario.

I created a project using Master Detail project template; named it to ViewModelBaseAndListTables; and do the following:

Override ViewDidLoad;
Programmatically create UIView;
Set the created UIView as TableHeaderView property.

Following snippet code shows how to add a text in TableHeaderView.

public override void ViewDidLoad()
{
    base.ViewDidLoad();

    UIView view = new UIView(new RectangleF(0, 0, 100, 60));
            
    UILabel label=new UILabel(new RectangleF(10, 10, 80, 40));
    label.Text = "Add your custom form here";
    label.AdjustsFontSizeToFitWidth = true;
            
    view.Add(label);

    this.TableView.TableHeaderView = view;
}

...how I can add buttons to a TableView cell?

ItemCell.xib is added into iOS project of ViewModelBaseAndListTables. Please ensure that Use Autolayout is disabeled; and Row Height is set to 50 in Interface Builder.

In the ViewModel, a DelegateCommand called TestCommand, is added. This command will be bind to the button so that when user click, it will show a ToastPresenter with item.Name information.

Changes in ViewModel.cs

public DelegateCommand TestCommand {get;set;}

public ItemListViewModel()
{
    // source items, should be plain items, not sorted or filtered
    this.SourceItems = this.Repository.GetAll().ToObservable();

    // set group items
    this.RefreshGroupItems();

    // commands
    this.NavigateGroupCommand = new DelegateCommand(ExecuteNavigateGroup);
    this.MarkSoldCommand = new DelegateCommand(ExecuteMarkSold, CanExecuteMarkSold);
    this.TestCommand = new DelegateCommand(ExecuteTest);
}

private void ExecuteTest(object obj)
{
    Item item = obj as Item;
    if (item != null)
        this.ToastPresenter.Show(item.Name);
}

Last, modify ItemListBindingProvider.cs and add following codes in the contructor:

itemBinding.AddBinding("Text1", BindableProperties.TextProperty, "Name");
itemBinding.AddViewModelBinding("TestButton", BindableProperties.CommandProperty, "TestCommand");
itemBinding.AddBinding("TestButton", BindableProperties.CommandParameterProperty, ".");

A simple sample is uploaded in here. Please have the sample evaluated on your and let us know whether it helps or not.

Crosslight ViewModelBase and List Tables

devincroud — Wed, 10 Sep 2014 05:13:31 GMT

Maybe I didn't explain what I'm trying to do correctly... Look at the picture I have attached

The top part of the view has a banner image with a button, and the bottom has the listview/tableview. I've done this in iOS many times.

Crosslight ViewModelBase and List Tables

yudi — Tue, 09 Sep 2014 23:50:36 GMT

... I don't want to have just a full screen TableView, I need it to be mixed. Do you have a sample of how I can display my form and a tableview inside the form at the bottom?

Basically, you shouldn’t mix TableView and a Form. That pattern is not accordant with iOS & Android design pattern. For more detail information, please check the Understanding Crosslight Navigation Patterns in here.

A standard navigation typically consists of four types of navigation patterns, namely Push Navigation, List Navigation, Modal Navigation and Nested Modal Navigation. For further information, you could follow this link.

...how I can add buttons to a TableView cell. I need 2 texts, and three buttons. I found ItemBindingDescription but this only allows the ability to display text and an image.

I forward this to Crosslight development team to be discussed further. I'll get back to you as soon as I heard any news from the team regarding this.

Crosslight ViewModelBase and List Tables

devincroud — Thu, 04 Sep 2014 23:01:52 GMT

I have created a ViewModel that needs to has top portion with buttons and pictures. I then need to display the TableView below. From the samples and reading the docs I can't figure out how to have both. I don't want to have just a full screen TableView, I need it to be mixed. Do you have a sample of how I can display my form and a tableview inside the form at the bottom?

I also don't see how I can add buttons to a TableView cell. I need 2 texts, and three buttons. I found ItemBindingDescription but this only allows the ability to display text and an image.