MVVM <\/a>pattern is not used in view-to-view binding. So there is no need to create Model and ViewModel classes. Just connect View components together.<\/p>\n\n\n\nIn the example I will show now, we will connect the BoxView and the slider and observe the changes. Also, we will bind a Label to the slider and change the Text property according to the value of the slider.<\/p>\n\n\n\n
<?xml version="1.0" encoding="utf-8" ?>\n<ContentPage xmlns="http:\/\/xamarin.com\/schemas\/2014\/forms"\n xmlns:x="http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml"\n x:Class="Blog.Views.BasicDataBindingPage">\n <ContentPage.Content>\n <StackLayout>\n <Grid HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">\n <Grid.RowDefinitions>\n <RowDefinition Height="*" \/>\n <RowDefinition Height="Auto" \/>\n <RowDefinition Height="Auto" \/>\n <RowDefinition Height="Auto" \/>\n <RowDefinition Height="Auto" \/>\n <\/Grid.RowDefinitions>\n\n <Grid.ColumnDefinitions>\n <ColumnDefinition Width="*" \/>\n <ColumnDefinition Width="Auto" \/>\n <\/Grid.ColumnDefinitions>\n\n <BoxView x:Name="boxview"\n BackgroundColor="Gray"\n HeightRequest="200"\n HorizontalOptions="Center"\n VerticalOptions="CenterAndExpand" \/>\n <Slider x:Name="opacitySlider"\n Grid.Row="1" Grid.Column="0"\n Maximum="1"\n BindingContext="{x:Reference boxview}"\n Value="{Binding Opacity, Mode=TwoWay}"\n MaximumTrackColor="Gray"\n MinimumTrackColor="Gray"\/>\n <Label BindingContext="{x:Reference opacitySlider}"\n Text="{Binding Value, StringFormat='Scale = {0:F1}'}"\n Grid.Row="1" Grid.Column="1"\n VerticalTextAlignment="Center"\/>\n <Slider x:Name="rotationSlider"\n Grid.Row="2" Grid.Column="0"\n Maximum="360"\n BindingContext="{x:Reference boxview}"\n Value="{Binding Rotation, Mode=OneWayToSource}"\n MaximumTrackColor="Gray"\n MinimumTrackColor="Gray"\/>\n <Label BindingContext="{x:Reference rotationSlider}"\n Text="{Binding Value, StringFormat='Rotation = {0:F0}'}"\n Grid.Row="2" Grid.Column="1"\n VerticalTextAlignment="Center"\n \/>\n <\/Grid>\n <\/StackLayout>\n <\/ContentPage.Content>\n<\/ContentPage><\/code><\/pre>\n\n\n\nHere I binded BoxView’s x:Name<\/strong> value to Slider’s BindingContex value with x:Reference<\/strong>. I also binded the Slider’s Value property to the BoxView’s opacity. At the Label, I connected the Slider with x:Reference<\/strong> and print the value of the Text property with the StringFormat.<\/p>\n\n\n\nThe binding mode of the Slider view named opacitySlider is TwoWay. Because I wanted the value of the Opacity property to be set to 1 instead of 0. If the mode was set to OneWayToSource rather than TwoWay, the Opacity value would initially be 0. So BoxView wouldn’t appear.<\/p>\n\n\n\n
The screen output is as follows:<\/p>\n\n\n\n
View To View Data Binding<\/figcaption><\/figure><\/div>\n\n\n\nData Binding to ListView with ObservableCollection<\/h2>\n\n\n\n In the previous example, I binded one view to another view. Now I will show how to connect a ObservableCollection defined in ViewModel class to ListView. Binding data to the ListView will help you understand the Data Bindings topic better. You will often see the ListView structure in many applications anyway.<\/p>\n\n\n\n
In this example I will bind a ObservableCollection holding student information to the view. I need a Model and ViewModel class. Thus, I will apply the MVVM pattern to the project. Since the layers of the projects developed with the MVVM pattern are developed separately from each other, it fully applies the Seperation of Concers principle. That’s why you can see the MVVM architecture in many Xamarin.Forms projects.<\/p>\n\n\n\n
First add a Model <\/strong>folder to the project. Then create a class within this folder called Student. Create Number, Name, Surname variables in this class.<\/p>\n\n\n\n public class Student\n {\n public int Number { get; set; }\n public string Name { get; set; }\n public string Surname { get; set; }\n }<\/code><\/pre>\n\n\n\nNow add a folder named ViewModel <\/strong>to the project and create a class named StudentViewModel in this folder. In the MVVM pattern, ViewModel provides the bind between View and Model. In this class, create an ObservableCollection collection where data is processed as follows.<\/p>\n\n\n\n public class StudentViewModel\n {\n private ObservableCollection<Student> studentList;\n public ObservableCollection<Student> StudentList\n {\n get { return studentList; }\n set\n {\n studentList = value;\n }\n }\n public StudentViewModel()\n {\n StudentList=GetStudents();\n }\n private ObservableCollection<Student> GetStudents()\n {\n return new ObservableCollection<Student>\n {\n new Student{Number=1, Name="Alex",Surname="Doe"},\n new Student{Number=2, Name="Susan",Surname="Cox"},\n new Student{Number=3, Name="Natalia",Surname="Weston"},\n new Student{Number=4, Name="David",Surname="Hahn"}\n };\n }\n }<\/code><\/pre>\n\n\n\nFinally, add a folder named View <\/strong>to the project and create a ContentPage named StudentPage within that folder. Then declare ContenPage’s BindingContext as below.<\/p>\n\n\n\n <ContentPage.BindingContext>\n <bc:StudentViewModel\/>\n <\/ContentPage.BindingContext>\n <ContentPage.Content>\n <StackLayout>\n <ListView ItemsSource="{Binding StudentList}">\n <ListView.ItemTemplate>\n <DataTemplate>\n <ViewCell>\n <StackLayout Orientation="Horizontal">\n <Label Text="{Binding Number}" FontSize="20" FontAttributes="Bold" TextColor="Gray" \/>\n <Label Text="{Binding Name}" FontSize="20" \/>\n <Label Text="{Binding Surname}" FontSize="20" \/>\n <\/StackLayout>\n <\/ViewCell>\n <\/DataTemplate>\n <\/ListView.ItemTemplate>\n <\/ListView>\n <\/StackLayout>\n <\/ContentPage.Content>\n<\/ContentPage><\/code><\/pre>\n\n\n\nHere I binded StudentList’s to ListView’s ItemSource property. Thus, I declare that the source of ListView is the ObservableCollection collection named StudentList of the ViewModel class. In addition, I make the Text properties of the Labels in the ViewCell appear in the ListView by binding the StudentList’s properties.<\/p>\n\n\n\n
Our screen output will look like this:<\/p>\n\n\n\n
Data Binding to ListView with ObservableCollection<\/figcaption><\/figure><\/div>\n\n\n\nData Binding Command<\/h2>\n\n\n\n In Xamarin.Forms applications, we want to interact with view components such as button, ImageView. It is possible to interact with the Clicked handler of views on the code side of the XAML file. However, since there is no Clicked handler in the MVVM model, interactions are provided with the Command interface.<\/p>\n\n\n\n
I want to interact with my StudentList example above through the Command interface and delete the last element in the list. For this, first inherit the ViewModel class from the INotifyPropertyChanged interface. Then implement this interface.<\/p>\n\n\n\n
public class StudentViewModel : INotifyPropertyChanged\n {\n public event PropertyChangedEventHandler PropertyChanged;\n protected void OnPropertyChanged(string propertyName)\n {\n PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));\n }\n private ObservableCollection<Student> studentList;\n public ObservableCollection<Student> StudentList\n {\n get { return studentList; }\n set\n {\n studentList = value;\n OnPropertyChanged("Student");\n }\n }\n public StudentViewModel()\n {\n StudentList = GetStudents();\n }\n private ObservableCollection<Student> GetStudents()\n {\n return new ObservableCollection<Student>\n {\n new Student{Number=1, Name="Alex",Surname="Doe"},\n new Student{Number=2, Name="Susan",Surname="Cox"},\n new Student{Number=3, Name="Natalia",Surname="Weston"},\n new Student{Number=4, Name="David",Surname="Hahn"}\n };\n }\n public ICommand DeleteCommand => new Command(Delete);\n private async void Delete()\n {\n StudentList.RemoveAt(StudentList.Count-1);\n }\n }<\/code><\/pre>\n\n\n\nWith the OnPropertyChanged (“Student”) method, I notify the view when there is a change in StudentList. Thus, when an element is deleted, the ListView component is updated.<\/p>\n\n\n\n
Also notice how I use Command. I use the ICommand interface to add a command to the ViewModel and define the command method as above. Now let’s see how I binded this command to View.<\/p>\n\n\n\n
<ContentPage.BindingContext>\n <bc:StudentViewModel\/>\n <\/ContentPage.BindingContext>\n <ContentPage.Content>\n <StackLayout>\n <ListView ItemsSource="{Binding StudentList}">\n <ListView.ItemTemplate>\n <DataTemplate>\n <ViewCell>\n <StackLayout Orientation="Horizontal">\n <Label Text="{Binding Number}" FontSize="20" FontAttributes="Bold" TextColor="Gray" \/>\n <Label Text="{Binding Name}" FontSize="20" \/>\n <Label Text="{Binding Surname}" FontSize="20" \/>\n <\/StackLayout>\n <\/ViewCell>\n <\/DataTemplate>\n <\/ListView.ItemTemplate>\n <\/ListView>\n <Button Text="DELETE LAST ITEM" Command="{Binding DeleteCommand}"\/>\n <\/StackLayout>\n <\/ContentPage.Content><\/code><\/pre>\n\n\n\nI added a Button after ListView and connected the Command property with DeleteCommand in ViewModel. That is all. Now, every time we click the button, the last element of StudentList will be deleted and the ListView will be updated.<\/p>\n\n\n\n
Our screen output will look like this:<\/p>\n\n\n\n
Data Binding Command<\/figcaption><\/figure><\/div>\n\n\n\nConclusion<\/h2>\n\n\n\n To sum up, Data Bindings binds source and target objects. In Xamarin.Forms applications, we use it to bind views or to bind views to ViewModel. When an application interacts with the user, it offers a better experience.<\/p>\n\n\n\n
In this article, I explained Data Contexts, binding modes, connecting View and ViewModel, and Command with examples. And also, to better understand this topic, you should understand the MVVM pattern well. I hope it was useful.<\/p>\n\n\n\n
If you\u2019re still not sure what to do, or if you got any errors, then I suggest you use the comment section below and let me know! I am here to help!<\/p>\n\n\n\n
Also, share this blog post on social media and help more people learn.<\/strong><\/p>\n\n\n\n
![\"Data](\"https:\/\/serkanseker.com\/wp-content\/uploads\/2020\/11\/Data-Binding-Diagram.jpg\")
![\"Data](\"https:\/\/serkanseker.com\/wp-content\/uploads\/2020\/11\/Data-Binding-Dataflow.jpg\")
![\"View](\"https:\/\/serkanseker.com\/wp-content\/uploads\/2020\/11\/View-To-View-Data-Binding.gif\")
![\"Data](\"https:\/\/serkanseker.com\/wp-content\/uploads\/2020\/11\/Data-Binding-to-ListView-with-ObservableCollection-473x1024.jpg\")
![\"Data](\"https:\/\/serkanseker.com\/wp-content\/uploads\/2020\/11\/Data-Binding-Command.gif\")