Xamarin & MvvmCross Handbook
  • Introduction
  • Using MvvmCross to create your first Xamarin App
    • Creating the Core project
      • Understanding MVVM
      • Adding a simple Service
      • Adding a ViewModel
      • Adding an App class
    • Creating the Android project
      • Adding an Android Application class
      • Adding the Android Layout View (AXML)
      • Understanding the data-binding syntax
      • Adding the View class
    • Creating the iOS project
      • Updating the AppDelegate class
      • Adding the iOS View for the first ViewModel
      • Understanding the data-binding syntax
    • Creating the UWP project
      • Updating the App.xaml.cs and the App.xaml
      • Adding the UWP View
      • Understanding the data-binding syntax
    • Creating the REST API Service
      • Creating the models
      • Creating the interface and the implementation for the PostService
      • Creating the ViewModel
      • Adding the View for the Android project
      • Adding the View for the iOS project
      • Adding the View for the UWP project
    • Navigation
      • Creating the PostDetail View & ViewModel
      • Command with the parameter
      • Retrieving the param from the previous ViewModel
      • Understanding the IMvxNavigationService
      • Responding the events from different controls in the ListView
      • Retrieving the return result from the previous ViewModel
    • Creating the Xamarin.Forms project
      • Creating the Forms.UI project
      • Adding the App.xaml and the App.xaml.cs
      • Adding the View
      • Creating the Android project
      • Creating the iOS project
      • Creating the UWP project
      • Summary For Forms
    • Summary
  • Implementing MasterDetail layout in Xamarin.Forms by MvvmCross
    • Introduction
    • Creating the project by MvxScaffolding
    • Creating the MasterDetailPage
      • Creating the ViewModel
      • Creating the XAML file
    • Creating the MasterPage
      • Creating the ViewModel
      • Creating the XAML file
    • Creating the DetailPages
      • Creating the ViewModels
      • Creating the XAML files
    • Implementing the Menu functionalities
      • Displaying the MasterPage and the DetailPage
      • Setting the menu navigation
      • The other approaches to set the data-binding
    • Fine-tuning the UI
      • Adding the hamburger icon for iOS
      • Adding the header bar for Android and iOS
      • Adjust the height of the item for UWP
    • Summary
Powered by GitBook
On this page

Was this helpful?

  1. Using MvvmCross to create your first Xamarin App
  2. Creating the REST API Service

Adding the View for the iOS project

PreviousAdding the View for the Android projectNextAdding the View for the UWP project

Last updated 6 years ago

Was this helpful?

Create a new blank Storyboard and name it as PostList.storyboard in the Views folder of the MvvmCrossDemo.iOS project, , and drag a Button to the page from the Toolbox:

Set the Name of the Button as btnNavToPostList. Then update the FirstView.cs in Views folder to bind the command to the Button by adding the code below into the ViewDidLoad method:

set.Bind(btnNavToPostList).To(vm => vm.NavToPostListAsyncCommand);

In the native iOS development, you can define a transition called segue to navigate from view A to view B in one storyboard but for MvvmCross, we need to unify the navigation pattern for all the platforms. So I recommend that it is better to use a one-ViewController-per-storyboard approach if you are using storyboards in MvvmCross.

Create a new Blank Storyboard and name it as PostListView.storyboard in the Views folder of the MvvmCrossDemo.iOS project. Drag a Table View Controller from the Toolbox and place it on the PostListView.Storyboard. Click the bottom bar of it and set the Class property and the Storyboard ID property to PostListView. Do not forget to select the Use Storyboard ID checkbox. Then the PostListView.cs and the PostListView.designer.cs will be automatically generated. Move them to the Views folder and update their namespace to MvvmCrossDemo.iOS.Views. Change the parent class of it, as shown below:

    [MvxFromStoryboard("PostListView")]
    public partial class PostListView : MvxTableViewController<PostListViewModel>
    {
        public PostListView (IntPtr handle) : base (handle)
        {
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            var source = new MvxStandardTableViewSource(TableView, 
                UITableViewCellStyle.Subtitle, 
                new NSString("PostItemViewCell"), "TitleText Post.Title; DetailText Post.Body");
            TableView.Source = source;

            var set = this.CreateBindingSet<PostListView, PostListViewModel>();
            set.Bind(source).To(vm => vm.PostList);
            set.Apply();
            TableView.ReloadData();
        }
}

MvxTableViewController is another build-in ViewController to present a standard iPhone table. In this view controller, we created a MvxStandardTableViewSource and bind it to the TableView in the TableViewController. The Table in iOS has four built-in cell styles which support the most common data displays. Here we use Subtitle. You can bind the TitleText and DetailText of the item in the list. At last, use this code to reload data:

TableView.ReloadData();

We can extend the MvxTableViewSource class to customize the cell styles. For more details, please read this article: . The result is:

https://www.mvvmcross.com/documentation/platform/ios/ios-tables-and-cells