CODEWITHSUNDEEP
c#xamlxamarindata-bindingxamarin.forms
Steve
Steve

Reputation: 819

Xamarin Databinding and Updating the UI

Hi i'm struggling to get the UI to update when a model changes in Xamarin Forms.

I've got a few pages but for simplicity - a ProfilePage which shows the current profile and an Edit Profile Page which has a List containing the profile attributes which when clicked can be edited.

I thought it would be a case of binding the page and controls to a model and then when that model is changed, the UI should reflect that, but it doesn't seem to be the case.

The issue I am having is the UI is not being updated automatically when I make a change to the model. I need to refresh or re-load, so as a workaround I have put the loading code in the OnAppearing method of the page, which clearly isn't correct.

I've got a Profile Class:

public class Profile
{
   public string Name {get; set;}
   public string About {get; set;} 
}

ProfilePage CodeBehind

protected override void OnAppearing()
{
    var p = await getGetDataFromWebservice;
    BindingContext = p;
}

public async void EditPage
{
  EditProfilePage editProfilePage = new EditProfilePage();
  editProfilePage.BindingContext = p;
  Navigation.PushAsync(editProfilePage)
 }

ProfilePage XAML

<Label Text="{Binding Name, }"></Label>
<Label Text="{Binding About, }"></Label>

For my Edit Profile Page, I wasn't sure how to get the profile attributes into a list, so I created a new class to hold this and populated this based on the Profile Items

ProfileItem:

public class ProfileItem
{
   public string Name {get;set;}
   public string Value {get;set;}
}

EditProfilePage CodeBehind:

ObservableCollection<ProfileItem> items = new ObservableCollection<ProfileItem>()

protected override void OnAppearing()
{
   p = (Profile)BindingContext;
   items.clear();
   items.Add( (new ProfileItem {Name = "Name", Value=p.Name.ToString() }));
   items.Add( (new ProfileItem {Name = "About", Value = p.About.ToString() }))

    list_Profile_Details.ItemsSource = items;

}

EditProfile XAML:

<ListView x:Name="list_Profile_Details" HeightRequest="500" RowHeight="45">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Name, Mode=TwoWay}"  Detail="{Binding Value, }"   />

                </DataTemplate>
            </ListView.ItemTemplate>
    </ListView>

These seems to reflect the updates, but it isn't the correct way to do so, and would appreciate some pointers.

Thanks.

Upvotes: 0

Views: 1939

Answers (1)

Almir Vuk
Almir Vuk

Reputation: 3173

Solution for your "issue" is to take a look at MVVM pattern. For beginning I will recommend you to take a look at official documentation for "MVVM with Xamarin.Forms", you can find it here and here.

After reading these docs that, you will see that there is a better way to do MVVM and data binding in Xamarin.Forms projects, and first step is to separate logic of your data binding from your code-behind class and to include usage of ViewModels in your project.

Best way to update your UI when the state of your model is changed by using INotifyPropertyChanged interface and PropertyChangedEventHandler implementations.

I have couple of blog posts and code examples about MVVM and XF on my blog here, one of my blog posts about simple mvvm is here.

Also there are couple of great MVVM Frameworks for Xamarin.Forms that you might want to see later on when you master "plain" MVVM.

Upvotes: 2

Related Questions