WPF [SOLVED]: Bind ILIST to XAML

WPF [SOLVED]: Bind ILIST to XAML

Home Forums Frameworks WPF WPF [SOLVED]: Bind ILIST to XAML

Tagged: , , , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #112558

    Cloudy Point
    Keymaster

    QuestionQuestion

    This is my first time to WPF and C#, and I am completely blank as of now. I did go through innumerable posts on stackoverflow and internet but couldn’t actually find a solution. Might be I must have come across a solution, but not able to exactly comprehend.

    Problem:
    I got data from api using HttpClient. I deserialized that data successfully and I am able to bind it up on front-end (XAML), but the issue is it is an IList and I am able to only display 1 row from the list. I want to iterate over that list and take out individual data.

    public class FacultyViewModel
        {
            public Faculty faculty = new Faculty();
            IList<Faculty> person;
            public FacultyViewModel()
            {
                string jsonResponse = WebService.getData(Faculty.url);
                JObject o = JObject.Parse(jsonResponse);
                JArray a = (JArray)o["faculty"];
                person =  a.ToObject<IList<Faculty>>();
            }
            public IList<Faculty> List
            {
                get
                {
                    return person;
                }
            }
        }
    

    JSON DATA looks like this:

     "faculty": [
            {
                "username": "blah",
                "name": "Some name",
                "tagline": "",
                "imagePath": "some image",
                "title": "Lecturer",
                "interestArea": "Some Interest",
                "office": "Some Office",
                "website": "",
                "phone": "Some number",
                "email": "email",
                "twitter": "",
                "facebook": ""
            },
            {
                "username": "abcd",
                "name": "EFG",
                "tagline": "",
                "imagePath": "image.jpg",
                "title": "Assistant Professor",
                "interestArea": "interests here",
                "office": "office",
                "website": "website",
                "phone": "phone",
                "email": "email",
                "twitter": "",
                "facebook": ""
            },{...}]
    

    Now the problem is when I simply return person[0].username it does return the username of faculty at 0 index. But I want to iterate over this list in my XAML front-end view. How can I? I did try itemscontrol and many things as I came across them, but failing to find a solution which works.

    I just want to iterate over this list at the front-end inside the XAML file. Iterate like this:

    for(i=0; i<person.length; i++)
    {
      display person[i].username
      display person[i].email and so on....
    }
    
          public IList<Faculty> List
          {
              get
              {
                 return person;
              }
          }
    

    #112559

    Cloudy Point
    Keymaster

    Accepted AnswerAnswer

    <Page.DataContext>
      <vm:FacultyViewModel x:Name="ViewModel" />
    </Page.DataContext>
    <!-- Master --> 
    <Grid>
      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="100" />
          <ColumnDefinition />
      </Grid.ColumnDefinitions>
    <ListView ItemSource="{Binding FacultyList}"  Grid.Column="0" 
         SelectedItem="{Binding SelectedFaculty, Mode=TwoWay}" >
       <ListView.ItemTemplate>
           <DataTemplate>
               <Grid>
                 <TextBlock Text="{Binding Name}" />
               </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
     </ListView>
    
     <!-- Details -->
     <Grid Grid.Column="1"
       <Grid.RowDefinitions>
         <RowDefinition />
         <RowDefinition />
         <RowDefinition />
         <RowDefinition />
       </Grid.RowDefinitions>
       <TextBlock Text="{Binding SelectedPerson.name}" />
       <TextBlock Text="{Binding SelectedPerson.username }" Grid.Row="1" />
       <TextBlock Text="{Binding SelectedPerson.title}" Grid.Row="2" />
    </Grid>
    

     //View Code-Behind
    public partial class FacultyViewModel : INotifyPropertyChanged
    {
         public event PropertyChangedEventHandler PropertyChanged;
    
    
         private Person _person;
         private List<Person> _facultyList;
    
         public FacultyViewModel(){
    
            InitializeComponents();
    
            DataContext = new FacultyViewModel();
    
            //list will not get renewed till you restart app
            //any additions to the list while running will not be shown.
            _facultyList = a.ToObject<List<Faculty>>();
         }
    
    
         // includes your other stuff here....
    
    
    
         //Selected a Faculty member from the listview.
         public Person SelectedPerson {
              get{ return _person;}
              set{ _person = value;
                   RaisePropertyChange(()=>SelectedPerson);
             }
         }
    
        // list to populate the listview
        public List<Person> FacultyList{
             get{ return _facultyList;}
        }
    
         public virtual void RaisePropertyChange([CallerMemberName] string propertyName = null){
            OnPropertyChanged(new PropertyChangedEventArgs(propertyName)));
         }
    
       public void RaisePropertyChange<TProperty>(Expression<Func<TProperty>> property){
            RaisePropertyChange(property.GetMemberInfo().Name);
       }
    
       protected void OnPropertyChanged(PropertyChangedEventArgs e){
          var handler = PropertyChanged;
          if(handler != null){
             handler(this,e);
          }
      }
    
    }
    

    Rough but gets the point to you about how to deal with collections and selections.

    Source: https://stackoverflow.com/questions/43992423/bind-ilist-to-xaml
    Author: mvermef
    Creative Commons License
    This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.