Best way to bind multiple properties to controls like Labels using MVVM

N_BauaN_Baua INMember ✭✭✭✭✭

Hi Guys,
This is kind of silly question may be, however this is puzzling to I guess everyone - every time.

I have a Viewmodel interacting with a service and pulling the information of a individual person's profile with around 30 properties.
I want to display this information in a non-interactive view (so far I assume 2-3 properties will be required to be editable in future)

I do not want to use the ListView with the custom item template (having 2 labels or something) and bind the data as key value pair because of 2 reasons.

  1. I wanted specific related properties (like Date of Birth and Gender) in one group or section and other specific properties like Education and University or such properties in other section, to be displayed (with section headers) to the end-user.
  2. Second reason is I want to use the model properties directly , not to convert them as key-value pair or hash-table like stuff before binding them to view elements.

My current implementation is (which is crude BTW, I would say, however works well)
is having all the labels laid on a flat view and bind the individual model properties to the label like

in ViewModel
private string _Full_Name;
public string Full_Name
{
get { return _Full_Name; }
set { SetProperty(ref _Full_Name, value); }
}
...... List goes on and on for like 30 properties

and in View I've displayed the values via a grid structure and label.

<Label Text="{Binding Full_Name}" Grid.Row="0" Grid.Column="1" />

However this seems too raw, I mean can we have some better way populate the labels dynamically.

(I thought of having a Binding Context at ContentPage level with ObservableCollection and creating/binding the label dynamically initially, however seems little tight spot with MVVM right now) - I welcome ideas on this path... :)

Can you guys please suggest any better approach?

Thanks,
N Baua

Best Answer

  • N_BauaN_Baua IN ✭✭✭✭✭
    Accepted Answer

    Currently, I have a working view with individual label controls as shown below, the purpose of putting this query afloat is to automate the things if possible. Just have a look at the below screen shot.

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    I wanted specific related properties (like Date of Birth and Gender) in one group or section and other specific properties like Education and University or such properties in other section, to be displayed (with section headers) to the end-user.

    These are two different objects and should not be blanket properties on a vague ViewModel.

    Date of birth and gender are properties of a person. In your example probably a Student object.
    I would add a 'SelectedStudent` property to the ViewModel for that.

    SelectedStudent.DateOFBirth is one property
    SelectedStudent.Gender is another

    Then probably a List<EducationItem> EducationCollection for their education history.
    An EducationItem probably consists of FromDate, ToDate, SchoolID... List<Course> and so on.

    You just need to see all the real-world objects and their sub-objects then mimic them in classes for your program.

    Tutorial on OOP
    My series on Xamarin, binding and so on.

  • N_BauaN_Baua INMember ✭✭✭✭✭

    Yeah Clint, what you suggest is fair
    I know how the Model properties work, The OOP am aware how it will work in situations like this.
    I just do not want to write individual controls for each property, may be what I want is some bind-able control like ListView but with some logic like attached properties.

    Lets take an example

    Assume, I have a Model class as under
    class Person{
    //5 Properties listing personal details
    }
    class EducatedPerson:Person{
    // 3 more Properties listing educational details
    }
    class EducatedEmployedPerson:EducatedPerson{
    // 2 more Properties listing occupational details
    }

    Now my service returns me the object of EducatedEmployedPerson with all the 10 properties and respective values.

    I want the ViewModel to have some mechanism to bind dynamically to label controls and have groups created for each personal,educational and occupational properties as separate section, based on property identifier or some group logic.

    Now that is something I want to achieve, can you please suggest?

    Thanks

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    I just do not want to write individual controls for each property

    I don't understand. Why would you have to build controls just so you can bind properties?
    Or are you saying you don't want to have to add a Label for gender, a label for Age and so on? You want some magic mechanism to automatically add a bunch of labels that are all of the same 'catagory' ?

    I want is some bind-able control like ListView

    Why not just use a ListView then? One ListView shows the educational experience. Another shows the Work history etc.
    Or google "Xamarin Wrap Layout". There are many open source implimentations of a Wrap layout that might work. I use one on a video library app that shows the movie poster, title, rating in a auto-wrapping form. Basically the same thing as the WPF WrapPanel.

  • N_BauaN_Baua INMember ✭✭✭✭✭

    @ClintStLaurent ,

    > You want some magic mechanism to automatically add a bunch of labels that are all of the same 'catagory' ?

    BIG YES If possible. :)

    Why not use ListView.
    The possible reasons to this is...

    Reason 1. The data is for a single Person not the List
    Reason 2. The data is of various data types like string, int and DateTime. (Using DictionaryEntry or HashTable or any Key Value pair would serve the purpose, however, grouping will not be possible in that case because the Keys and Values represent no Grouping criteria. For e.g.

    //Assume below as any DictionaryEntry or HashTable - not syntactically correct
    First_name-Key: "First Name Value",
    Last_Name_Key: "Last Name Value"

    I can not specify the grouping information for the above data (for ListView to be specific).

    Regards,
    N Baua

  • N_BauaN_Baua INMember ✭✭✭✭✭
    Accepted Answer

    Currently, I have a working view with individual label controls as shown below, the purpose of putting this query afloat is to automate the things if possible. Just have a look at the below screen shot.

  • thaufeethaufee Member ✭✭

    I know I am a bit late in answering this question but it may help for the future readers. Why don't we use FormattedText like below:

    <Label>
        <Label.FormattedText>
            <FormattedString>
                <Span Text="{Binding DesignationName}"/>
                <Span Text=", "/>
                <Span Text="{Binding DepartmentName}"/>
            </FormattedString>
        </Label.FormattedText>
    </Label>
    
Sign In or Register to comment.