WP8.1 - UserControl Textbox + image, not showing data

Question

I'm most probably missing something obvious as I'm new to WPF development. I'm trying to create a Windows Phone 8.1 application and for my use I want to create a custom user control that contains hero information and hero icon (simple game-related information lookup app).

I have created a usercontrol with name HeroInformationControl and then defined an image and textblock in XAML. Looking up through various resources online I created it as follows:

<UserControl Name="HeroInformationControl"
    x:Class="DotaHelper.HeroInformation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:DotaHelper"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="50"
    d:DesignWidth="400">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"></ColumnDefinition>
        <ColumnDefinition Width="3*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Image           
        HorizontalAlignment="Left" 
        Height="Auto"
        Stretch="Fill"
        VerticalAlignment="Top"
        Width="Auto" Source="{Binding ElementName=HeroInformationControl, Path=HeroImage}"
        />
    <TextBlock             
        Grid.ColumnSpan="2" 
        HorizontalAlignment="Center"
        Height="50"
        Grid.Column="1"
        TextWrapping="Wrap"
        Text="{Binding ElementName=HeroInformationControl, Path=HeroName}"
        VerticalAlignment="Center"
        Width="300"/>

Then, HeroInformation.xaml.cs:

public partial class HeroInformation
{
    public HeroInformation()
    {
        this.InitializeComponent();
        this.DataContext = this;
    }

    public static readonly DependencyProperty HeroNameProperty =
          DependencyProperty.Register("HeroName", typeof(string), typeof(string), new PropertyMetadata(""));

    public string HeroName
    {
        get { return (string)GetValue(HeroNameProperty); }
        set { SetValue(HeroNameProperty, value); }
    }

    public static readonly DependencyProperty HeroImageProperty =
         DependencyProperty.Register("HeroImage", typeof(string), typeof(string), new PropertyMetadata(""));

    public string HeroImage
    {
        get { return (string)GetValue(HeroImageProperty); }
        set { SetValue(HeroImageProperty, value); }
    }
}

MainPage.xaml, HeroInformation object:

            <local:HeroInformation
                x:Name="HeroInformation1"
                HorizontalAlignment="Left"
                Height="Auto"
                VerticalAlignment="Top" 
                Width="200"
                />

And from the UI thread in MainPage.xaml.cs:

            HeroInformation1.HeroImage = hero.IMGurl;
            HeroInformation1.HeroName = hero.Heroname;

Sorry for a long code but I have virtually no idea where the problem is. As a note: hero.IMGUrl and hero.Heroname properties are both of string. Also if I add to Mainpage.xaml properties by hand (HeroImage and HeroName) it loads.

Any help to understand what's wrong would be appreciated - also, if you spot something that is far from best programming practice I'd be grateful for tips.

Answer 1

Never. Ever. Ever. Do this:

this.DataContext = this;

Instead, give your UserControl an x:Name in your XAML file. Like this:

<UserControl x:Name="usr" ... >

This will allow you to bind to your Dependency Properties using the following binding:

Text="{Binding DataContext.HeroName, ElementName=usr}"

Alternatively, you can bind the UserControl to itself using the following:

DataContext="{Binding RelativeSource={RelativeSource Self}}"

And your binding will look like this:

Text="{Binding HeroName}"

EDIT: Also, as Juan has noticed, your Dependency Property declarations are incorrect:

public string HeroName
    {
        get { return (string)GetValue(HeroNameProperty); }
        set { SetValue(HeroNameProperty, value); }
    }

    // Using a DependencyProperty as the backing store for HeroName.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty HeroNameProperty =
        DependencyProperty.Register("HeroName", typeof(string), typeof(HeroInformation), new PropertyMetadata(null));

Pro-tip: Use propdp -> Tab -> Tab to declare a dependency property.

Answer 2

the only thing you missed was:

public static readonly DependencyProperty HeroNameProperty =
      DependencyProperty.Register("HeroName", typeof(string), typeof(HeroInformation), new PropertyMetadata(""));

typeof(HeroInformation)

the rest is perfect and the way to do it. Might be the image give some issue (I cannot remember in all platforms (WPF,WP, UWP) if it is right use String for URI.