Xamarin Forms ListView with more than one datatemplate

Question

In XamarinForms I have to develop a page which is displaying UserSettings. Therefore I created a SettingsPage which inherits from ContentPage. On this page I have a ListView which ItemSource is an ObservableCollection. All cells on this page must have an Label on the left side with an Entry underneath it. The right side of this Cell must display an Image or SwitchControl. That depends on the UserSetting it is displaying.

So far I created a SettingsPage and a custom Cell for the ItemTemplate of the ListView. In this code the needed Image is hardcoded, that also has to change in the future. What is the best way to achieve this? I am totally new to XamarinForms, so hints on the code so far are appreciated.

Thanks, HJS

public class SettingsPage : ContentPage
{
        public SettingsPage ()
        {
                var userSettings = DemoData.UserSettings ();
                var listView = new ListView { ItemsSource = userSettings };
                listView.ItemTemplate = new DataTemplate (typeof(UserCell));
                listView.RowHeight = 60;

                Content = listView;
        }
}

public class UserCell : ViewCell
{
        public UserCell ()
        {
                var titleLabel = new Label ();
                var titleBinding = new Binding ("Name");
                titleLabel.SetBinding (Label.TextProperty, titleBinding);

                var valueEntry = new Entry ();
                var valueBinding = new Binding ("Value");
                valueEntry.SetBinding (Entry.TextProperty, valueBinding);

                var accessoryImage = new Image ();
                accessoryImage.Source = "ic_action_new.png";

                var stackLayout = new StackLayout ();
                stackLayout.Children.Add (titleLabel);
                stackLayout.Children.Add (valueEntry);

                var grid = new Grid {

                        HorizontalOptions = LayoutOptions.StartAndExpand,
                        VerticalOptions = LayoutOptions.FillAndExpand,

                        ColumnDefinitions = {
                                new ColumnDefinition{ Width = 200 },
                                new ColumnDefinition{ Width = 50 }
                        }
                };

                grid.Children.Add (stackLayout, 0, 0);
                Grid.SetColumnSpan (stackLayout, 1);
                grid.Children.Add (accessoryImage, 1, 0);

                View = grid;
        }
}

dmunch dmunch · Accepted Answer · 2014-11-23T10:57:43

So actually I see two questions in there:

How to change the hardcoded picture
How to show either SwitchControl or Image

Both are answered by: Use data binding!

Just as you have created a binding for the property Text of Label an the property Text of Entry you can also create a binding for the property Source of Image. The type of the property in your view model would be of type string just as you assigned a string with the image's source hard-coded in your ViewCell.

And to either show a SwitchControl or an Image, you can also bind the property IsVisible which both Image and SwitchControl inherit from VisualElement. So you would basically instantiate both an Image and a SwitchControl and add them to your layout in ViewCell and bind their respective IsVisible property to two different boolean properties of your view model. This allows you to implement the logic to decide when one is shown or another in your view model, just the way it should be in MVVM.

Xamarin Forms ListView with more than one datatemplate

1 Answers