Binding BitmapImage UriSource

Question

I'm trying to develop my first Windows Store application. I'm using the Hub Application template. I want to display an Image from a Url in the first section of my HubPage:

<HubSection ... >
    <DataTemplate>
        <Grid ... >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                ...
            </Grid.RowDefinitions>

            <Image Name="UserProfileImage" Margin="100, 0, 100, 0" Grid.Row="0" VerticalAlignment="Top">
                <Image.Source>
                    <BitmapImage UriSource="{Binding ImageUrl}"></BitmapImage>
                </Image.Source>
            </Image>
        </Grid>
    </DataTemplate>
</HubSection>

And in my HubPage.xaml.cs:

[DefaultValue("http://images6.fanpop.com/image/photos/34200000/more-dumb-images-of-philip-j-fry-futurama-34257101-1440-900.png"")]
public string ImageUrl { get; set; }

But nothing is shown. If I set manually in the xaml file an image url it works fine...

Answer 1

The problem is, that the Binding mechanism does not know where to look for the ImageUrl property. You can either set the DataSource of the tag or any of it's parents to an instance of the class, where the property is defined.

Or you use more information in each Binding statement. To bind to yourself, just use

UriSource="{Binding RelativeSource={RelativeSource Self}, Path=ImageUrl}"

or

UriSource="{Binding ImageUrl, RelativeSource={RelativeSource Self}}"

see also WPF Bind to itself

Edit:

You also need to have a notification mechanism on your variable you are binding to. Either make it a DependencyProperty or use a PropertyChanged event (either through INotifyPropertyChanged and call PropertyChanged on changes in the setter with the name of the property, or create an event called <name of property>Changed and invoke this event on changes.

Answer 2

Unfortunately it seems that BitmapSource.UriSource cannot be databound (or more specifically, it can only be bound once and further changes ignored). See discussion here.

Answer 3

In your code you're using <DataTemplate> which means the parent control of this will be either <ListView> or something like that.

Your code reflects very few things about your scenario. I suggest you to bind ImageSource instead of string

Instead working on XAML part, I suggest you to edit your code-behind part.

I'm briefing the sample here. relate this, with your case and do needful.

Example:-

    // BlankPage.xaml ----
    // eg. I've a listView and i want to display
    // image dynamically in DataTemplate

    <ListView x:Name="lstView">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Image Source="{Binding bmp}" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Now, define a model class to give itemsSource to ListView.

// In BlankPage.xaml.cs file

public class model
{
    public ImageSource bmp { get; set; }
}

Now, say for example I'm assigning itemsSource to ListView in Page_Loaded event.

    // in BlankPage.xaml.cs file
    // declare this BlankPage's Loaded event in BlankPage's Constructor
    // and define the event handler like this

    void BlankPage2_Loaded(object sender, RoutedEventArgs e)
    {
        model m1 = new model()
        {
            bmp = new BitmapImage(new Uri("ms-appx:///Assets/TechVista(300x300).png", UriKind.Absolute))
        };

    // here "ms-appx:///Assets/TechVista(300x300).png" should be the Full-System-Path where image is located.
    // and according to that declare the UriKind as Relative or Absolute or other.

        List<model> lstModels = new List<model>();
        lstModels.Add(m1);

    // you can add as many models as you want here.
    // for reference I'm adding only one here.

        lstView.ItemsSource = lstModels;
    }

It will work for sure. For more exact answer, elaborate little more here.

Hope that helps..!