none
C# custom data binding for custom data class RRS feed

  • Question

  • I am using APIs for a messaging platform that return a json file. In the current version of my app, I can dynamically load the content from the deserialized json data. How can I do this for the Hub control, and the threelineitemtemplate(with the three lines and picture)

    For the three line item template objects, I am looking to load a members list, where the member class loads from json the information pulled from the server. The items I am looking to place in the ListItem are member.username, member.realname, and member.email. I would also like to set the image source of the hub item from the json as well, which is stored at member.profile.ImageY, where Y is the pixel size desired.

    How do I go about doing this for the ListViews Threelineitem template?


    Tuesday, April 8, 2014 1:01 AM

Answers

  • What specifically are you stuck on?

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Tuesday, April 8, 2014 7:43 PM
    Moderator

All replies

  • What specifically are you stuck on?

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Tuesday, April 8, 2014 7:43 PM
    Moderator
  • In the old version of my app. I loaded the json into a List, then bound a listbox to that list in code. With the new hub template, I cant seem to bind the properties I need to this list. 

    The triple line item requires bindings for Image Source, Title, Subtitle, and Description currently. 

     class MemberData
        {
            public class Profile
            {
                public string first_name { get; set; }
                public string last_name { get; set; }
                public string real_name { get; set; }
                public string email { get; set; }
                public string skype { get; set; }
                public string phone { get; set; }
                public string image_24 { get; set; }
                public string image_32 { get; set; }
                public string image_48 { get; set; }
                public string image_72 { get; set; }
                public string image_192 { get; set; }
            }
    
            public class Member
            {
                public string id { get; set; }
                public string name { get; set; }
                public bool deleted { get; set; }
                public string color { get; set; }
                public Profile profile { get; set; }
                public bool is_admin { get; set; }
                public bool is_owner { get; set; }
                public bool has_files { get; set; }
            }
    
            public class RootUser
            {
                public bool ok { get; set; }
                public List<Member> members { get; set; }
            }

    These are the classes for loading the users, and RootUser is the Class that is used to create the Json data

    I use the following code to create the group, then I link it in with the sample data class. This is not the ideal solution, and I have started removing the references to the SampleData bindings.

     try
                {
                    string responseBodyAsText;
    
    
                    HttpResponseMessage response = await new HttpClient().GetAsync("https://slack.com/api/users.list?token=xoxp-2262633625-2265224674-2266580545-07c578&pretty=1");
                    response.EnsureSuccessStatusCode();
    
                    responseBodyAsText = await response.Content.ReadAsStringAsync();
                    responseBodyAsText = responseBodyAsText.Replace("<br>", Environment.NewLine); // Insert new lines
                    MemberData.RootUser m = JsonConvert.DeserializeObject<MemberData.RootUser>(responseBodyAsText);
    
                    foreach (MemberData.Member x in m.members)
                    {
    
                        group = new SampleDataGroup(x.id, x.name, x.profile.real_name, x.profile.image_48, x.deleted.ToString());
                        Groups.Add(group);
                    }
    
            
                }
                catch (HttpRequestException hre)
                {
                    //StatusText.Text = hre.ToString();
                }
                catch (Exception ex)
                {
                    // For debugging
                    //StatusText.Text = ex.ToString();
                }

    I need to figure out how to bind the data properties to a new group, so that when members are loaded into it, it pulls the relevant properties.

    Tuesday, April 8, 2014 8:56 PM
  • <DataTemplate x:Key="StandardTripleLineItemTemplate">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
    
                    <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Height="99" Width="99" Grid.Column="0" HorizontalAlignment="Left">
                        <Image Source="{Binding ImagePath}" Stretch="Fill"  AutomationProperties.Name="{Binding Title}" Height="99" Width="99"/>
                    </Border>
                    <StackPanel Grid.Column="1" Margin="12,0,0,0">
                        <TextBlock Text="{Binding Title}" Style="{ThemeResource ListViewItemTextBlockStyle}"/>
                        <TextBlock Text="{Binding Subtitle}" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" />
                        <TextBlock Text="{Binding Description}" Style="{ThemeResource ListViewItemContentTextBlockStyle}"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>

    This is the xaml code for the Data template. I am trying to learn to set up a data set like the List(which is now an observable collection, to the data bindings for the xaml, so when the collection is populated, the screens show the correct view.

    I tried looking through the sampledataset code, but I am becoming more confused as I go through it. I can't see how the code is able to be bound to the xaml, and I can't seem to get my custom data to bind to the template

    I would like for the Image's Imagesource to be  bound to the Members collections Profile.image72 property, the Binding Title to be bound to the Members.name property, Binding subtitle to be members.real_name, and Description to be the Members.email.

    I would just like to know how to link a custom data set to the Data templates.


    Wednesday, April 9, 2014 1:59 AM
  • Do you mind posting a working sample to OneDrive, and sharing it here?

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Thursday, April 10, 2014 5:37 PM
    Moderator
  • Sorry, I never got a chance to reply with my project

    My Project files

    this is my project files with the custom classes. I need to bind the pages of the hub to the different classes(one for the members list and one for the channels list). Unfortunately this doesn't work. The onyl other working project I have is my old version, but it doesn't use a hub app, but instead uses a pair of long list selectors. This doesn't work very well and the UI is very poor.

    Wednesday, April 16, 2014 3:41 PM