How to create a dynamic image control metro app

Question

I am trying to fetch information from an XML document that shows all of my xbox live friends information. What I want to do now is display there avatar in a image control that is created dynamically but I am not sure on how I could actually have that image show up on my app grid.

So far I have tried this to create a dynamic control using the gamertag and adding my custom text to it. This is the code so far:

        string gamertag, avatarURL;
        foreach (XElement elm in doc.Descendants().Elements("Friends"))
        {

            gamertag = elm.Element("Gamertag").Value;
            avatarURL = elm.Element("AvatarLarge").Value;

            Image friendimage = new Image();
            friendimage.Name = gamertag.ToString() + "ImageControl";

            BitmapImage AccountPicbitmap = new BitmapImage();
            AccountPicbitmap.UriSource = new Uri(avatarURL);

            friendimage.Source = AccountPicbitmap;
            //Some code to display this control with the avatar image using the URL retrieved, I want to play these tiles side by side

        }

Any suggestions on how I could do this? Thanks in advance!

UPDATE: I have added this control to my XAML and but I am getting some weird exceptions now: System.Runtime.Remoting.RemotingException [7756] Designer process terminated unexpectedly!

<ItemsControl HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="1249" Margin="55,484,0,0" ItemsSource="{Binding}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding avatarURL}" Name="{Binding GamerTag}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>

</ItemsControl>

Now when I debug the app it goes into an infinite loop and throws an exception as well on Initialization

public MainPage()
    {
        this.InitializeComponent();
    }

Why are you not doing this in xaml? It is _far_ easier to do something like this in xaml. — N_A, Oct 07 '12 at 16:18
Well I have a xaml design but this is the code behind, how would I do it with xaml? — nGX, Oct 07 '12 at 20:14

N_A · Answer 1 · 2012-10-11T20:15:51.360

This would be easier to do in xaml something like this:

First, set the DataContext of your page to your viewmodel. Then create a property that exposes your collection of friends as a collection of objects which expose GamerTag and avatarURL. Use the following xaml to display this collection:

<ItemsControl ItemsSource="{Binding}">
    <ItemsControl.DataTemplate>
        <DataTemplate>
            <Image Source="{Binding avatarURL}" Name="{Binding GamerTag}"/>
        </DataTempate>
    </ItemsControlDataTempalte>
</ItemsControl>

Code behind should be something like this:

public class yourCodeThatGetsYourFriends : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public void GetFriends()
    {
        //get friends and put into friend objects defined below
        //create an ObservableCollection of them and assign it to the Friends (make sure its 'Friends' not 'friends") property
    }
    public ObservableCollection<friend> friends;
    public ObservableCollection<friend> Friends;
    {
        get
        {
            return friends;
        }
        set
        {
            friends = value;
            NotifyPropertyChanged("Friends");
        }
    }        

    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

}

public class friend : INotifyPropertyChanged
{        
    public event PropertyChangedEventHandler PropertyChanged;

    string url;
    public string avatarURL
    {
        get
        {
            return url;
        }
        set
        {
            url = value;
            NotifyPropertyChanaged("avatarURL");
        }
    }
    string tag;
    public string GamerTag
    {
        get
        {
            return tag;
        }
        set
        {
            tag= value;
            NotifyPropertyChanaged("GamerTag");
        }
    }

    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

}

Check out the original question with the code I'v added. I could not find the same controls you had mentioned so I used what I thought would be best which is ItemsControl — nGX, Oct 11 '12 at 19:43
i think whats mydogisbox try to explain is that you need to 1)create a class with some properties, like GamerTag, avatarURL, etc. 2) Parse the XML and fill your class with the data parsed. 3) In code yet, set the DataContext with the instance of tha class you just created. — Ewerton, Oct 11 '12 at 19:49
Are you an ASP.NET developer? Is common asp.net developer try to FindControl in code behind when they are initiating wpf learning. In WPF the rule is: Let for xaml the design tasks, in code-behind you must (in preference) do business code. — Ewerton, Oct 11 '12 at 19:52
There are better ways of doing it, but I just gave a basic viewmodel example. — N_A, Oct 11 '12 at 20:16

How to create a dynamic image control metro app

1 Answers1