First you add a new class as a ViewModel like:
public class RoomViewModel : BaseViewModel { [here following code] }
If you don’t have BaseViewModel try to download from nuget Refractored.MvvmHelpers. Then in your class define an observable collection like
public ObservableCollection<RoomRecommandation> _roomSuggestionList = new ObservableCollection<RoomRecommandation>(); public ObservableCollection<RoomRecommandation> Recommendations { get { return _roomSuggestionList; } }
In your ContentPage add a listview like:
<ListView ItemsSource="{Binding Recommendations}"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <Grid Padding="10" RowSpacing="10" ColumnSpacing="10"> <Grid.RowDefinitions> <RowDefinition Height="" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <controls:CircleImage Grid.Column="0" BorderColor="#DDD3CB" BorderThickness="3" WidthRequest="66" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Aspect="AspectFill" Source="{Binding Image}" /> <Label Grid.Column="1" Text="{Binding Description}" VerticalOptions="Start" /> <Label Grid.Column="2" Text="{Binding Price, StringFormat='£{0}'" FontSize="Small" VerticalOptions="Start" /> </Grid> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView>
Then in your ContentPage code:
RoomViewModel vm = null; public RoomPage () { InitializeComponent (); LoadData(); } public void LoadData() { if (vm == null) { vm = new RoomViewModel(); BindingContext = vm; } }
Happy coding!